day030_javascript

day02_JavaScript

1. JavaScript【Js】简介

1.1 Js概述

• JavaScript是一门基于对象和事件驱动的客户端脚本语言

1.2 Js特性

• 解释型语言：边解释边执行
• 面向对象
• 弱类型语言：对数据类型要求较弱，如声明变量时使用var代词
• 动态类型语言：如变量在运行期间可以任意赋值【数据类型】

1.3 Js构成

• ECMAScript：ECMAScript是一个标准，而这需要由各厂商去实现。
• DOM：Document Object Model【文档对象模型】JS 中通过 DOM来对 HTML 文档进行操作。只要理解了DOM就可以随心所欲的操作 WEB 页面。
• BOM：Browser Object Model【浏览器对象模型】

2. JavaScript基本语法

2.1 变量

• 使用var声明变量
• 使用typeof()验证变量的数据类型

2.2 数据类型

• 基本数据类型

  • number
  • string
  • boolean
  • null
  • undefined【未定义：只声明未赋值】

• 对象类型

  • 数组
  • 函数
  • 一般对象

2.3 运算符

• 算术运算符：+ - * / % ++ — += -+ …

• 逻辑运算符：&& || ！

• 三元运算符：【?:】

• 赋值运算符：=

• 关系【比较】运算符：> < >= <= != == 【=或!】

  • == 与 ===【全等】 区别
    ==：比较两个变量的数值是否相等
    ===：比较两个变量是否全等【数值且数据类型相等】

  • !==【不全等】，不全等主要有以下两种情况

    • 数值不等
    • 数据类型不等

2.4 流程控制【过：与Java中一致】

2.5 Js中数组

• 定义数组

  • var arr = [“zs”,1,true];
  • var arr2 = new Array(“zs”,1,true);

• 调用数组

  • arr[index]

• 注意：

  • js的数组中可以存储任意数据【数据类型】
  • js的数组是自动扩容

3. JavaScript中的函数

3.1 定义函数

• 定义普通函数：function 函数名([形参列表]){}
• 定义匿名函数：function([形参列表]){}

3.2 调用函数

• js中调用函数时，不检查形参与实参匹配情况。

• 实参>形参【add()】

  • 自定忽略多余参数

• 实参<形参【add()】

  • 实参数据类型：number

    • 结果：NaN【not a number】，计算结果不是一个数值。

  • 实参数据类型：string

    • 结果：实参值+undefined

• js函数中存在隐式对象arguments，类似java中可变形参

  • function add(i,j){
    alert(arguments[2]);
    return (i+j);
    }
    alert(add(2,1,300));
    

• 匿名函数调用

  • ```javascript //匿名函数 var fun = function (i,j){ alert(“匿名函数,i:”+i); } fun(1,2);

//为btnId关联单击事件 btnEle.onclick = function(){ //提示框 alert(“Hello JS!”); }

<a name="163c2bae"></a>
#### 3.3 js中不存在函数重载及重写问题

- 在js中后面同名函数会覆盖前面同名函数

<a name="4cac13b6"></a>
#### 3.4 函数调用注意事项【函数名与函数名()区别】

- 函数名：使用的函数的引用
- 函数名()：执行【触发】当前函数

<a name="1ae9f87d"></a>
### 4. Js中的对象

<a name="ec053c23"></a>
#### 4.1 数组是对象

<a name="065eee4c"></a>
#### 4.2 函数也是对象

<a name="62c23ecf"></a>
#### 4.3 一般对象

- 
对象创建&使用

   - 
方式一：var obj = new Object()

      - 
代码
```javascript
//方式一
var stu = new Object();
stu.name = "jiale";
stu.age = 23;
stu.study = function(){
    alert(this.name+"正在学习，....");
}
alert(stu.age);
stu.study();

• 方式二：var obj2 = {“key1”:value,”key2”:value2,…}; //json对象

  • json对象的key建议使用string类型，json对象的value是js中支持的数据类型即可。

  • 代码

    //方式二
    var stu = {
    "stuName":"caixukun",
    "stuAge":22,
    "study":function(){
    alert(this.stuName+"is studing...");
    }
    };
    alert(stu.stuAge);
    stu.study();
    

• this关键字指向的是调用当前函数的对象。

4.4 js中自带对象

• JavaScript内置对象

  • Array 、Date、Math、……

• 浏览器对象

  • window：浏览器对象模型中的核心对象

  • location：控制URL【地址栏】的对象【取值赋值】

    • location = "http://www.baidu.com";
      // location.href = "http://www.baidu.com";
      

• URL：统一资源定位符

• dom对象

  • document、body、button……

5. Js中常用事件

• onload：加载事件
• onclick：单击事件
• onchange：文本改变且失去焦点事件
• onsubmit：表单提交事件
• onblur：失去焦点事件

6. Js嵌入方式【书写位置】

• 行内js：结构与行为相耦合，不建议使用。

  <button id="btnId" onclick="alert('hello js');">SayHello</button>
  

• 内部js：书写在