JavaScript笔记

Posted on 2018-10-03 Edited on 2022-04-24 In external

JavaScript简介

JavaScript是一个简单又多用途的语言,像python一样是脚本语言,不过js更多被用于网络中
一个基本的形象是:

HTML定义了网页的内容
CSS定义了网页的布局
JavaScript定义了网页的行为

可以说js的一个重要的用途即为编辑html页面元素
当然还有其他许多的用途

与Java有根本区别

不是同一人设计
不是同一概念
js的官方名称为ECMA-262

HelloWorld

这里写的都是用在html中的,实际上不够全面

插入到html文件中

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

或者使用函数如下

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

在html文件外定义

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script src="myScript.js"></script>
</body>
</html>

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

js输出的几种方式

弹窗

使用 windows.alert()

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

网页显示

操作DOM元素

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

控制台显示

使用 console.log()

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

语法

字面量(固定值)

数字
- 1001(整数)
- 3.14(小数)
- 123e5(科学计数法)

字符串

“John dorge”
‘John dorge’

支持下标访问
var character = name[0];

可以使用转义字符 \
var x='It\‘s alright’;

使用length属性获取长度

字符串有许多方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

表达式

5+6
5*10
等等
数组

[40,100,1,5,25,1.3]
对象

也就是json

{firstName:“John”, lastName:“dorge” ,age:50, eyeColor:“bule”}

寻址使用
- person[“age”]
- person.age
对象中可以包含函数
- 使用之前的函数字面量定义
- 访问时只能使用 .
函数

function myFunction(a, b) {return a*b;}

注释

// this is a comment
/* this
will
be comment
out
*/

变量

1 2	var x,length; x=5;

数据类型概念

数据类型
- string
- number
- boolean
- object
- function
对象类型
- Object
- Date
- Array
特殊类型
- null
- undefined

不严格,但不同类型一般不能计算

可以强制声明

var name = new String;
var x = new Number;
var y = new Boolean;
var cars = new Array;
var person = new Object;

但这样产生的是对象.

var x = "John";
var y = new String("John");
typeof x // 返回 string
typeof y // 返回 Object

String对象拖慢运行速度,还有其他副作用

var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象
// === 为绝对相等，即数据类型与值都必须相等

同其他语言一样有变量的作用域,生命周期
可以使用typeof查看变量类型

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

不赋值的变量值为 Undefined
与赋值为 null 不同
null和undefined值相等,类型不同

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

类型转换

到字符串

全局方法:使用String()

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回
String(false)        // 返回 "false"
String(true)         // 返回 "true"
String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

其他类的toString方法

x.toString()
(123).toString()
(100 + 23).toString()
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"
obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

其他的格式化方法

方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

到数字

全局方法:Number()

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN
Number(false)     // 返回 0
Number(true)      // 返回 1
d = new Date();
Number(d)          // 返回 1404568027739

冷门方法:+运算符

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字(5)
var y = "John";   // y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)

其他格式化方法

方法描述

parseFloat() 解析一个字符串，并返回一个浮点数。

parseInt() 解析一个字符串，并返回一个整数。

getTime() 返回1404568027739

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。
getTime()	返回1404568027739

自动类型转换

使用 + 时"低级到高级"

1
2
3

5 + null    // 返回 5         boolean -> number
"5" + null  // 返回"5null"    boolean -> string
"5" + 1     // 返回 "51"      number  -> string

使用 - 时尽量使string变为number

1	"5" - 1 // 返回 4 string -> number

使用 = 时string与number自动转化

var x = 10;
var y = "10";
if (x == y)  //true
if (x === y) //false , switch就使用的是后者,更加保险

输出一个变量时,自动调用toString()

myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
myVar = 123             // toString 转换为 "123"
myVar = true            // toString 转换为 "true"
myVar = false           // toString 转换为 "false"

document.getElementById("demo").innerHTML = myVar;

运算符

算术
- - * / % ++ –
赋值
1
= += -= *= /= %=
字符串
不过数字与字符相加时优先将数字转化为字符
1
2
3
x=5+5; // 10
y="5"+5; // 55
z="Hello"+5; // Hello5
比较
1
== === != !== > < >= <=
逻辑

&& || !
条件

condition ? yesvalue : novalue

if语句

if
if…else
if…else if…else
switch

if (time<20)
{
    x="Good day";
}

if (time<20)
{
    x="Good day";
}
else
{
    x="Good evening";
}

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

var d=new Date().getDay();
switch (d)
{
  case 0:x="今天是星期日";
  break;
  case 1:x="今天是星期一";
  break;
  case 2:x="今天是星期二";
  break;
  case 3:x="今天是星期三";
  break;
  case 4:x="今天是星期四";
  break;
  case 5:x="今天是星期五";
  break;
  case 6:x="今天是星期六";
  break;
}

循环语句

for
for/in
while
do/while

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

特殊而不推荐的一些用法

var i=2,len=cars.length;
for (; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

var i=0,len=cars.length;
for (; i<len; )
{ 
    document.write(cars[i] + "<br>");
    i++;
}

var person={fname:"John",lname:"Doe",age:25}; 

for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

break, continue

同其他语言
不过break可以用于跳出带有标签的代码块
例子中跳出了名为list的代码块

cars=["BMW","Volvo","Saab","Ford"];
list:
{
    document.write(cars[0] + "<br>");
    document.write(cars[1] + "<br>");
    document.write(cars[2] + "<br>");
    break list;
    document.write(cars[3] + "<br>");
    document.write(cars[4] + "<br>");
    document.write(cars[5] + "<br>");
}

函数

声明

1
2
3

function myFunction(a, b) {
    return a * b;
}

作为变量使用

1 2	var x = function (a, b) {return a * b}; var z = x(4, 3);

使用函数生产函数

var myFunction = new Function("a", "b", "return a * b");
// 或者
var myFunction = function (a, b) {return a * b};
// 像变量一样使用
var x = myFunction(4, 3);

甚至还可以作为使用toString()方法

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

参数

参数定义

像python一样没有数据类型检查

1
2
3

function myFunction(x, y) {
    // ...statement
}

默认参数

主要是由于没有数量检查,需要手工定义默认参数

function myFunction(x, y) {
    // 若调用时不提供y的值则y被设为undefined
    if (y === undefined) {
        y = 0;
    } 
}

还有简便方法如下

1
2
3

function myFunction(x, y) {
    y = y || 0;
}

arguments对象

即为参数的列表

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

按值传递

使用一般变量作为参数时
按对象传递

使用对象作为参数时

调用

函数的调用正常,不过需要注意this关键字的用法:
返回调用函数的对象

在html中window对象是默认的全局对象
这里返回window对象

function myFunction() {
    return this;
}
myFunction();

若函数有隶属的对象,则返回的是该对象(同java等)

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)
myObject.fullName();         // 返回 "John Doe" 此处更容易理解

也可以作为普通对象使用

function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

还有一个预定义的call方法可以使用

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

值得注意的是使用apply时,参数在形式上满足即可

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

闭包
1. 来源
  - 想使用计数器功能
  - 不得不将计数器放在全局变量中
  - 又害怕其他方法改变计数器的值(希望只使用add方法增加计数器的值)
  - 可以利用函数的嵌套,将计数器放在函数中,add功能嵌套在函数内
  - 可是外部不能访问嵌套在函数中的函数,就利用函数自我调用的特性
    这就叫闭包
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  var add = (function () {
  var counter = 0;
  return function () {return counter += 1;}
  })();
  
  add();
  add();
  add();
  
  // 计数器为 3
  计数器受匿名函数作用域保护,只能通过add方法修改

异常

基础语法try…catch
没有错误类型太好了

var txt="";
function message()
{
    try {
    adddlert("Welcome guest!");
} catch(err) {
    txt="本页有一个错误。\n\n";
    txt+="错误描述：" + err.message + "\n\n";
    txt+="点击确定继续。\n\n";
    alert(txt);
    }
}

基础语法throw
无需自定义错误类型挺方便

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;
    }
}

void

javascript:void(0) 常常出现,因此说明一下
即表示什么也没有

1	<a href="javascript:void(0)">单击此处什么也不会发生</a>

点击仅仅会有警告而不会跳转

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
</body>

返回undefined

<head>
<script type="text/javascript">
<!--
function getValue(){
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>

其他

使用unicode字符集
大小写敏感
需要分号(return例外)
忽略空格,变量的声明忽略换行
折行使用 \

备注

浮点数精度不够

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.3
if (z == 0.3)            // 返回 false

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

对象没有length方法

代码规范

命名规则(变量小驼峰,常量大写)
空白字符
大括号的位置
文件名建议统一小写

调试

写console

a = 5;
b = 6;
c = a + b;
console.log(c);

设置断点

调试工具就是浏览器

debugger关键字

可以停止执行并调用调试函数,与设置断点是同样的效果

1
2
3

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

变量提升

JavaScript的解释器会将变量的声明提升到头部,因此变量的证明可以放在任何地方,即使是在赋值语句后

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

与

var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

结果相同

不过对于声明与初始化结合在一起的无能为力

var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

与

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

结果不同

还需要注意的是在函数内部使用的变量,提升后会变为全局变量

严格模式

由于有变量提升,其实不利于程序员习惯的养成
也为了有利于排除一些可能出现的错误
用严格模式禁止变量提升等自动化的步骤

1 2	"use strict"; x = 3.14; // 报错 (x 未定义)

严格模式还可以局部使用

x = 3.14;       // 不报错 
myFunction();

function myFunction() {
    "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

严格模式的限制,不允许:

未声明先使用
删除变量或对象或函数(delete x;报错)
变量重名(function x(a,a){})
使用转义字符(var x=\010;)
对只读属性赋值
对使用getter方法获取的属性赋值
删除不允许删除的属性
变量名中使用eval,arguments等关键字
不能使用eval创建变量( eval("var x = 2") 报错)
使用this指向全局对象

function f(){
    return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是false

function f(){ 
    "use strict";
    return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

严格模式的其他变化

增加了新的关键字
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield

更像java了,或者,向非脚本语言靠拢

js的事件

事件类型

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件的使用方法

1	<button onclick="displayDate()">现在的时间是?</button>

正则表达式

正则表达式的定义

1	var patt = /runoob/i

其中runoob是主体
i是参数

主体的写法

[abc] [0-9] (x|y) \s \uxxxx n+ n* n? 等
修饰符

修饰符描述

i 执行对大小写不敏感的匹配。

g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m 执行多行匹配。

正则表达式的使用

被使用
- search
- replace
主动使用
- test(检测字符串是否含有)
- exec(数组形式给出匹配的结果)

1 2	var str = "Visit Runoob!"; var n = str.search(/Runoob/i); // 6

1 2	var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob"); // microsoft替换为Runoob

1	/e/.test("The best things in life are free!") // true

1	/e/.exec("The best things in life are free!"); // e

表单与验证

js常常用于表单的验证,比如
对于一个表单
注意这里调用验证方法的例子 onsubmit="return validateForm()" 其实有点奇怪

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

使用以下代码验证

function validateForm() {
    // 先获取表单数据
    var x = document.forms["myForm"]["fname"].value;
    // 再验证
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

也可以通过html自己的自动验证来实现一些验证,不过这里略过

不过js也可以结合自动验证一起运行

比如直接使用自动验证的结果
这里使用了inpObj的 chaeckValidity() 方法与 validationMessage 属性

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>

<p id="demo"></p>

<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>

也可以利用结果进行自定义
这里使用了 validity 属性的子属性

<input id="id1" type="number" min="100" required>
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    var inpObj = document.getElementById("id1");
    if(!isNumeric(inpObj.value)) {
        txt = "你输入的不是数字";
    } else if (inpObj.validity.rangeUnderflow) {
        txt = "输入的值太小了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}

// 判断输入是否为数字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

可以使用的子属性如下

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

JSON

全称 JavaScript Object Notation
早期用于数据交换,特点是轻量级,易于理解
- 比xml
  - 短
  - 不需要结束符号
  - 可以使用数组
  - 没有保留字
是一个独立的语言

举例

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

与javascript的对象在语法上相同
但通常由存储的地方取出来的时候是string格式,
在js中使用时需要先转换

// 假设先有了json字符串
// 或者先创建一个
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

// 然后可以转换
var obj = JSON.parse(text);
// 然后可以使用
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

当然也可以反向转换

1
2
3

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

DOM

Document Object Model

Document
- root element <html>
  - element <head>
    - element <title>
      - text
  - element <body>
    - element <a>
      - text
      - attribute
    - element <h1>
      - text

js改变html

js的html元素寻址

通过id

var element=document.getElementById("header");

通过标签名
1
var y=x.getElementsByTagName("p");

通过类名

1	var x=document.getElementsByClassName("intro");

属性寻址

<p>这种标签,没有text属性,使用 innerHTML 修改

1	document.getElementById("p1").innerHTML="新文本!";

有属性的,使用属性名修改

1	document.getElementById("image").src="landscape.jpg";

编辑元素节点

添加到结尾

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");
<!-- 文本也是节点 -->
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

插入节点到指定位置之前

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p2");
element.insertBefore(para, child);
</script>

<!--
这是一个段落。
这是一个新的段落。
这是另外一个段落。
-->

移除节点

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

替换节点

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

js改变css

使用的是 style.attr

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

</body>
</html>

js控制html元素的事件

利用html内容
onclick等等

1	<h1 onclick="myFunction()">点击文本!</h1>

自己创造内容(js更加独立)

1	document.getElementById("myBtn").onclick=myFunction();

使用监听器(js更加独立,控制事件更简单)
事件类型不使用 on 前缀
函数这里只接受无参数函数名,想要带参数的函数时需要用匿名函数包装
最后是一个可选参数,是否需要捕获
可以添加同一个事件的多个响应而不冲突
另外也可用 removeEventListener 方法移除事件监听
1
document.getElementById("myBtn").addEventListener("click", myFunction, useCapture);

事件的捕获与冒泡

<p>放在<div>中被点击
- 冒泡则内部先触发
- 捕获则外部先触发

HTMLCOllection对象

getElementsByTagName()等方法返回的就是HTMLCollection对象
就像是一个数组
但不是数组(没有valueOf,pop,push,join等方法)

var x = document.getElementsByTagName("p");

// 可以使用下标访问
y = x[0];
// 也可是使用name或id访问
// ...
// 可以使用length属性
document.getElementById("demo").innerHTML = x.length;

NodeList对象

类似HTMLCollection对象
只有NodeListener对象才包含属性节点和文本节点
旧版本浏览器的getElementsByClassName等返回的是NodeList对象,
目前浏览器的childNodes返回的是NodeList对象

var myNodeList = document.querySelectorAll("p");

// 只可以通过下标访问
y = myNodeList[0];

// 可以查看长度
document.getElementById("demo").innerHTML = myNodelist.length;

对象详解

对象简介

js中所有事物都是对象(与python相同)
对象就有属性与方法(好多是内建的比如length属性,toString()方法)

对象创建

直接创建

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

或者简便的写法

1	person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用构造器创建,注意不是使用类来创建

// 先定义构造器
function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

// 再使用构造器大量创建
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

为对象添加属性与方法

使用 . 寻址,并用赋值方式添加即可

js的类

js不使用类,尽管js是面向对象的
js基于 prototype

Number对象

精度
- 所有数字均为64位浮点格式,52位为值,11位为指数,1位为符号
- 整数15位不失真
- 小数17位,浮点运算常常不准确
进制
- 0打头表示8进制
- 0x打头表示16进制
- 使用toString(16)等进行进制转换
无穷大处理
- Infinity和-Infinity,除以0就是该结果
非数字处理
- NaN(比如1000/“apple”)
属性
- MAX~VALUE~
- MIN~VALUE~
- NEGATIVE~INFINITY~
- POSITIVE~INFINITY~
- NaN
- prototype
- constructor
方法
- toExponential()
- toFixed()
- toPrecision()
- toString()
- valueOf()

String对象

普通的略过

可以在引号中使用其他引号

1 2	var answer="He is called 'Johnny'"; var answer='He is called "Johnny"';

属性
- length
- prototype
- constructor
方法
- charAt()
- charCodeAt()
- concat()
- fromCharCode()
- indexOf()
- lastIndexOf()
- match()
- replace()
- search()
- slice()
- split(“,”)
- substr()
- substring()
- toLowerCase()
- toUpperCase()
- valueOf()

Date对象

初始化

new Date();            // 使用当前时间初始化
new Date(millisecends); // 给定一个时间用于初始化
new Date(string);      // 使用一个特定格式的字符串初始化,给定的信息不全时以0为默认值
new Date(year,month,day,hours,minutes,seconds,milliseconds) // 给定一堆参数初始化,给定的信息不全时以0为默认值

获取需要的信息

var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();           // 月份从0开始...
var day = d.getDate();
var weekday = weekdays[d.getDay()]; // 0表示周日
var milliseconds = d.getTime();     // 1970年1月1号至今的毫秒数
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var timeString = d.toUTCString();   // UTC时间的字符串

编辑
setFullYear(2010,0,14) // 2010.1.14
各种set

比较

var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
    alert("今天是2100年1月14日之前");
}
else
{
    alert("今天是2100年1月14日之后");
}

Array对象

创建

常规

var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";

简洁

1	var myCars=new Array("Saab","Volvo","BMW");

字面
1
var myCars=["Saab","Volvo","BMW"];

属性
- length
方法
- indexOf()
- concat()
- join()
- pop()
- shift()
- unshift()
- push()
- reverse()
- slice()
- sort()
- splice()
- toString()

Boolean对象

创建
1
var myBoolean=new Boolean();
判断
当boolean对象值为以下时视为false
- 0
- -0
- null
- “”
- undefined
- NaN
其他情况下为true

Math对象

更像是一个namespace

常量
- Math.E
- Math.PI
- Math.SQRT2
- Math.SQRT1~2~
- Math.LN2
- Math.LN10
- Math.LOG2E
- Math.LOG10E
方法
- Math.round(4.7) // 5
- Math.random() // 0~1
- Math.floor()
- Math.sqrt(16) // 4

RegExp对象

初始化
以下两者等效

1 2	var re = new RegExp("\\w+"); var re = /\w+/;

BOM

Browser Object Model
还没有正式标准
但已经在使用中

window对象

简介
表示浏览器窗口,比如
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
1
2
window.document.getElementById("header");
document.getElementById("header"); // 等效

获取window属性
之所以这样写,是因为不同的浏览器支持不同

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

window的方法
- window.open() // 打开新窗口
- window.close()
- window.moveTo()
- window.resizeTo()

screen

简介
关于用户屏幕的信息
属性
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度

location

简介
关于当前网址
属性
- location.href - 当前的url
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口（80 或 443）
- location.protocol 返回所使用的 web 协议（http 或 https）
方法
- location.assign(“http://www.w3cschool.cc”) 用于重定向

history

简介
包含浏览器历史
方法
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同

Navigator

简介
包含有关访问者浏览器的信息

使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

</body>
</html>

注意
- 一般不准(浏览器会自行更改该信息)
- 使用浏览器不能造假的信息识别浏览器
  比如只有 Opera 支持属性 “window.opera”，可以据此识别出 Opera
  代码写: if (window.opera) {...some action...}

简介
键值对

创建

简单的
1
document.cookie="username=John Doe";

过期时间

1	document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

路径

1	document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

读取
1
var x = document.cookie;

修改
键相同时才覆盖,不同时还是新建

1	document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

删除
通过软方法删除

1	document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

弹窗

alert(“alert message”)
r=confirm(“can I?”)
name=prompt(“input your name”,“default name”) 点取消返回null

计时

switch = setInterval(function(){alert(“Hello”)},3000); // 每3秒执行一次
使用clearIntercal(switch)停止
switch = =setTimeout(function(){alert(“Hello”)},3000); // 3秒后执行
使用clearTimeout(switch)停止

库

原生js处理浏览器差异力不从心,有了许多定制的库以方便代码书写,这些库称为框架
比如有

jQuery 使用CSS选择器访问和操作html元素,提供UI与插件,最受欢迎
Prototype 提供了常见web任务的API,提供类和继承用于增强功能
MooTools 简化js的API,轻量级的效果和动画
YUI
Ext JS
Dojo
script.aculo.us
UIZE

jQuery入门

需要引用库文件

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
</body>
</html>

不同点在于简化写法
js原生方式

function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;

jQuery方式
使用#表示ById
使用点,写成链条,简化写作

function myFunction()
{
    $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

一个例子

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function myFunction()
{
    $("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

Prototype入门

基础特点与jQuery大同小异

需要引入库文件

<!DOCTYPE html>
<html>
  <head>
<script
src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js">
</script>
</head>
<body>
</body>
</html>

与原生的比较
原生js

function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
onload=myFunction;

Prototype
在事件的看法上与jQuery不同,统一到了observe下

观察对象
事件

函数

function myFunction()
{
    $("h01").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);