总览：
-
基础语法
-
变量与运算符
-
对象与函数
-
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
function
3 种对象类型：
Object
Date
Array
2 个不包含任何值的数据类型：
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 时循环指定的代码块
- 异常：
- try 语句测试代码块的错误。
- catch 语句处理错误。
- throw 语句创建自定义错误。
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;
}
-
生命周期：
- JavaScript 变量的生命期从它们被声明的时间开始。
- 局部变量会在函数运行以后被删除。
- 全局变量会在页面关闭后被删除。
<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
- 对象：
对象也是一个变量，但对象可以包含多个值（多个变量）。
//类似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
网友评论