JavaScript

历史

    原名叫LiveScript，是由美国网景公司开发的

    是一种脚本语言，在网页中使用，运行在浏览器中。    

    脚本语言：不需要编译的语言 sql python html css javaScript

                      直接有某种解释器(引擎)解释执行，逐行从上向下解释执行

网景公司和sun公司合作，将LiveScript改名为javaScript

1.javaScript代码写在哪

2.变量如何声明

3.数据类型

4.运算符

5.流程控制，循环语句

一、变量

        java是强类型语言  数据类型 值

        javaScript弱类型

                变量是没有类型的，给他赋了什么类型的值，它的类型就是什么

                使用var关键字声明，没有具体的类型

        只声明变量，如a; 会报错

数据类型

1.数值类型 包含整数和浮点数 number

var a = 10;
var b;
b = 10.5;
alert(b)
alert(typeof(b));
//typeof()返回变量的数据类型

2.布尔类型

var c = true;
var d = false;
alert(a==b);

3.字符串，单引号和双引号都表示字符串

var e = "abc";
var f = 'def';
alert(f);

4.undefined类型 声明了变量，却没有赋值。

var g;
alert(g==undefined);

5.对象类型

var date = new Date();
alert(date.getFullYear());
alert(date.getMonth()+1);

 二、运算符

大致与Java相同，下述都是有与Java中不同的功能的运算法

算术运算符：+ - * / % ++ --

+ 加法  字符串连接

var a = "10";
var b = 5;
var c = 10;
var d ="a";
alert(a+b);//105
alert(b+c);//15

  -、*、/、%

会把表达式中数字字符串尝试类型转换  如果字符串不能转换为数值返回NaN

alert(b-c);//-5  
alert(a-b);//5   "字符串(数字)"- 数值 = 数值
alert(c-d)//NaN  not a number

比较运算符

== 只比较值是否相等

alert(a==c);//true

=== 全等  比较值和类型是否相等

alert(a===c);//false

三、函数

自定义函数

function 函数名(参数(不需要定义类型)){

        函数体

}

1.无参

function test(){
    alert("你好")
} 

2.有参

function test(a,b){
    alert(a+b)
}

3.有返回值

function test (a,b){
    return a+b;
}

调用函数

test();//方式1调用

test("abc",new Date());//方式2调用

var c = test(10,5);//方式3调用
alert(c);

全局函数

        系统中已经定义好了，可以直接调用的函数

1.alter(输出内容); 弹窗显示

2.parseInt(10.1);

把浮点数转为整数

3.parseInt("10");

把字符串数字转为整数，如果转换内容是字符串，字母不能开头，只将开头的数字部分转换

例如alert(parseInt("1a0"));输出结果只有1

4.parseFloat("10.5");

将字符串数字转换为浮点数

5.typeof("变量");

返回变量的数据类型

 var s = "2+3*4";

6.alert(eval(s));

把传入进来的字符串当作js的脚本执行

eval(alert(3.1415));    弹窗显示3.1415

7.console.log("字符串")

在浏览器调试的控制台触发

四、内置对象

String字符串

属性

length 用法：返回该字符串的长度.

方法

charAt(n)：返回该字符串位于第n位的单个字符

indexOf(char)：返回指定char首次出现的位置

lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找

substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段

substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段

split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

例如：'1&2&3&4&678'.split('&')返回数组：1,2,3,4,678。

Array数组

数组的定义方法：

var <数组名> = new Array();

这样就定义了一个空数组。

为数组添加数据

<数组名>[下标] = 值;

定义数组时初始化数据

var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);

或

var <数组名> = [<元素1>, <元素2>, <元素3>...];

属性

length ：数组的长度，即数组里有多少个元素。

方法

join(<分隔符>)：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。

reverse()：使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。

sort()：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。

对数字排序需要调用排序函数。

a.sort(numbersort);

numbersort排序函数，当作参数传入到sort函数中

function sortNumber(a,b){
        return a - b;
}

Date

获取日期

new Date() 返回当日的日期和时间

getFullYear() 返回四位数字年份

getDate() 返回一个月中的某一天 (1 ~ 31)

getMonth() 返回月份 (0 ~ 11)

getDay() 返回一周中的某一天 (0 ~ 6)

getHours() 返回 Date 对象的小时 (0 ~ 23)

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

Math对象

提供对数据的数学计算。

属性

PI 返回圆周率π（3.1415926535...)。

方法

Math.abs(x) 绝对值计算；

Math.pow(x,y) 数的幂；x的y次幂

Math.sqrt(x) 计算平方根；

Math.ceil(x) 对一个数进行上舍入

Math.floor(x) 对一个数进行下舍入。

Math.round(x) 把一个数四舍五入为最接近的整数

Math.random() 返回 0 ~ 1 之间的随机数

Math.max(x,y) 返回 x 和 y 中的最大值

Math.min(x,y) 返回 x 和 y中的最小值

五、事件

onclick : 鼠标单击事件(左键) 

onblur : 标签失去鼠标焦点时触发

onfocus : 标签获得鼠标焦点时触发

onmouseover : 鼠标移入到标签时触发

onmouseout : 鼠标从标签移出

onload: 当网页内容加载完毕后触发

主要在body标签使用

onchange : 当内容改变 且失去鼠标焦点时触发

使用方法

//点击按钮后调用test()函数，触发事件的方式onclick可以改变成其他方式

六、Html DOM

DOM是Document Object Model文档对象（网页中的标签）模型的缩写.

通过html dom，可用javaScript操作html文档的所有标签

通过html标签事件触发JavaScript函数

需要在JavaScript函数对网页的标签进行操作

如何在JavaScript中操作网页中的标签

        JavaScript认为网页中的每个标签都是一个对象，在js中把这一类标签对象称为html dom对象

1.获得网页中的标签对象的方式

（1）getElementById("id属性名");

        在网页加载完毕后,在js中生成一个document对象(表示整个html文档)，里面提供了一个方法getElementById();

var tobj1 = document.getElementById("t1");//通过标签ID获得网页中的标签对象

（2）getElementsByTagName("标签名");

返回的是一个标签对象的集合，是一个集合对象，即使只有一个标签，也是集合

var divobjs = document.getElementsByTagName("div")

（3）getElementsByClassName("class属性名");

var divobjs = document.getElementsByClassName("box");

（4）getElementsByName("name属性名");

与上面方式相同

2.操作标签的属性值

对象名.属性名

tobj1.id = "t3";
//将id属性改为t3

3.通过DOM对象操作标签体中的内容

对象名.innerText或对象名.innerHTML

innerText 只获取标签体中的文本内容

innerHTML 可以获得标签内所有的内容(包括子标签和文本)

4.通过dom对象操作标签的css属性

对象名.style.标签样式

divobj1.style.background = "red";

七、计时

一次执行

setTimeout(“函数”,”时间”)

开启定时,设定在指定的时间后调用指定的函数，只调用一次，时间以毫秒为单位

clearTimeout()取消setTimeout() 

多次执行

setInterval(“函数”,”时间”)每隔指定时间重复调用

clearInterval()取消setInterval()