HTML JavaScript

JavaScript

历史

原名：LiveScript

概述

1.是一种具有函数优先级的轻量级、解释型的编程语言—计算机语言

​ 2.是目前最流行的脚本语言

​ 3.作用：强化页面的可用性或是提升与网站进行交互体验

​ 静态网页 动态网页 （用户能和网页进行交互）

​ 4.javascript可以写在页面的任何位置，但是建议写在的结束标签之后

​ 5.在HTML中，js脚本必须写在

  <script type="text/javascript">
</script> 标签之中，你也可以单独创建***.js文件，来保存脚本内容

​ 6.脚本事由一条条语句构成的，语句就是你给计算机发送的指令

​ 7.指令中需要的数据要进行存储，将数据存储在变量中

​ 8.在js中如何声明一个变量 var 变量名

​ 9.变量名的要求：只能以字母，下划线开头，后面可以和跟数字、字母和下划线

基本语法

alert() 输出对话框

console.log() 输出到控制台

function 函数名(){

} 定义函数

var 定义变量 任意类型

onclick 点击事件

parseInt 强制类型转换

typeof(arg) 返回数据类型

eval(arg) 运算部分字符串

内置字符串String

length ： 返回字符串长度

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

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

lastindexOf(char)： 从后往前找char首次出现的位置

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

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

split(分隔字符)：返回一个数组，该数组是从字符串对象中分离开来的

内置对象Array数组

数组的创建

var array = new Array();

var array = new Array("a","b","c");

var array = 

内置对象

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

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

reverse：使数组中的元素顺序反过来

sort：：使数组中的元素按照一定的顺序排列

内置日期

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

getFullYear() ：返回四位数字年份

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

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

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

getHours()：

getMinutes()：

getSeconds()：

内置对象Math

PI

Math.abs()：绝对值

Math.pow()

Math.sqrt()

Math.ceil()：进一

Math.floor()：取一

Math.round()：四舍五入为整数

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

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

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

事件

onclik 鼠标点击

onblur 鼠标失去焦点（输入框）

onfocus 鼠标获得焦点

onmouseover 鼠标移入

onmouseout 鼠标移出

onload 等body加载后执行，网页加载完毕后触发相应的事件

onchange 失去焦点且内容发生改变

Html DOM

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

查找元素

通过id：document.getElementById(“id");

通过标签：document.getElementsByTagName(“p”);

通过类名：document.getElementsByClassName(“p”);

通过name：document.getElementsByName(“name");

改变HTML

改变 HTML 标签的属性

document.getElementById(“username").value=“new value";
document.getElementById(“image”).src=“new.jpg";

修改 HTML 内容的最简单的方法时使用 innerHTML 属性

document.getElementById(“div”).innerHTML=new HTML

改变CSS

语法：
document.getElementById(“id”).style.property=new style;
例：
document.getElementById(“p2”).style.backgroundImage=“url(bg.jpg)”;

计时

setTimeout(函数, 时间) 多长时间后执行这个函数

clearTimeout() 取消setTimeout()

setInterval( 函数, 时间) 每隔指定时间重复执行这个函数

clearInterval() 取消setInerval