一、JavaScript介绍
1.JavaScript是互联网上最流行的脚本语言
2.JavaScript脚本语言：轻量级、可插入HTML页面中
二、JavaScript实现
1. JavaScript的用法：
HTML中的脚本必须位于<script></script>标签之间
脚本可被放置在HTML页面的<body>和<head>部分中
2. JavaScript使用限制：
在HTML中，不限制脚本数量
通常会把脚本放置于<head>标签中，以不干扰页面内容
例子：打印一个hello,document.write是打印的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write("hello!")
</script>
</body>
</html>
作为外部引用：
js文件中：
document.write("hello!")
Html文件中对js文件进行引入：
<script src="myjs.js"></script>
三、JavaScript输出
1. JavaScript通常用来操作HTML
2. 文档输出：
Documen.write(<p>this is my first JavaScript</p>);
根据ID来对页面进行操作：document.getElementById
<p id="pid">Hello</p>
<script>
document.getElementById("pid").innerHTML="jikexueyuan"
</script>
这样的情况下，就显示jikexueyuan而并非显示hello了，script用getElementById改变了内容
四、JavaScript语法与注释
1. JavaScript语句：
JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
2. 分号：
语句之间的分割是分号
注意：分号是可选项，有时候看到不以分号隔开的。
3. JavaScript代码
按照编写顺序依次进行
4. 标识符：
JavaScript标识符必须以字母、下划线或美元符号开始
JavaScript关键字
5. JavaScript对大小写敏感
6. JavaScript会忽略到多余的空格
7. 代码换行：对换行也是敏感的
8. 保留字：
JavaScript注释
1. 单行注释://
2. 多行注释:/*...*/
五、变量和数据类型
变量代码：
<script>
var i =10; //var为声明，这里为变量声明
var j =10;
var m = i+j
document.write(m); //输出m
</script>
页面上就输出20
JavaScript数据类型
1.字符串（string）2.数字（number）3.布尔（boolean）4.数组（array）5.对象（object）
6.空（null） 7.未定义 8.可以通过赋值为null的方式清除变量
<script>
var string="hello";//字符串
var i1=10;
var flag = true;
var arr=[1,2,3,4];
document.write(arr[1]);
</script>
可以使用另一个方法来定义数组：
var arr= new Array("hello","jike","大家好");
六、运算符
（1）算数运算符：+、-、*、%、++、--
<body>
<p>i=10,j=10;i+j=?</p>
<p id="sumid"></p>
<button onclick="mysum()">结果</button> <!--点击时候调用mysum方法-->
<script>
function mysum() {
var i = 10;
var j = 10;
var m = i + j;
document.getElementById("sumid").innerHTML=m;//innerHTML的作用是：获取对象的内容或向对象插入内容；
}
</script>
</body>
点击button按钮之后调用mysum()方法，然后显示出m的结果
（2）赋值运算符：=、+=、-=、*=、/=、%=
（3）字符串操作
（4）比较运算符：==、===、!=、!==、>、<、>=、<=
比较运算符中：
“===”：必须满足字符类型也相同
（5）逻辑运算符：&&、||、!
（6）条件运算符：例:x<10?”(正确的值)”:”(错误的值)”
条件运算符例子代码：
<script>
var i = 9;
document.write(i>10?"i大于10":"i小于10");
</script>
七、js的条件语句
（1）if...else
<script>
var i =19;
if(i>=10){
document.write("我就喜欢i>=10");
}else{
document.write("为什么i<10?");
}
</script>
打印出write中的内容
当然也可以出现多种条件判断：
<script>
var i =10;
if(i>10){
document.write("我就喜欢i>=10");
}else if(i<10){
document.write("为什么i<10?");
}else{
document.write("i到底是多少，原来是10")
}
</script>
（2）switch
<script>
var i=5;
switch (i){
case 1:
document.write("i=1")
break;//跳出当前
case 2:
document.write("i=2")
break;
default: //当条件不满足任何一个case
document.write("条件不满足case")
break;
}
</script>
八、for循环
迭代器
<script>
var i =[1,2,3,4,5,6];
for(var j=0;j<6;j++){
document.write(i[j]+"<br/>");
}
</script>
生成器
<script>
var i =[1,2,3,4,5,6];
for(j in i){
document.write(i[j]+"<br/>");
}
</script>
九、while循环
While循环
<script>
var i =1;
while(i<10){
document.write("i="+i+"<br/>")
i++;
}
</script>
Do while
do {
document.write("i="+i+"<br/>")
i++;
}
while(i<10)
While和do while的区别：
While是先判断后执行，do while是先执行后判断
十、跳转语句
（1）break
<script>
for(var i=0;i<10;i++){
if(i==5){
break;
}
document.write("i="+i+"<br/>")
}
</script>
break跳出了当前的循环
（2）continue：结束本次循环，进行下一次循环
<script>
for(var i=0;i<10;i++){
if(i==5){
continue;
}
document.write("i="+i+"<br/>")
}
</script>
结束当前的循环，i=5不输出了；
十一、函数
1.函数：函数是由时间驱动的或者当它被调用时执行的可重复使用的代码块。
<script>
function demo(a,b) {
var sum =a+b;
return sum
}
var v1=demo(20,10);
alert(v1) //弹出一个窗口
</script>
十二、定义函数
1.定义函数：
Function 函数名(){
函数体; (代码块)
}
2.注意：
javascript对大小写十分敏感，所以这里的function必须小写。在函数调用时，也必须按照函数的相同名称来调用函数
<script>
function demo() {
var a=10;
var b=10;
var sum =a+b;
alert(sum);
}
function tell() {
var n=10;
var m =10;
var vl = n*m
alert(vl)
}
tell()
</script>
十三、调用函数
1.函数调用：
函数在定义好之后，不能自动执行，需要进行调用
2.调用方式
（1）在<script>标签内调用
<script>
function demo() {
var a =10;
var b=20;
var sum=a+b;
alert(sum)
}
demo();//调用函数
</script>
（2）在HTML文件中调用
<form>
<input type="button" value="按钮" onclick="demo()">
</form>
十四、带参数的函数
1.函数参数
在函数的调用中，也可以传递值，这些值被称为参数
例：demo(arg1,arg2)
2.参数的个数可以为任意多，每个参数通过”,”隔开
3.注意：
参数在传递时，其顺序必须一致
4.参数意义
通过传递参数的个数以及参数的类型不同完成不同的功能
<body>
<script>
function demo(name,age) {
alert("Hello:"+name+",我的年龄是:"+age);
}
</script>
<button onclick="demo('iwen',20)">按钮</button>
</body>
十五、JavaScript的异常捕获
1.异常捕获
Try{
发生异常的代码块;
}catch(err){
错误信息处理;
}
<script>
function demo() {
try{
alert(str);
}catch(err){
alert(err)
}
}
demo()
</script>
2.Throw语句：创建一个自定义的错误
<script>
function demo() {
try {
var e = document.getElementById("txt").value;
if (e == ""){
throw "请输入";
}
}catch(err){
alert(err);
}
}
</script>
十六、DOM简介
（一）简介
1.DOM简介：当网页被加载时，浏览器会创建页面的文档对象模型
2.DOM操作HTML：
（1）JavaScript能够改变页面中所有的HTML元素
（2）JavaScript能够改变页面中所有HTML属性
（3）JavaScript能够改变页面中的所有CSS样式
（4）JavaScript能够对页面中的所有时间做出反应
（二）DOM操作HTML
1.改变HTML输出流90
注意：绝对不要在0文档加载完成之后使用document.write()。这会覆盖该文档
错误示范：
<body>
<p>Hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo() {
document.write("world");
}
</script>
</body>
2.寻找元素:
通过id找到HTML元素
通过标签名找到HTML元素
3.改变HTML内容
使用innerHTML（替换标签id所在标签内的内容）
<body>
<p id="pid">Hello</p>
<button onclick="demo()">按钮</button>
<script>
function demo() {
document.getElementById("pid").innerHTML("WS");//通过ID找到HTML元素
document.getElementsByTagName("p");//通过标签名找到HTML元素
}
</script>
</body>
4.改变HTML属性：
使用属性：attribute
<body>
<a id="aid" href="http://www.baidu.com">Hello</a>
<button onclick="demo()">按钮</button>
<script>
function demo() {
document.getElementById("aid").href="http://www.jikexueyuan.com" //改变了属性href的内容
}
</script>
</body>
（三）DOM操作CSS
1.通过DOM对象改变CSS
语法：document.getElementById(id).style.property=new style
<body>
<div class="div" id="div">
HELLO
</div>
<button onclick="demo()">按钮</button>
<script>
function demo() {
document.getElementById("div").style.background = "blue";//更改背景颜色
document.getElementById("div").style.color = "red";//更改文字颜色
}
</script>
</body>