总览：

• 基础语法

• 变量与运算符

• 对象与函数

• DOM

---

• 基础语法：

web中的三种语言，

HTML 定义了网页的内容；

CSS 描述了网页的布局；

JavaScript 网页的行为。

JavaScript 是互联网上最流行的脚本语言，用途广泛，不需要特殊软件，由浏览器执行，对大小写敏感，

• 三种注释：

//第一种
/*
第二种
*/
<script><!--第三种-->
</script>
//换行
document.write("hello \
world!");    √
document.write \
("hello world!");  X

• 语法

//输出文本
<h1>我的网页</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "你好 Dolly";
</script>//输出标题和段落
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<div id="myDIV">一个 DIV。</div>
<script>
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
</script>//

• 变量与运算符：

• 变量

JS中若未声明，复制变量将自动声明该变量，虽然JS并未强制必须提前声明变量，但为了良好的习惯也要声明

var name;
var age;
//或者
var name,age;
//
var name = "lalal",age = "18";
//良好变量习惯：驼峰法或下划线区分

• 数据类型：

JS是弱类型语言；以下在js中为合法

    var age = "ten";age = 10;//数值，浮点数，负数var num_1 = 2.33;var num_2 = -22;//布尔var num_3 = true
/*
5 种数据类型：
string
number
boolean
object
function3 种对象类型：
Object
Date
Array2 个不包含任何值的数据类型：
null
undefined    
*/
//查看数据类型typeof
typeof num_1 //返回 number
typeof num_3 //返回 boolean

• 数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//或
var cars=new Array("Saab","Volvo","BMW");

• 事件：

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

• 运算符：

加+减-乘*除/，取模&自增++自减–
比较运算符：=赋值；==等于；===绝对等于（数值和类型）；！=不等；！==不绝对等（值和类型有一个不相等，或两个都不相等）

字符串可以相加

    txt1="What a very";txt2="nice day";txt3=txt1+txt2;//txt3 = "What a very nice day"// ""和''都可以

• 循环：
  JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数

for (var i=0; i<5; i++)
{x=x + "该数字为 " + i + "<br>";
}

for/in - 循环遍历对象的属性

while - 当指定的条件为 true 时循环指定的代码块

do/while - 同样当指定的条件为 true 时循环指定的代码块

• 异常：

var txt="";
function message(){try {adddlert("Welcome guest!");}catch(err) {txt="本页有一个错误。\n\n";txt+="错误描述：" + err.message + "\n\n";txt+="点击确定继续。\n\n";alert(txt);}
}
//错误描述：adddlert is not defined
function myFunction() {var message, x;message = document.getElementById("message");message.innerHTML = "";x = document.getElementById("demo").value;try { if(x == "")  throw "值为空";if(isNaN(x)) throw "不是数字";x = Number(x);if(x < 5)    throw "太小";if(x > 10)   throw "太大";}catch(err) {message.innerHTML = "错误: " + err;}
}
//通过判断错误提示为自定义字符串

• 对象与函数：

• 函数：

function functionname()
{
执行代码
}
//带参
function myFunction(var1,var2)
{
代码
}
//带返回值
function myFunction()
{var x=5;return x;
}

• 对象：

对象也是一个变量，但对象可以包含多个值（多个变量）。

//类似python的字典
var car = {type:"Fiat", model:500, color:"white"};
//访问属性：
car.type;
//或
car["type"];
//对象方法
<p id="demo"></p>
<script>
//创建对象
var person = {firstName: "John",lastName : "Doe",id : 5566,//对象方法fullName : function() {return this.firstName + " " + this.lastName;}
};
//访问对象方法
document.getElementById("demo").innerHTML = person.fullName();
</script>
//函数作用域：局部变量在声明的函数外不可以访问

• DOM ：

  • D:文档

  • O:对象

  • M:模型

  • 节点的概念：

  • 5个常用的DOM方法：

getElementById,

getElementByTagName,

getElementByClassName,

getAttribute,

setAttribute