JavaScript_01

1  JavaScript概述

1.1    JS概述

JS是一门基于对象和事件驱动的脚本语言, 主要应用在客户端

1.1.1   js特点

解释运行, 不需要编译

基于对象

弱类型

1.1.2   js优点

交互性

安全性

跨平台

1.1.3   js的历史

略

 

1.2    在html中结合js代码

1.2.1   直接在html中书写js代码

通过<script type="text/javascript"></script>标签, 在这个标签的内部可以书写js代码

1.2.2   引入外部的js文件

通过<script type="text/javascript"src="demo1.js"></script>来引入外部的js文件

注意: 这个标签不能够合并成自闭标签,否则会引入失败.

 

2  JavaScript语法

2.1    注释

单行注释：//js代码

多行注释：/* js代码 */

 

2.2    数据类型

2.2.1   基本数据类型

Ø  数值类型(number)

Ø  字符串类型(string)

Ø  布尔类型(boolean)

Ø  undefined类型

Ø  null类型

(1)  数值类型

js中的所有数值在底层都是浮点型, 但是在处理和显示的时候,js会自动的在整型和浮点型之间进行转换

特殊值:

Infinity -- 无穷大

-Infinity  -- 负无穷大

NaN -- 非数字 NaN和任何数值都不相等, 包括它本身. NaN和任何数值运算结果都是NaN,如果要判断一个数值是否是一个非数字, 不能用 xx == NaN进行判断, 可以用isNaN(xx)进行判断.

 

(2)  字符串类型

js中的字符串类型是一个基本数据类型, 字符串常量必须用单引号或双引号引起来

 

(3)  布尔类型

boolean, 值为true或false.

          

(4)  undefined

    undefined类型的值只有一个, 就是undefined. 表示变量未定义, 如果定义一个变量未初始化值, 那么该变量的值就是undefined.

 

(5)  null

null类型的值只有一个, 就是null. 表示空值, 即表示该处的值现在为空

作为函数的返回值, 表示该返回值是一个没有任何内容的空对象

 

u  js中的数据类型的转换

见/resource/数据类型转换.txt

2.2.2   复杂数据类型

复杂数据类型: 对象(普通对象 数组 函数)

2.3    变量的定义

js中有数据类型, 但是在js中变量不区分数据类型, 所以称js是一个弱类型的语言

在js中通过var关键字定义一个变量, 变量没有类型区分, 可以指向任意类型的值

2.4    运算符

JS中的运算符和Java中的大致相同

比较运算符: ==，!=，===，!==

其他运算符: typeOf, delete

 

2.5    语句

if条件语句

语法和Java中大致相同, 但是判断条件没有类型的限制

switch选择语句

语法和Java中大致相同, 并且也支持字符串类型

循环语句

while(){} do..while(){} for(){} 语法和Java中的很相似, 但是js中不支持增强for循环

 

2.6    函数

所谓函数就是一组整合在一起的具有功能的代码块, 可以反复调用

2.6.1   通过function关键字来定义一个函数

function 函数名(形参列表){

函数体

    }

    调用函数: 函数名(实参列表)

2.6.2   通过函数表达式来定义一个函数

var fn = function (形参列表){

函数体

}

    调用函数: 函数名(实参列表)

 

2.7    数组

2.7.1   通过Array()构造函数来创建数组

var arr1 = newArray(1, 3, 5, "abc", true, new Object()); //创建指定初始值的数组

 

2.7.2   通过数组直接量来创建数组

var arr2 = [1,3, 5, "abc", true, new Object()]; //创建指定初始值的数组

          

js中的数组的长度是可以被任意改变的

如果数组中某一位置没有赋值, 那么该处的值为undefined

js中的数组的内容可以是不同类型的

js中的数组就是用[]括起来并用逗号分割开的一组内容, 本质上就是一段字符串.

 

2.8    js中的内置对象

RegExp对象

创建正则对象的两种方式

var reg1 = new RegExp("", "");

var reg2 = /xxx/;

String对象

根据自己的情况选择性练习

var str1 = new String("xxx");

var str2 = "xxx";

             

Array对象

根据自己的情况选择性练习

var arr1 = new Array();

var arr2 = [];

Date对象

Date对象创建三种方式

var d1 = new Date()

var d2 = new Date(1000)

var d3 = new Date(2017, 3,1);

 

常用方法: getFullYear()、getMonth()、getDate()、getTimes()

Math对象

根据自己的情况选择性练习

常用方法: random()

Global对象

调用global对象上的属性或方法时, 可以省略global.

常用方法: eval()、parseInt()、parseFloat()

 

2.9    自定义对象

方式一:

function Person(name, age){}

this.name = name;

this.age = age;

this.run = function(){

        alert(this.name+" : "+this.age);

    }

}

var p = new Person(“zhangsan”, 18); 

alert(p.name);

p.run();

 

方式二:

var p = {

    name:"wangwu",

    gender:"nan",

    run:function(){

       alert(this.name+"~"+this.gender+"~running...")

    }

}

alert(p.name);

p.run();

3  DHTML

3.1    DHTML概述 

DHTML：Dynamic HTML 即动态的HTML。所谓的动态HTML，其实并不是一门新的语言，它只是将现有的HTML、css、JavaScript进行了整合，实现了利用js动态的操作HTML元素或CSS属性。

在DHTML中，是将html文档中所有的元素都用js对象来进行表示, 用对象来表示元素, 用对象之间的引用关系来表示元素之间的层级关系

用一颗文档结构树来表示整个html文档

 

对象上可以设计属性和方法, 可以通过操作对象上的属性和方法来改变元素的属性和行为

 

利用这种方式, 将js和html/css整合在一起, 形成了DHTML技术.

 

DHTML可以被分为BOM和DOM两部分内容:

BOM: Browser Object Model 浏览器对象模型

DOM: Document Object Model   文档对象模型

 

3.2    BOM

3.2.1   window对象

window 对象：代表浏览器一个打开的窗口，window对象上提供的常用方法、及子对象有：

alert 方法，消息对话框

confirm 方法，显示一个确认对话框，其中包含一个可选的消息和确定、取消按钮。

close 方法，关闭当前浏览器窗口

location 子对象，包含当前浏览器地址栏url信息

document 子对象，代表浏览器窗口中包含的HTML文档

3.3    DOM

3.3.1   获取HTML文档中的元素

DOM中提供了如下方法来获取HTML元素：

document.getElementById方法，通过id来获取指定元素

document.getElementsByName方法，通过name来获取指定元素组成的集合数组

getElementsByTagName方法，通过标签名来获取指定元素组成的集合数组

   

3.3.2   增删改HTML文档中的元素

DHTML中提供了如下方法来操作HTML元素：

document.createElement()-- 创建节点

appendChild()-- 添加子节点

insertBefore()-- 插入节点

removeChild() --删除子节点

replaceChild()-- 替换子节点

parentNode属性 -- 获取父节点

3.3.3   属性及事件

常用属性：

value 属性，获取或设置输入控件的value属性的值

innerHTML 属性，获取或设置元素内部的html内容

注意：IE10以下的浏览器中, 不支持Select和table上的innerHTML属性

innerText  属性，获取或设置元素内部的文本内容。

注意:部分浏览器不支持该属性

document.body 属性，获取html文档中的body元素

className 属性，设置或获取对象的类（class属性）。

display 属性，设置或获取对象是否以及如何显示。

checked 属性，设置或获取复选框或单选钮的状态

 

常用事件：

onblur 事件，当元素对象失去输入焦点时触发

onfocus 事件，当元素对象获得输入焦点时触发

onload  事件，在整个HTML页面加载完成后触发

onclick 事件，当元素对象被点击时触发

onchange 事件，当select下拉选框选项切换时触发

3.4    DOM编程练习

略