JavaScript（1）

JS组成和基本结构

1.JavaScript缘由

（1）可以实现HTML/CSS初级验证实现不了的复杂的校验

（2）减轻服务器压力（在发送请求到服务器之前使用JS验证客户端）

（3）W3C标准：结构化（HTML），表现化（CSS），行为化（JavaScript）

2.JavaScript定义

（1）脚本语言：一堆命令组合在一起可以批量执行的

（2）有一定的安全性

（3）一种基于对象的一种语言（创建对象/面向对象）

（4）可以定义一堆的事件（方法/函数）并进行调用

JavaScript特点

（1）交互性（动态的行为）

（2）脚本性（批量执行）

（3）解释性（边执行边解释）

3.JavaScript基本结构

（1）ECMAScript（核心语法，JS的前身）

（2）DOM（文档对象模型）

（3）BOM（浏览器对象模型）

特点：

（1）script标签是JS脚本的标签元素名

（2）Type="text/javascript"代表，告诉浏览器<script>标签内部是js代码

（3）Alert（"xxx"）；代表在网页中弹出提示框，并且提示框的内容是xxx

4.JavaScript实战

特点：

（1）<script>标签一般可以存放在页面中的任何位置

（2）开发过程中正常逻辑是放在body最下面的，先读取结构再读取效果（先HTML再JS）

5.JavaScript执行原理

第一步：用户端发送请求到服务器端

第二步：将JS解析出来的数据（用户身份标识）绑定在请求路径中

第三步：服务器端获取到参数之后会响应客户端（返回数据到客户端）

第四步：客户端通过浏览器解析响应的数据并将数据展现在浏览器只上

网页引入JS三种方式

1.使用<script>标签

<script type="text/javascript"></script>

2.使用外部引入

<script src="export.js"  type="text/javascript"></script>

3.HTML标签内部引入

<input name="btn" type="button" value="弹出消息框"  οnclick="javascript:alert('欢迎你');"/>

JavaScript核心语法

1.变量

【1】先声明变量再赋值

代码：var name；

           name = ""

           alert（"我的名字是："+name）；

特点：

（1）JS变量，存储变量值，这个变量值会赋给变量名

【变量名=变量值】代表的含义即：将变量值赋给变量名

（2）如何使用变量步骤：

     步骤1：定义变量名[var  变量名；]

     步骤2：变量赋值[变量名 = 变量值]

     步骤3：输出变量[alert（变量名）]

【2】同时声明和赋值变量

代码：var name = "张三"；

           alert（"我的名字是："+name）；

【3】不声明直接赋值

代码：name = "张三"；

           alert（"我的名字是："+name）；

2.数据类型

（1）数值类型 number

代码：var age = 18；

           alert（typeof（age））；

拓展：typeof（）法代表的含义是查询某个参数的

（2）字符串类型string

代码：var name = "老默"；

           alert（typeof（name））；

（3）布尔类型boolean

代码：var flag = false；

           alert（typeof（flag））；

（4）undefined类型

代码：var weight；

           alert（typeof（weight））；

特点：变量定义但是未赋值

（5）null类型

代码：【1】var sex = null；

                    alert（null == undefind）；

           【2】var sex = null；

                    alert（typeof（sex））；

特点：

【1】null == undefined 代表两者等价

【2】typeof（null）代表的含义是null属于父类型object类型

3.typeof运算符

定义：检测变量的返回值

（1）undefined：变量被声明后，但未被赋值

（2）string：用单引号或双引号来声明的字符串

（3）boolean：true或false

（4）number：整数或浮点数

（5）object：javascript中的对象、数组和null

4.string类型

（1）length属性

代码：var str = "my name is jame Green"；

           alert（str.length）；

特点：获取某个字符串的长度，利用length属性（包含空格）

（2）方法

【1】charAt（）

代码：var str = "my name is jame Green"；

           alert（"第0位的位置："+str.charAt（0））；

           alert（"第3位的位置："+str.charAt（3））；

特点：charAt（）方法可返回指定位置的字符，第一个字符位置为0，第二个字符位置为1，空格也算字符

【2】indexOf（）

代码：var str = "Hello world，welcome to the universe."；

           var n = str.indexOf（"welcome"）；

           document.write（n）；

特点：indexOf（）方法可返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回-1（indexOF（）方法区分大小写）

5.数组

（1）Var array = []；

特点

【1】var array=[]；代表创建一个数组

【2】array[0]；代表给数组的第1个位置上赋值，值为32

【3】array[5]；代表给数组的第6个位置上赋值，值为3

【4】在位置0、1、2、5上都赋值，唯独3、4位置上未赋值，但是依赖占位，所以会导致array.length获取数组的长度为6

【5】for（var i=0；i<array.length；i++）{}代表的含义是循环遍历array数组，从数组的0位置遍历到数组的6位置（array.length），直至循环结束

<script type="text/javascript">

           //步骤1：创建数组

            var array = [];

           //步骤2：给数组赋值

            array[0] = 32;

            array[1] = 3;

            array[2] = 3;

            array[5] = 3;

           //步骤3：查询数组的长度

            alert(array.length);

           //步骤4：循环遍历数组，并输出数组的每一个值至浏览器之上

            for(var i=0;i<array.length;i++){

            document.write(array[i]+"<br />");

            }

</script>

（2）Var array = new array（）；

数组的创建/赋值 的第二种表现形式

（3）数组的创建和赋值的多种方式可以交叉使用

（4）方法

push()：向数组末尾添加一个或更多 元素，并返回新的长度

sort()：对数组排序

join( )：把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔

6.运算符

（1）算术运算符：+

【1】数值之间加的操作

var a = 1；

var b = 2；

var c = a + b；

document.write（c）；

【2】字符串之间的加操作

var a = "1"；

var b = "2"；

var c = a + b；

document.write（c）；

【3】字符串和数值之间的加操作（拼接操作）

var a = "1"；

var b = 2 ；

document.write（a+b）；

（2）算术运算符：- * /

var a = 5；

var b = 2；

var c = a-b；

document.write（3）；

document.write（a*b）；

document.write（a/b）；

（3）赋值运算符 =

步骤1：定义变量a；步骤2：给变量a赋值3

var a = 3；

步骤3：又给变量a赋值6（原有的值会被替换）

a = 6；

document.write（a）；

（4）赋值运算符 +=

var a = 4；

a+=7；

document.write（a）；

（5）比较运算符 >  <  >=  <=  ==  !=

var a = 2;

var b = 2;

var c = 3;

if(a>b){

     alert("a大于b的值");

}else{

     alert("a不大于b的值");

}

if(a<b){

     alert("a小于b的值");

}else{

     alert("a不小于b的值");

}

if(a>=b){

     alert("a大于等于b的值");

}else{

     alert("a大于等于b的值 不成立！");

}

if(a<=b){

     alert("a小于等于b的值");

}else{

     alert("a小于等于b的值 不成立！");

}

if(null == undefined){

     alert("null == undefined");

}else{

     alert("null == undefined 不成立！");

}

if(a != 2){

     alert("a不等于2");

}else{

     alert("a等于2");

}

（6）逻辑运算符

var a = 1;

var b = 2;

if((a>b) &&(a>=1)){

     alert("哈哈");

}else{

     alert("呵呵");

}

if((a<=1) || (a>b)){

     alert("哈哈");

}else{

     alert("呵呵");

}

if(!(a>=5)){

     alert("哈哈");

}else{

     alert("呵呵");

}

逻辑控制语句

1.if条件语句

var a = 2;

var b = 1;

if(b>a){

     document.write("数学");

}else{

     document.write("语文");

}

特点：

（1）if是关键字

（2）If之后括号中的值为布尔值条件

（3）如果条件为ture，则执行小括号后方法体中的代码

（4）如果条件为false，则执行else之后方法体中的代码

2.switch多分支语句

var n = 2;

switch(n){

     case 1:alert("哈哈1");break;

     case 2:alert("哈哈2");break;

     default:alert("剩余的3");

}

特点：

（1）switch是关键字

（2）Switch（）括号中的变量

（3）如果变量匹配某个case的值，则执行该case对应的代码体，并且通过break关键字阻止往下执行下一个case

3.拓展

if多分支和switch多分支的区别：

（1）if多分支的条件是范围，也可以是等值（if可以实现switch实现不了的）

（2）Switch多分支的条件必须是等值

4.for循环语句

for(var i = 0;i<array.length;i++){

     document.write(array[i]+"<br />");

}

特点

（1）关键字是for

（2）Var i=0的含义：初始位置从0开始，即var i =0

（3）i<array.length的含义：结束位置是小于数组的length属性值，即末位置的角标为length-1

（4）i++的含义：每次循环遍历的时候自增1；

5.遍历数组（一个一个的查询数组的所有元素，从数组角标为0开始到数组的末尾，直至查询结束）

拓展：自增

var array = [];

array.push(1877);

array.push(12);

array.push(13);

array.push(14);

array.push(15);

document.write("数组的长度："+array.length+"<br />")           

document.write("数组的第一个值："+array[0]+"<br />");

document.write("数组的最后一个值："+array[4]+"<br />");

6.while循环语句

特点：while语句只要指定条件为true，就会执行循环只要条件为true，循环就可以一直执行代码

var i = 0;

while(i<array.length){

     document.write(array[i]+"<br />");

     i++;

}

7.for-in循环（就是for循环）

局限性：默认的条件就是0<数组的长度且i++

for(var i in array){

     document.write(array[i]+"<br/>")

}

8.注释

特点：

解释代码是做什么的

让开发工具和浏览器都不识别，不能执行

（1）单行注释

//

（2）多行注释7

/*   */

9.输入/输出

（1）alert 弹框输出

alert("提示信息");

（2）prompt 弹框输出/输入

prompt()  代码：

prompt("提示信息", "输入框的默认信息");

prompt("请输入你喜欢的颜色","红色");

prompt("请输入你喜欢的颜色","");

函数

1.函数定义

（1）函数的定义：是完成特定任务的代码语句块

（2）函数的使用方式：可以直接使用

（3）函数的分类：系统函数（JavaScript内置函数）和自定义函数（自己创建的函数）

（4）自定义函数分类：匿名函数 和 有名函数

（5）函数的别名：方法

2.常用系统函数（内置函数，JavaScript自带的函数）（字符串）

（1）parseInt（字符串成）将字符串类型转换成数值类型

var a = 32;

var b = parseInt(a);

alert(typeof(b));

（2）parseFloat（字符串）

将字符串转换为浮点类型（带小数）

a本身不是字符串，但是放在（）里面会自动转会为字符串

var a = 32.4

var b = parseFloat(a);

alert(b);

（3）isNaN（）

判断参数是否是非数字

var a = 12;

alert(isNaN(a));

3.自定义函数

（1）有名函数

特点：

【1】定义：有函数名称的函数

【2】定义函数的语法结构

function show(){

    alert("我是中国人");

}

【3】调用有名函数的语法结构：

[1] 直接调用：show（）

[2] html调用

<input type="button" value="触发" οnclick="show()" />

（2）匿名函数

特点：

【1】函数无名称

【2】调用匿名函数需要借助变量

var show = function(){

    alert("我是老默");

}

4.有参函数

function show(a,b){

    alert(a+"+"+b+"="+(a+b));

}

a，b是形参（形式参数，不是固定的值，变量）

2,3是实参（实际参数，是固定的值）