JavaScript/JS的学习

JavaScript 简介

JavaScript 是一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有 JavaScript 的解析引擎 注：脚本语言不需要编译，直接就可以被浏览器解析执行了。

JavaScript 可以用来增强用户和 html 页面的交互过程，可以来控制 html 元素，让页面有一些动态的效果，增强用户的体验。

JavaScript 发展史

1.1992年， Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C-- ， 后来更名为：ScriptEase 2.1995年，Netscape(网景)公司，也开发了一门客户端脚本语言： LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript 3.1996年， 微软抄袭JavaScript开发出JScript语言 4.1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准： ECMAScript，就是统一了所有客户端脚本语言的编码方式。

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

ECMAScript 基本语法 与 HTML 结合方式

1.内部 JS 定义 标签，标签体内容就是 JS 代码

2.外部 JS 定义 标签，通过 src 属性引入外部的 JS 文件

注意： 1. 标签可以定义在 HTML 页面的任意地方，但是定义的位置会影响执行的顺序。 2. 标签可以定义多个

数据类型

1.基本数据类型 也叫原始数据类型。

1.1.number 数字 整数、小数、NaN

NaN，not a number，一个不是数字的数字类型。 NaN 和任何数运算得到的还是 NaN。

1.2.string 字符串 单引号和双引号都可以，“abc”，“a”，‘a’

1.3.boolean true or false

1.4.null 一个对象为空的占位符

1.5.undefined 未定义 如果一个变量没有给初始化值，则被默认赋值为 undefined

2.引用数据类型 对象

类型转换 非 number 转成 number

正号与负号会自动类型转换，即将非 number 的字面值自动转换成 number 类型的数值。

1.string ➜ number 按字面值转换，如果字面值不是数字，则转成 NaN。 例如：

var a = +"123"; // 正号（+）会让后面的字符串“123”自动转换成number类型，因为“123”的字面量是数字，所以会得到数字类型的值123

var b = +"abc"; // 字符串“abc”不是数字，所以会转成 NaN

2.boolean ➜ number true 转成 1，false 转成 0。

var f1 = +true; // 1
var f2 = +false; // 0

非 boolean 转成 boolean

1.number ➜ boolean number：0或NaN转成false，其它转成true。

例如：

var num = 2;
document.write(!num); // 数字2转成true，那么!true就是false

2.string ➜ boolean 空字符串转成 false，其它非空字符串转成 true。

3.null 和 undefined 转成 false

4.对象 ➜ boolean 所有对象都是 true。

特殊语法

1.语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略(不建议)

2.变量的定义使用 var 关键字，也可以不使用 用：定义的变量是 局部变量 不用：定义的变量是全局变量(不建议)

变量

变量：一小块存储数据的内存空间

Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。

弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：

var 变量名 = 初始化值;

运算符 双等号（==）

字符串的比较，是按字符的 askii 码，按位逐一比较，直到得出大小为止。

全等号（===）

全等号（===）在比较之前会先判断类型，如果类型不同直接返回 false。

document.write("123" == 123); // 字符串“123”先转换成number类型的123，结果返回true
document.write("123" === 123); // 全等号要求类型和数值都相同才会返回true，而这里类型不同则返回false

流程控制语句 switch…case

switch(被检测量){
case 常量1:
语句1;
break;
case 常量2:
语句2;
break;
...
deault:
语句N;
break;
}

1.在 Java 中，被检测量允许的数据类型：byte、short、int、char、枚举(1.5)、String(1.7)

2.在 JS 中，被检测量允许任何的原始数据类型。

while

var sum = 0;
var num = 1;
while (num 

    
    Title
    
        function checkForm() {
            // 返回true才会真正提交表单项的数据；返回false则不会提交
            return true;
        }
    





    姓名：
    年龄：
    

7.2.reset 重置按钮被点击，发生此事件。重置表单时发生此事件。

绑定事件（注册事件处理程序）

方式一： 直接在 HTML 标签上指定事件属性，属性值就是 JS 代码。 缺点：HTML 标签与事件属性、JS 代码耦合，不利于维护。

方式二： 通过 JS 获取元素对象，再对元素对象中事件属性赋值。 注意：JS 代码的执行必须在 HTML 标签加载后执行。所以 JS 代码需要写在 HTML 文档的最后面比较稳妥。

演示代码：

    
    DOM的演示代码






    // 绑定事件方式二
    // 1.先定义函数
    function fun() {
        tx1.src = "image/tx02.jpeg";
    }

    // 2.获取图像元素对象
    var tx1 = document.getElementById("tx1");
    // 3.注册点击事件处理程序
    tx1.onclick = fun;// 只能指定函数对象

	

HTML DOM

1.innerHTML 属性。

例如，给 id 值为 div1 的 div 元素内部添加一个输入框：

var div1 = document.getElementById("div1");
div1.onclick = function () {
	div1.innerHTML = "";
};

2.样式控制

2.1.使用元素对象的 style 属性来控制样式。

例如，将 id 值为 div1 的 div 元素的边框设置为 2px solid red：

var div1 = document.getElementById("div1");
div1.onclick = function () {
	div1.style.border = "2px solid blue";
};

2.2.先通过类选择器设置好样式，然后通过元素对象的 className 属性设置 class 属性的值，从而达到元素样式的控制。

例如：

DOCTYPE html>


    
    Title
    
        /*先通过类选择器设置好样式*/
        .d1 {
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
    



    div


    var div1 = document.getElementById("div1");
    div1.onclick = function () {
        // 设置元素的class属性值
        div1.className = "d1";
    };

BOM

BOM 是 Browse Object Model 的首字母缩写，译为浏览器对象模型。 将浏览器各个组件封装成对象。

Navigator

浏览器对象。

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

虽然这个对象的名称显而易见的是 Netscape 的 Navigator 浏览器，但其他实现了 JavaScript 的浏览器也支持这个对象。

Navigator 对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

Window 窗口对象

特点： 1.Window 对象不需要创建可以直接使用 window 引用：window.方法名();。

2.对象名称 window 可以省略，即 window 引用可以省略。

方法： 1.与弹出框有关的方法: 1.1.alert() 显示带有一段消息和一个确认按钮的警告框。 1.2.confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 1.2.1.如果用户点击确定按钮，则方法返回 true 1.2.2.如果用户点击取消按钮，则方法返回 false 1.3.prompt() 显示可提示用 户输入的对话框。 1.3.3.返回值：获取用户输入的值

2.与打开关闭有关的方法： 2.1.close() 关闭浏览器窗口。 谁调用我，我关谁

2.2.open() 打开一个新的浏览器窗口 返回新的Window对象

3.与定时器有关的方法 3.1.setTimeout() 定时任务 在指定的毫秒数后调用函数或计算表达式。 返回值是一个唯一的 ID 值。

示例代码：

// var t1 = setTimeout("fun();", 2000);
var t2 = setTimeout(fun, 2000);
function fun() {
	alert("boom~~");
}

3.2.clearTimeout() 取消任务 取消由 setTimeout() 方法设置的timeout。

示例代码：

var t2 = setTimeout(fun, 2000);
function fun() {
	alert("boom~~");
}
// 取消定时任务
clearTimeout(t2);

4.4.setInterval() 周期任务 按照指定的周期(以毫秒计)来调用函数或计算表达式。 返回值是一个唯一的 ID 值。

4.5.clearInterval() 取消周期任务 取消由 setInterval() 设置的 timeout。

Screen

显示器屏幕对象

History

历史记录对象

Location

地址栏对象。

1.获取 Location 对象

1.1.window.location 1.2.location

2.方法 2.1.reload() 重新加载当前文档

点击查看详情