JavaScript基础

JavaScript历史：

早期是美国网景公司开发的一种脚本语言，起初命名为LiveSript。

面向对象语言，不需要编译，由浏览器直接解释运行。

美国网景公司（认为LiveScript发展前途好）与SUN公司（认为LiveScript可以普及Java）签订协议将LiveScript改为JavaScript

JavaScript概述：

一种直译式脚本语言（不需要编译，可以直接通过浏览器（解释器）解释运行）

运行特点：从上到下逐行运行，运行到出错行才能发现错误

用来为网页添加各式各样的动态功能

动态功能具体体现在：1、响应客户端的鼠标和键盘事件。2、客户端表单数据验证。3、使用JavaScript动态的改变页面标签的样式。

基本语法

变量：

声明变量用var

变量作用域：全局变量：在函数外面定义的变量称为全局变量，在函数内部可以直接使用。局部变量：定义在函数内部。

数据类型：

数值型：整数和浮点数；布尔型；字符串型（用单引号或者双引号说明）；undefined类型；Object类型。

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

1、+ 数值+数值=数值 加法运算
数值+字符串 字符串+字符串 = 字符串 连接符

2、- 数值-字符串数字 = 数值（隐式的数据类型的转换）

赋值运算符：= += -= *= /= %=

比较运算符：== === != > < >= <=

==：比较值是否相等

===：比较值、数据类型是否相等 全等

逻辑运算符：&& || !

条件运算符：

var result = (条件表达式)?结果1:结果2 条件成立返回结果1，不成立返回结果2

函数：

1、定义函数

function functionName([arguments]){

javascript statements

[return expression]

}

function: 表示函数定义的关键字;

functionName:表示函数名;

arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;

statements: 表示实现函数功能的函数体;

return expression:表示函数将返回expression的值，可选的的语句。

2、函数调用

通过函数名调用

3、全局函数：JavaScript中已经定义好的，可以直接拿来使用的函数

alert(); 弹框
parseInt(); 把数值（小数）转为整数数值，把一个字符串(不能以非数字字符开头)的数字转为数值类型
parseFloat();把数值（小数）转为小数数值，把一个字符串的数字转为数值类型，如果有小数保留小数部分
typeof() 拿到值的数据类型
eval() 可以把一段字符串当作js脚本执行

内置对象：（与Java大部分相同）

1、String字符串

方法：substring(开始位置，结束位置)

​ substr(开始位置，截取长度)

2、Array数组

定义 ：var a = new Array();
a[0] = 0;
a[1] = 1;
a[2] = 2;
a[3] = 3;

​ var a = new Array(1,2,3,4);

​ var a = [1,2,3,4,5,6];

​ var a = [“b”,“a”,“c”,“f”,“e”];

​ a.join(“:”)//把数组转为一个字符串

​ a.reverse()//逆序

​ 注意： a.sort()//排序不是按照数字的大小排序的

3、Date

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

getFullYear() 返回四位数字年份

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

getMonth() 返回月份

getDay() 返回一周中的某一天

getHours() 返回 Date 对象的小时

getMinutes() 返回 Date 对象的分钟

getSeconds() 返回 Date 对象的秒数

4、Math

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 中的最小值

事件：

属于html标签中的内容，可以操作标签产生事件，通过事件去调用指定的函数。

οnclick=“fun()” 鼠标左键单击事件
οnfοcus=“fun()” 输入框获取到鼠标焦点时触发 聚焦事件
οnblur=“fun()” 输入框失去鼠标焦点时触发 失焦事件
οnmοuseοver=“fun()” 鼠标移入到标签上时触发 悬浮事件
οnmοuseοut=“fun()” 鼠标移出标签时触发
οnlοad=“fun()” 当网页内容加载完成后触发
οnchange=“fun()” 当标签失去焦点，并且内容发生改变时 触发

html dom 对象

Document Object Model —>文档 对象 模型
JavaScript是一种面向对象的语言，操作网页时，把网页中的每一个标签都视为一个对象，把这一类标签对象统称为 dom 对象。
那么JavaScript要想对网页中的标签进行操作，南无就需要获取到要操作的标签。
要操作，先得到：
document 对象，表示整个html网页文件，网页加载完毕后，生成document对象
document.getElementById(); 根据标签的id获取唯一一个标签对象
拿到标签对象后，对标签的属性进行操作

//在js中获得第一个文本框标签对象
var tobj1 = document.getElementById("txt1");
//在js中获得第二个文本框标签对象
var tobj2 = document.getElementById("txt2");
	tobj2.value = tobj1.value;
	tobj1.value = "按钮";
	tobj1.type = "button";

对标签体内的内容进行操作

var divObj1 = document.getElementById("box1");
var divObj2 = document.getElementById("box2");
divObj2.innerHTML = divObj1.innerHTML;//innerHTML 拿到标签体内的内容

对标签的css属性进行操作

var divObj1 = document.getElementById("box1");
	divObj1.style.backgroundColor = "plum";
	divObj1.style.width = "100px";
	divObj1.style.height = "100px";

document.getElementsByTagName(“input”);//通过标签名获取到多个标签集合

document.getElementsByName(“hobby”);//通过name属性获取到多个标签集合

document.getElementsByClassName(“c1”);//通过class属性获取到多个标签集合

计时：

var t = setTimeout(“oper()”,5000);//在指定的时间后调用指定的函数，只调用一次

var t = setInterval(“oper()”,3000);//每隔指定时间调用指定函数

clearTimeout(t);//停止计时器
clearInterval(t);//停止计时器