笔记：JS周报

总览：

• 基础语法

• 变量与运算符

• 对象与函数

• 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