JavaScript基础

JavaScript

JavaScript由于历史的演变，其内容包括：

ECMAScript：所有客户端语言的标准（比如SQL）
JavaScript：自己特有的东西，包括：
- BOM浏览器对象模型，如弹窗、窗口缩放等
- DOM文档对象模型，控制页面显示的内容

JavaScript是弱类型语言，定义变量不需要指定类型，如var a = "123";

ECMAScript

基本语法：基本类型、运算、流程控制语句。（和java很像）

基本对象：除了基本类型，其余都是对象，如：

函数对象：var fun1 = function(){...}
数组对象：var arr = [1, 2, "hello"];
正则化
其他常用：int a = parseInt(str);字符串转数字

基本语法

与html结合方式
- 内部结合：任意位置<script>alert("hello world");</script>
- 外部结合：<script src="js/a.js"></script>
注释
- 单行 //
- 多行 /* */
数据类型
- 原始数据类型（基本数据类型）
  - number：数字（整数、小时、NaN）
  - string：字符串，单引号双引号都可以
  - boolean：true和false
  - null：一个对象为空的占位符
  - undefined：如果一个变量未初始化，默认为undefined类型
- 引用数据类型（对象）
变量
- js是如类型型语言，定义为：var a = 12; alert(a);
运算符
- 一元运算符：++，--，+(正号，数据类型转换string转int)，-(负号)
- 算数运算符：+ - * / %
- 复制运算符：=, +=, -=
- 比较运算符：>, <, >=, <=, ==（先转化成相同类型）, ===(全等于，先比较类型，再比较值)
- 逻辑运算符：&&, ||, !
- 三元运算符：？:

流程控制语句

<script>
var a = 1;
switch(a){
    case 1: alert("number"); break;
    case "abc": alert("string"); break;
    case undefines: alert("undefined"); break;
}

var b = 1;
while(b<=100){b++;}
document.write(b + "<br>");

for(var i=1; i<=100; i++){b++;}
document.write(b);
</script>

基本对象

在js里面方法（函数）也是对象。

Function对象：

// 方法1
function add(a, b) {
    return a+b;
}
var a = add(1, 2);
document.write(a);

// 方法2
function addAll(){
    var sum = 0;
    for (var i=0; i< arguments.length; i++){
        sum += arguments[i];
    }
    return sum;
}
document.write(addAll(1, 2, 3, 4));

Array：（数组中类型可变，数组长度可变）

var arr = [1, 2, 3];
var arr2 = new Array([1, "abc", true]);
var arr3 = new Array(10); // 长度
document.write(arr3.length + "<br>");
document.write(arr3.join() + "<br>"); // 拼接成字符串

Date：

var date = new Date();
document.write(date.toLocaleString()); // 和当前电脑格式一致

RegExp正则表达式:

单个字符
- [ab] a或者b
- [a-zA-Z] a-Z其中一个字符
- d 单个数字
- w 单个字母
量词
- ? 0次或1次
- * 0次或多次
- + 1次或多次
- {m,n} m,n次
开始结束：^$

// var reg = new RegExp("^\w{6,12}$");
var reg = /^w{6,12}$/;
var username = "zhangsan";
var flag = reg.test(username);
document.write(flag);

Global：全局对象，Global封装的方法不需要创建就可以直接调用

// encodeURI编码：将字符编码成16进制
var str = "百度知道";
var url = encodeURI(str);
document.write(url + "<br>");
var s = decodeURI(url) + "<br>";
document.write(s);

// encodeURIComponent：可以编码更多的字符，比如（/ ?等）
var str = "百度知道";
var url = encodeURIComponent(str);
document.write(url + "<br>");
var s = decodeURIComponent(url) + "<br>";
document.write(s);

// parseInt(): 字符串转数字
var str = "123sa456";
document.write(parseInt(str) + "<br>");  // 输出123 

// eval(): 将js字符串转成脚本执行
var jscode = "alert(123)";
eval(jscode);

其他：Math/Boolean/Number/String等等

BOM

浏览器对象模型，包括：

Window窗口对象
Location地址栏对象：window.location
History历史记录对象：window.history
Navigator浏览器对象（浏览器版本等，不学）
Screeen显示器屏幕对象（显示器大小型号等，不学）

Window

不用创建，省略window，直接使用，如：window.alert("hello");

常用方法有3类：

与弹出框有关的方法：alert()警告 confirm()确认 prompt()输入

var flag = confirm("确认删除？");
if (!flag) {
    alert("已删除");
}

var str = prompt("请输入字符串");
alert(str);

与打开关闭有关的方法：open() close()

var newWin = open("http://www.baidu.com");
newWin.close();

与定时器有关的方法：setTimeout() clearTimeout() setInterval() clearInterval

function fun1() {
    alert("倒计时结束");
}
// 一次性定时器
var id1 = setTimeout(fun1, 2000);
clearTimeout(id1);
// 循环定时器
setInterval(fun1, 2000);

Location

地址栏对象：

常用方法有：重新加载页面location.reload();
常用属性有：网站地址：location.href("http://www.baidu.com");

DOM

文档对象模型：将标记语言各个部分封装成对象，使用这些对象，对文档进行增删改查。

W3C DOM标准被分成三个不同的部分：

核心 DOM：针对标记语言的标准模型
- Document文档对象
- Element元素对象
- Attribute属性对象
- Text文本对象
- Comment注释对象
- Node节点对象（上面几个的父对象）
XML DOM：针对XML文档的标准模型
HTML DOM：针对HTML文档的标准模型

Document

获取元素：var btn = document.getElementById("btn");

获取元素的值：var age = document.getElementById("age").value;

创建元素：var table = document.createElement("table");

Node

节点对象可以是元素、属性、文本等。

常用增删改查方法：(获取父元素，对子元素增删改查)

appendChild()
removeChild()
replaceChild()

常用属性：

parentNode：获取父节点

HTML DOM

HTML DOM：针对HTML文档的标准模型，主要有：

标签体的设置和获取：div1.innerHTML("Hello <br>")
使用html元素对象的属性：img.src="aaa.jpg";
控制样式：
- div1.style.border = "1px solid red;"
- div1.className = 'd1'; 赋值一个定义好的CSS样式

Event 事件

Event属于HTML DOM。

概念：某些组件的执行，触发了某些代码的执行。

简单使用：（赋值一个方法）

// 执行代码没有参数
document.getElementById("btn").onclick = function () {
    alert("hello");
}
// 执行代码有事件参数
document.getElementById("name").onkeydown = function (event) {
    alert(event.keyCode);
}

常见事件：

点击：
- onclick
- ondbclick
焦点：
- onblur失去焦点：常用于表单校验
- onfocus获得焦点
加载：onload window.onload = function(){...}
鼠标事件
- onmousedown鼠标按下
- onmouseup松开
- onmousemove移动
- onmouseover覆盖
- onmouseout移开
键盘事件
- onkeydown键盘按下
- onkeyup松开
- onkeypress按下并松开
选中和改变
- onchange域的内容发生改变
- onselect文本被选中
表单事件
- onsubmit提交表单（可以阻止表单提交）
- onreset重置

案例

轮播

知识点：

BOM中setInterval()设置倒计时。
DOM中getElementById()获取元素，并修改属性。

var i = 0;
var imgs = ["img/banner_1.jpg", "img/banner_2.jpg"];
function fun1() {
	var cur = document.getElementById("banner");
	if(i==1){ i=0; }else{ i=1; }
	cur.src = imgs[i];
}
setInterval(fun1, 3000);

跳转到首页

知识点：

BOM中setInterval()设置倒计时
BOM中location地址栏
BOM中getElementById()获取元素，并修改内容。

<span id="time" style="color: red;">5</span>秒后，自动跳转...
<script>
    var i = 5;
    function fun1() {
        i -= 1;
        var cur = document.getElementById("time");
        cur.innerText = i;
        if (i==0){
            location.href = "http://www.baidu.com";
        }
    }
    window.setInterval(fun1, 1000);
</script>

动态表格

事件
HTML DOM控制样式

<div align="center"><table border="1">
    <caption>学生信息</caption>
    <tr>
        <th><input type="checkbox" name="cbox" id="firstCbox"></th>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Option</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="cbox"></td>
        <td>1</td>
        <td>张三</td>
        <td>18</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cbox"></td>
        <td>2</td>
        <td>李四</td>
        <td>20</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
</table></div>
<script>
    document.getElementById("firstCbox").onclick = function () {
        var cboxs = document.getElementsByName("cbox");
        for (var i=0; i<cboxs.length; i++){
            cboxs[i].checked = this.checked;
        }
    }
    var trs = document.getElementsByTagName("tr");
    for (var i=0; i<trs.length; i++){
        trs[i].onmouseover = function () {
            this.style.backgroundColor = "pink";
        }
        trs[i].onmouseout = function () {
            this.style.backgroundColor = "white";
        }
    }
</script>