JavaScript阅读书籍推荐
入门级 JavaScript权威指南 JavaScript高级程序设计 JavaScript精粹
JavaScript设计模式 JavaScript设计模式与开发实践 JavaScript框架设计
JavaScript & jQuery交互式web前端开发
JavaScript详解
JavaScript能做什么
1.访问内容 - 例如从表单中获得用户输入的值
2.修改内容 - 例如修改轮播广告的图片
3.编制规则 - 例如检查输入是否有效、设置计时器控制轮播广告
4.响应事件 - 例如响应按钮或链接的点击，处理表单的提交
ECMAScript
-
变量和数据类型
变量是用来存储数据的内存空间
变量的命名规则与Java一致
JavaScript中有6种数据类型，其中String、Number、Boolean、Undefined、Null属于基本数据类型，Object属于复杂数据类型，数组和函数都是Object。
JavaScript是弱类型语言。 -
数组
数组是一种特殊的变量，可以用来存储多个值。
数组是对象。 -
表达式和运算符
表达式可以产生一个值，产生值得过程中可以使用运算符进行运算。
因为存在默认的类型转换机制，JavaScript中每个值都可以被当作true或false来处理。
可以使用严格等于运算符和严格不等于运算符来避免默认的类型转换。
在使用短路运算符时，如果获得了确定的结果，立刻就会停止运算（短路），但是返回的值不一定是true或false来处理。
可以使用严格等于运算符和严格不等于运算符来避免默认的类型转换。
在使用短路运算符时，如果获得了确定的结果，立刻就会停止运算（短路），
但是返回的值不一定是true或false -
函数
函数让我们可以将一系列的语句组织成一个整体以执行某项特定的任务。如果这些任务需要重复执行可以直接调用函数而不是书写重复的代码。
可以使用匿名函数和函数表达式，还可以书写立即调用函数表达式。
通过函数可以构造一个局部作用域，函数之外的变量拥有全局作用域。
函数也是对象。
-
对象
对象将一组变量和函数结合起来，可以用来表达真实世界中的事务。
创建对象可以使用字面量语法和构造函数语法。
访问对象的属性和方法可以使用点语法。
this关键字在不同的上下文环境中有不同的含义，它指向一个对象，通常是当前函数所操作的对象。
JavaScript中有很多全局对象，例如：String、Number、Boolean、Date、Math、RegEx。 -
分支和循环
浏览器在遇到JavaScript时就会停止所有工作直到JavaScript代码执行结束，如果循环执行的时间很长或者出现了死循环就会影响到页面的加载，因此JavaScript代码一般放在网页的最后面。
BOM
DOM
文档对象模型规定了浏览器应该如何创建HTML页面的模型，以及JavaScript如何访问或修改浏
览器窗口中的内容。DOM既不是HTML的一部分，也不是JavaScript的一部分，而是一系列独立的
规则，所有浏览器制作商都是实现了这些规则。
DOM树是Web页面的模型，它包括了文档节点、元素节点、属性节点、文本节点。
-
选择单个元素节点
getElementById() / querySelector() -
选择多个元素
getElementsByClassName() / getElementsByTagName() / querySelectorAll()、 -
访问/更新文本节点
nodeValue -
操作HTML内容
innerHTML / textContent / createElement() / createTextNode() / appendChile() / removeChild() -
访问或更新属性值
className / id / hasAttribute() / getAttribute() / setAttribute() / removeAttribute()
事件
事件分类
- UI事件
load / unload / error / resize / scroll - 键盘事件
keydown / keyup / keypress - 鼠标事件
click / dbclick / mousedown / mouseup / mousemove / mouseover / mouseout - 焦点事件
focus(focusin) / blur(focusout) - 表单事件
input / change / submit / reset / cut / copy / paste / select
事件流
- 事件冒泡：事件从具体节点开始向外传播直到最顶层的节点，这是事件流默认的类型，被绝大多数浏览器所支持。
- 事件捕获：事件从最顶层节点开始向内传播到具体事件节点。
绑定事件
将事件绑定到元素有三种方法：
- HTML事件处理程序（不推荐）
- 传统的DOM事件处理
- 第2级DOM监听器
element.addEventListener(事件，代码，事件流);
事件对象
- 属性：target / type / cancelable
- 方法：preventDefault() / stopPropagation()
jQuery
jQuery是一个JavaScript代码库，它提供了快速便捷的方法来实现很多常见的JavaScript任务，简单的选择器，用更少的代码来做更多的事情，并且可以在所有主流浏览器中保持兼容性，不需要书写繁琐的后备代码。
JavaScript
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
window.jQuery || document.write('<script src="js/jquery-
1.10.2.min.js"></script>');
</script>
其他JavaScript库
-
DOM和事件
-
用户界面
-
图形和图表
-
模板引擎
-
前端MVC
预防冲突
Ajax和JSON
API
表单验证和正则表达式
例子
var a = 1.2; // number
var b = true; // boolean
var c = "'hello'" // string
var d = null; // object --> null
var e; // undefined
var f = new Date(); // object
var g = function() {}; // function --> object
document.write("<p>" + typeof a + "</p>");
var array = ['hello', 'apple', 'grape', 'zoo', 'juice'];
/*array[0] = 'apple';
array[1] = 'banana';
array[99] = 'zealot';*/
array.sort();
array.unshift('shit');
array.pop();
array.push('elephant')
array.shift();
/*for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}*/
for (var x in array) {
console.log(array[x]);
}
var x = 1;
var y = '';
var foo = window.addEventListener || window.attachEvent;
if (y) {
// window.alert("Good");
}
else {
// swindow.alert("Shit");
}
// window.alert(x == y);
// window.alert(x === y);
console.log(add(1,2));
function add(a, b) {
return a + b;
}
// 即时调用函数
(function (a, b) {
// window.alert(a * b);
}(3, 4));
+function (a, b) {
// window.alert(a * b);
}(3, 4);
var stu = {
"name": "Kygo",
"age": 20,
"car": {
"brand": "QQ",
"maxSpeed": 120,
"run": function() {
// 错误 这里的this代表的是车
// window.alert(this.name + "正在开车");
}
},
"friendName": ["苍井空", "小泽玛利亚"],
"study": function(courseName) {
window.alert(this.name + "正在学习" + courseName);
}
};
function Student(name, age) {
var obj = new Object();
// obj ---> constructor --> Student
if (this instanceof Student) {
this.name = name;
this.age = age;
this.study = function(courseName) {
window.alert(this.name + " is studying " + courseName);
};
}
Student.foo = function() {
window.alert("调用静态方法foo");
};
Student.prototype.study = function(courseName) {
window.alert(this.name + "正在学习" + courseName)
};
return obj;
}
var stu2 = new Student("kygo", 23);
// stu2.study("Java");
var stu2 = Student("kygo", 23);
// window.study("Java");
console.log(stu.name);
console.log(stu.age);
// stu.study("Java");
// stu.car.run;
// stu2.foo(); error
// Student.foo();
/*function showTime() {
var elem = document.getElementById('time');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
elem.innerHTML = year + "年" + month + "月" + day + "日" +
hour + ":" + minute + ":" + second;
window.setTimeout(showTime, 1000)
}
window.addEventListener('load', showTime);*/
/*
window.addEventListener('load', function ) {
var elem = document.getElementById('time');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
elem.innerHTML = year + "年" + month + "月" + day + "日" +
hour + ":" + minute + ":" + second;
window.setTimeout(arguments.callee, 1000)
});*/
function Clock() {
this.reset();
}
Clock.prototype.reset = function() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.day = date.getDate();
this.hour = date.getHours();
this.minute = date.getMinutes();
this.second = date.getSeconds();
}
Clock.prototype.run = function() {
this.second += 1;
if (this.second == 60) {
this.second = 0;
this.minute += 1;
if (this.minute == 60) {
this.minute = 0;
this.hour += 1;
if (this.hour == 24 ) {
this.reset();
}
}
}
};
Clock.prototype.show = function() {
return this.year + "年" + this.month + "月" + this.day + "日" +
this.hour + ":" + this.minute + ":" + this.second;
}
var elem = document.getElementById('time');
var clock = new Clock();
window.addEventListener('load', function () {
elem.innerHTML = clock.show();
clock.run();
window.setTimeout(arguments.callee, 1000);
});
var x = /^\w{6,20}$/;
网友评论