[TOC]

课程目标：

  1. JS的重要作用，HTML+CSS+JS的之间关系
  2. JS脚本语言的程序控制语法
  3. JS脚本语言函数，自定义函数
  4. JS脚本语言事件响应及处理、表单处理
  5. JS脚本语言DOM模型及操作
  6. 使用本课程所学技术完成综合练习

JS简介

  1. 什么是JS — JavaScript的简称，是一种动态脚本语言。
  2. 什么是动态页面 — 人机交互 静态页面 — 没有人机交互
  3. JS需要安装才能使用吗？ — 不需要
  4. 什么是BOM — 浏览器对象模型 DOM — 文档对象模型

详细介绍

  1. JavaScript是一种基于对象和事件驱动的客户端脚本语言，最初的设计是为了检验HTML表单输入的正确性，起源于Netscape公司的Livescript语言

JavaScript的组成：ECMAsxcript（语法）、Browser Objects(DOM BOM 特性)组成

JavaScript的注释和分号

//单行注释
/对行注释/
语句结束还是用分号，如果省略，则由解析器确定语句地结尾

JavaScript的标识符

  1. 什么是标识符 — 变量、函数、属性的名字，或者函数的参数。
  2. 标识符的命名规则
    1. 由字母、数字、下划线(_)或者美元（$）组成
    2. 不能以数字开头
    3. 不能使用关键字，保留字作为标识符

编写第一个JS程序

  1. 使用script标签在HTML中插入JavaScript，编写内部JavaScript ```html <!DOCTYPE html> 


2. 引用外部JS文件
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/js1.js"></script>
</head>
<body>

</body>
</html>

JS变量

  1. 与其他程序设计语言相同，用来临时存储信息
  2. 创建方法如下： 弱数据类型
    1. var x=1; var x=2,name=”zhangsan”;
    2. var x; x=1; var name; name=”lisi”;
  3. 注意：Js中的变量，区分类型，但是没有int之类的关键词

JS调试

  1. alert()弹框调试、console.log控制台输出调试
  2. 观察变量值的变化规律，是否符合程序设计的目的
  3. 语法：
    alert(flag);
console.log(flag);
    image.png

JS自定义函数】

  1. JavaScript函数：自定义函数、内置函数
  2. 自定义函数：是完成某一个功能模块的代码段，可以重复执行，方便管理和维护。
  3. 创建方法：
    1. 这种事函数声明，可以先使用后定义。
    2. image.png
      function fun1(){
代码段;
return;
}
      b.这种叫做：函数表达式，必须先定义后使用
      **
      var fun1 = function(x){
return x+1;
}

image.png

JavaScript数据类型

  1. ECMAScript：

    1. 简单数据类型：
      1. Underfined
      2. null
      3. Boolean
      4. Number
      5. String

    b. ECMAScript6: es6 新增symbol数据类型
    c. 复杂数据类型：Object — 对象

1、number — 数字类型，整型、浮点型都包括。

2、string — 字符串类型，必须放在单引号或者双引号中

3、boolean — 布尔类型，只有true和false 2种值

4、underfine — 未定义，一般指的是已经声明，但是没有赋值的变量,派生自null值， underfined==null ——> 返回的是true

5、null — 空对象类型，var a = null; 和 var a = “”;有区别；

image.png

特殊类型

  1. object — 对象类型，在js中常见的window document array等
  2. NaN — 是Number的一种特殊类型，isNaN() 如果是数字 返回false 不是数字 返回true
  3. isNaN() — 说明：对接受的数值，先尝试转换为数值，再检测是否为非数值。
  4. 任何涉及NaN的操作（例如NaN/10）都会返回NaN
  5. NaN与任何值都不相等，包括NaN本身。 ```html var id=”16”; console.log(isNaN(id));//false 转换之后是数字

var id=”lisi”; console.log(isNaN(id));//true 转换之后不是数字 ```

type of

  1. 功能：检测变量类型
  2. 语法：typeof 变量 或者 typeof（变量）
  3. 返回值：string number boolean object underfined function

类型转换

image.png

  1. parseInt() - 转换成整型 parseFloat() - 转换成浮点类型，带小数点 Number() - 包括整数和小数 Bolean() - 转换成逻辑类型
  2. 强制类型转换 隐式类型转换
  3. 案例演示
  4. 总结：
    1. 除0之外的所有数字，换换成布尔型都是true
    2. 除””之外的所有字符，转换成布尔型都是true
    3. null和undefined转换成布尔型是false
    4. image.png