JavaWeb（三）JavaScript

一、 JS 简介

JS：

1、直接嵌入HTML页面。

2、由浏览器解释执行代码，不进行预编译。

解释型语言和编译型语言

JS：解释型语言、弱类型语言

Java:编译型语言、强类型语言

JS用var定义一个变量

变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。

JS不区分单引号和双引号。

二、 JS 数据类型

null、undefined区别：

没有初始化的变量自动取值为undefined。

如果这个变量值为null表示这个变量已经赋值了，这个值正好是null。

声明变量统一使用var声明，声明的时候变量是没有类型。

但是变量赋值之后就有类型，这个变量的类型就是这个变量值的类型。

三、关系运算符

全等：===

不全等：!==

判断值是不是相等，还有类型是不是相等。

四、 String

创建String对象有两种方式

var str1 = 'hello js!';
var str2 = new String('hello js!');

String常用的方法：（基本跟Java一样）

1、大小写转换

str.toLowerCase();

str.toUpperCase();

var str = 'Hello jS!';

console.log(str.toLowerCase());//hello js!

console.log(str.toUpperCase());//HELLO JS！

2、获取指定字符：

str.charAt(index) 返回指定位置的字符

index：字符位置

console.log(str.charAt(6));//j

3、查询指定字符串出现索引

str.indexOf(findstr, [index]);

str.indexOf(findstr);

str.indexOf(findstr,index);

str.indexOf(findstr,[index])

str.lastIndexOf(findstr, [index]);

使用说明：

findstr:查找的字符串

index:开始查找的位置索引，可以省略

返回findstr在x中出现的首字符位置索引，如果没有找到则返回-1

lastIndexOf:从后面找起

4、split() 方法用于把一个字符串分割成字符串数组。

x.split(separator,howmany)

separator : 字符串或正则表达式，从该参数指定的地方分割 stringObject

howmany:指定返回数组的最大长度，可以省略

返回分割后的字符串数组

五、 Boolean

Java中条件表达式必须返回布尔类型 if() while()

JS中表达式可以是任意表达式

1不是0，就是非空值，表示true

NaN=Not a number

在JS里面一切表示空的值都是false，非空的值都是true。

六、 Array

var array1 = new Array();//创建一个空的数组

var array2 = new Array(7);//创建长度是7的数组

var array3 = new Array(100, 'a', true);

var array4 = [100, 200, 300];

获取数组元素的个数：length属性

javascript 复制代码

<script type="text/javascript">

    var array1 = new Array(7);

    console.log(array1.length);

    var array2 = new Array(100, 'abc', true);

    console.log(array2.length);

    //创建一个空数组

    var array = new Array();

    array[0] = '234';

    console.log(array);//['234']

    console.log(array.length);//1

    array[1] = false;

    console.log(array);//['234', false]

    console.log(array.length);//2



    //对JS里面的数组可以不使用下标，使用push和pop向数组里面放数据和拿数据

    var arr = new Array();

    arr.push('zhangsan');

    console.log(arr);//['zhangsan']

    console.log(arr.length);//1

    arr.push(false);

    console.log(arr);//['zhangsan', false]

    console.log(arr.length);//2

    arr.push(45);

    console.log(arr);//['zhangsan', false, 45]

    console.log(arr.length);//3



    console.log(arr.pop());//45

    console.log(arr.pop());//false

    console.log(arr.pop());//zhangsan

</script>

七、 Math

八、 eval ：将字符串转化为表达式

eval('2+3') //5

eval('var x=10;var y=20;console.log(x*y);'); //200

九、 JS 对象

javascript 复制代码

var student = {

  name : 'zhangsan',

  age : 22,

  study : function (){

    console.log(this.name + '的年龄是' + this.age + '岁')

  }

}

student.study()

console.log(student.name)

十、 DOM

dom：document object model文档对象模型

dom技术的作用：JS语言和Html标签之间沟通的一个桥梁。

为了方便JavaScript语言通过DOM操作Html比较方便，

把Html标签的内容划分为各种节点：

1.文档节点(document)

2.元素节点也叫标签 getElementsByTagName

3.文本节点

4.属性节点 type="text" name="username"

5.注释节点

dom就是学习利用JS如何实现对Html标签增删改查。

documnet：是页面中的内置对象，内置对象简单理解就是已经new好的一个对象，对象的名字就叫document。

元素节点的获取：

document.getElementById( id属性值);

document.getElementsByTagName("标签名")；

十一、 innerText innerHTML

innerText 直接当成一个字符串展示

获取或设置元素的纯文本内容

innerHtml 将内容当成html来解析

获取或设置元素的HTML 内容