JavaScript学习总结

JavaScript是Web的编程语言。所有现代的 HTML页面都使用JavaScript。 

第一个小例子

<script>

function displayDate(){

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

}

</script>

<p id="demo">这是一个段落</p>

<button type="button" οnclick="displayDate()">显示日期</button>

脚本语言、直接写入HTML输出流、对事件的反应、改变HTML的内容、改变HTML图像、改变HTML样式、验证输入

JS:弱类型的编程语言

基于事件的、面向对象的、解释型的脚本语言

Java：强类型的编程语言

面向对象、半编译半解释型

boolean

Nubmer：非0转换为true，0转换为false

String：长度不为0的转换为true

null：false

undefined:false

Object:不等于null的转换为true

Array:不等于null的转换为true

NaN：

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

提示：请使用 isNaN() 全局函数来判断一个值是否是 NaN 值。(isNaN()原理：将value用Number()进行转换，可以转换数字返回 false，反之则返回 true)

HTML事件

JS正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换

正则表达式通常用于两个字符串方法 : search() 和 replace()

search()方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace()方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

JS表单

数据验证

数据验证用于确保用户输入的数据是有效的。典型的数据验证有：

必需字段是否有输入?

用户是否输入了合法的数据?

在数字字段是否输入了文本?

大多数情况下，数据验证用于确保用户正确输入数据

数据验证可以使用不同方法来定义，并通过多种方式来调用。服务端数据验证是在数据提交到服务器上后再验证。客户端数据验证side validation是在数据发送到服务器前，在浏览器上完成验证。

JavaScript JSON

JSON是用于存储和传输数据的格式。JSON通常用于服务端向网页传递数据

JSON英文全称JavaScript Object Notation。JSON是一种轻量级的数据交换格式。

JSON是独立的语言，JSON易于理解。JSON使用JavaScript语法，但是JSON格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

JSON语法规则：数据为键/值对,数据由逗号分隔。大括号保存对象，方括号保存数组

javascript:void(0)中最关键的是void关键字，void是JavaScript中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值

Href=”#”与href=”javascript:void(0)”的区别

JS代码规范

变量名（驼峰法）、空格与运算符、代码缩进（不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样）、语句规则（一条与多条）、函数、对象规则、每行代码字符小于 80

命名规则

一般很多代码语言的命名规则都是类似的，例如:

变量和函数为驼峰法（camelCase）

全局变量为大写 (UPPERCASE )

常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则：hyp-hens, camelCase, 或under_scores ?（通常在JavaScript 中被认为是减法，所以不允许使用）

 

HTML和CSS的横杠(-)字符:

HTML5属性可以以 data- (如：data-quantity, data-price) 作为前缀。

CSS使用-来连接属性名 (font-size)

下划线:

很多程序员比较喜欢使用下划线(如：date_of_birth), 特别是在SQL数据库中。

PHP语言通常都使用下划线。

帕斯卡拼写法(PascalCase):帕斯卡拼写法(PascalCase)在C语言中语言较多。

驼峰法：JavaScript中通常推荐使用驼峰法，jQuery及其他 JavaScript库都使用驼峰法。（变量名不要以$作为开始标记，会与很多JavaScript库冲突）

文件扩展名

HTML文件后缀可以是.html (或r.htm)

CSS文件后缀是.css

JavaScript文件后缀是.js

使用小写文件名

大多Web服务器(Apache, Unix)对大小写敏感：london.jpg不能通过London.jpg访问

其他Web服务器(Microsoft,IIS)对大小写不敏感：london.jpg可以通过London.jpg或 london.jpg访问。

 

function----------函数式的编程语言

如何定义函数？

function fun(x){

}

3种方式定义函数

1、有名字的函数

2、匿名有指针

3、匿名没有指针

 

Java-------静态式编程语言

JS---------动态编程语言

支持指向函数的指针

js中的对象：

Java语言是基于模板（class）的面向对象

JS是基于原型的面向对象

1、常量法

var obj = {age:23};

obj.name="张三";

var obj = {

     id:1,

     name:"张三",

     "say-Hello":function(){

         alert("hello");

     }

   };

if(obj.hasOwnProperty("id")){

   alert("0");

}

2、原型法

var user = new Object(); // var user={};

user.id=1;

user.userName="张三";

delete user.id

User user = new User();

println(user);

if("1".equals(user)){

}

3、构造函数法

function User(id,userName){

   this.id=id;

   this.name=name;

}

function User(id,userName){

   var obj = {};

   obj.id=id;

   obj.userName=userName;

   return obj;

}

var user = new User(1,"张三");

alert(user.id);

 

Map m = new HashMap();

m.put("id",1);

m.put("name","张三");

......

String------>Number

Number("1");

+"1";

parseInt("1aaa")

Number-------->String

1+"";

String(1);

1.toString();

Array

Java：静态数组

JS：动态数组

var x = [];  //var x = new Array();

x[0] = 1;

x[1]="abc";

x[2]=new Object();

x[3]=function(){

}

User[] user = new User[3];

user[0]=new User(1,"张三",23);

user[1]=new User(3,"李四",33);

user[2]=new User(2,"王五",43);

class UserCaiPan implements Comparable{

compareTo(Object o1,Object o2){

User u1 = (User)o1;

User u2 = (User)o2;

return u1.getId()-u2.getId();

}

}

Arrays.sort(user,new UserCaiPan());

 

var x = [{id:4,name:"张三"},{id:1,name:"李四"},{id:5,name:"赵六"}];

x.sort(function(x,y){

   return x.id-y.id;

});

for(var i = 0; i < x.length;i++){

alert(x[i].id + "   " + x[i].name);

}

Java中的回调:匿名内部类

class User {

public String toString(){

return "abc";

}

}

public interface I {

public void fun();

}

public class A {

public void sayHello(I i){

print("ccc");

i.fun();

println("ddd");

}

}

public class B implements I{

public void fun(){

println("abc");

}

}

main(){

A a = new A();

print("aaa");

a.sayHello(new I(){

public void fun(){

println("eee");

}

});

print("bbb");

}

JavaScript HTML DOM

HTML DOM (文档对象模型)，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM模型被构造为对象的树：

JavaScript能够改变页面中的所有HTML元素

JavaScript能够改变页面中的所有HTML属性

JavaScript能够改变页面中的所有CSS样式

JavaScript能够对页面中的所有事件做出反应

 

绝对不要在文档加载完成之后使用document.write()，这会覆盖该文档。

创建/删除新的HTML元素

http://www.runoob.com/js/js-htmldom-elements.html

JS库---- jQuery、Prototype、MooTools

JavaScript框架（库），JavaScript高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。为了应对这些调整，许多的 JavaScript (helper) 库应运而生。这些 JavaScript库常被称为 JavaScript框架。

它使用CSS选择器来访问和操作网页上的HTML元素（DOM对象）。jQuery同时提供 companion UI（用户界面）和插件。

Prototype是一种库，提供用于执行常见 web任务的简单API。API是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作HTML DOM。Prototype通过提供类和继承，实现了对JavaScript的增强。

MooTools也是一个框架，提供了可使常见的JavaScript 编程更为简单的API。MooTools 也含有一些轻量级的效果和动画函数。

测试jQuery

HTML DOM文档对象被传递到jQuery：$(document)。当您向jQuery传递DOM对象时，jQuery会返回以HTML DOM对象包装的 jQuery对象。jQuery函数会返回新的jQuery对象，其中的ready()是一个方法。由于在JavaScript中函数就是变量，因此可以把 myFunction 作为变量传递给jQuery的ready方法。

jQuery返回jQuery对象，与已传递的DOM对象不同。jQuery对象拥有的属性和方法，与DOM对象的不同。不能在jQuery对象上使用HTML DOM的属性和方法。

JavaScript Window Location

window.location对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

JavaScript弹窗

可以在JavaScript中创建三种消息框：警告框、确认框、提示框

警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。

window.alert()方法可以不带上window对象，直接使用alert()方法

确认框通常用于验证是否接受用户操作。当确认卡弹出时，用户可以点击 "确认" 或者 "取消"来确定用户操作。当你点击"确认",确认框返回true，如果点击"取消", 确认框返回 false。

window.confirm()方法可以不带上window对象，直接使用confirm()方法

提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

window.prompt()方法可以不带上window对象，直接使用prompt()方法

JavaScript 计时事件

http://www.runoob.com/js/js-timing.html

JavaScript开发知识体系图

http://www.jikexueyuan.com/path/javascript/