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);字符串转数字

基本语法

1. 与html结合方式

   • 内部结合：任意位置<script>alert("hello world");</script>
   • 外部结合：<script src="js/a.js"></script>

2. 注释

   • 单行 //
   • 多行 /* */

3. 数据类型

   • 原始数据类型（基本数据类型）
     • number：数字（整数、小时、NaN）
     • string：字符串，单引号双引号都可以
     • boolean：true和false
     • null：一个对象为空的占位符
     • undefined：如果一个变量未初始化，默认为undefined类型
   • 引用数据类型（对象）

4. 变量

   • js是如类型型语言，定义为：var a = 12; alert(a);

5. 运算符

   • 一元运算符：++，--，+(正号，数据类型转换string转int)，-(负号)
   • 算数运算符：+ - * / %
   • 复制运算符：=, +=, -=
   • 比较运算符：>, <, >=, <=, ==（先转化成相同类型）, ===(全等于，先比较类型，再比较值)
   • 逻辑运算符：&&, ||, !
   • 三元运算符：？:

6. 流程控制语句

   <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正则表达式:

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

// 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

浏览器对象模型，包括：

1. Window窗口对象
2. Location地址栏对象：window.location
3. History历史记录对象：window.history
4. Navigator浏览器对象（浏览器版本等，不学）
5. 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

地址栏对象：

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

DOM

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

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

1. 核心 DOM：针对标记语言的标准模型

   • Document文档对象
   • Element元素对象
   • Attribute属性对象
   • Text文本对象
   • Comment注释对象
   • Node节点对象（上面几个的父对象）

2. XML DOM：针对XML文档的标准模型

3. 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);
}

常见事件：

1. 点击：
   • onclick
   • ondbclick
2. 焦点：
   • onblur失去焦点：常用于表单校验
   • onfocus获得焦点
3. 加载：onload window.onload = function(){...}
4. 鼠标事件
   • onmousedown鼠标按下
   • onmouseup松开
   • onmousemove移动
   • onmouseover覆盖
   • onmouseout移开
5. 键盘事件
   • onkeydown键盘按下
   • onkeyup松开
   • onkeypress按下并松开
6. 选中和改变
   • onchange域的内容发生改变
   • onselect文本被选中
7. 表单事件
   • 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>