Javascript学习总结

http://www.w3cschool.cc/js/js-tutorial.html

（1）javascript是web编程语言的一种，是一种脚本语言。

（2）javascript脚本必须位于<script></script>标签中，脚本可以位于head和body中。

对于外部引用的js文件，引用语句：<script src="myScript.js"></script>

（3）javascript输出：

document.getElementById("demo").innerHTML = "段落已修改。";  //修改指定id元素的网页内容

<script>

document.write(Date());  //直接在网页中增加了日期句子

</script>

console.log(c) //用于浏览器调试

（4）javascript变量类型

var length = 16;                                  // Number 通过数字字面量赋值 

var points = x * 10;                              // Number 通过表达式字面量赋值

var lastName = "Johnson";                         // String 通过字符串字面量赋值

var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值

var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

（5）在javascript中可以通过\来隔开字符串。

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("你好 \

世界!");

（6）javascript中可以同时声明赋值多个变量：var a = 1, b = 2;

（7）javascript中声明的无值的变量，其值是undefined。

（8）

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo"; 

var carname;

（9）javascript中拥有动态类型，这意味着相同的变量可以有不同的类型。

var x;  x = 5; x = "hello";

（10）javascript中数组的多种声明方式。

var array = new Array();

array[0] = "1";

var array  = new Array("1",2);

var array = ["1",2];

(11) javascript中的对象声明方式：

var person={firstname:"John", lastname:"Doe", id:5566};

获取对象中数值的方式：

person.lastname;

person["lastname"]

(12) 通过将变量赋值为null，就可以清楚变量数据，将其变为undefined

(13)创建javascript对象，并且调用其中的方法：

<script>

var person = {

    firstName: "John",

    lastName : "Doe",

    id       : 5566,

    fullName : function() {

       return this.firstName + " " + this.lastName;

    }

};

document.getElementById("demo").innerHTML = person.fullName();

（14）javascript的声明方法：

function myFunction(var1,var2)

{

    代码

}

（15）javascript变量作用于问题：

// 此处不能调用 carName 变量

function myFunction() {

    var carName = "Volvo";

    // 函数内可调用 carName 变量

}

var carName = " Volvo";

// 此处可调用 carName 变量

function myFunction() {

    // 函数内可调用 carName 变量 

}

// 此处可调用 carName 变量

function myFunction() {

    carName = "Volvo";

    // 此处可调用 carName 变量

}

（16）Javascript事件可以使浏览器行为，也可以是用户行为。页面加载成功，页面关闭等都属于浏览器行为，单击按钮，改变输入框都属于用户行为。

（17）字符串也可以声明为对象的方式，如new String("hello")，此时就是一个对象了。

var x = "John";

var y = new String("John");

typeof x // returns String

typeof y // returns Object

（18）比较运算符： var x = 5; x == "5" 返回true

(19)对象遍历方式

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

for (x in person){

  txt=txt + person[x];

}

（20）在javascript中不仅有传统的continue和break，而且可以使用continue labelname跳转到固定的位置。

label:

statements

continue label;

(21)javascript中的Null与undefined

var person = null;           // Value is null, but type is still an object  null表示什么都没有

var person = undefined;     // 值为 undefined, type is undefined  undefined表示变量没有赋值

null === undefined           // false

null == undefined            // true

（22）字符串转换

String(x)         // 将变量 x 转换为字符串并返回

x.toString()  //转换为str

http://www.runoob.com/js/js-type-conversion.html  有很多类型转换方式，转换为数字，浮点数等。还有日期的各种函数方法。

（23）javascript中的正则表达式

在javascript中的正则表达式主要用于搜索或者替换方法中，即search和replace方法。

var n = str.search(/w3cschool/i);  返回字符串中w3cschool的位置，不区分大小写。

var res = str.replace(/microsoft/i, "w3cschool");  //字符串的替换

在javascript中也有一些函数可以用于判断字符串是否满足某种匹配关系：

var patt = /e/;

patt.test("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为：

true

还有另外一个函数exec用于返回所有匹配的内容：

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

字符串中含有 "e"，所以该实例输出为:

e

（24）在javascript中也具有异常处理代码，try catch 模块

try

  { 

  var x=document.getElementById("demo").value;

  if(x=="")    throw "empty";  //自己抛出异常  在catch代码块进行处理

  if(isNaN(x)) throw "not a number";

  if(x>10)     throw "too high";

  if(x<5)      throw "too low";

  }

catch(err)

  {

  var y=document.getElementById("mess");

  y.innerHTML="Error: " + err + ".";

  }

（25）表单验证，获取表单内容的方式还是比较简单的

var x=document.forms["myForm"]["fname"].value;

if (x==null || x=="")

  {

  alert("姓必须填写");

  return false;

  }

}

</script>

<form name="myForm" action="demo-form.php" οnsubmit="return validateForm()" method="post">

姓: <input type="text" name="fname">

<input type="submit" value="提交">

</form>

（26）javascript中json字符串的转换问题。直接调用现有的方法就可以实现json字符串的转换。

<script>

var text = '{"employees":[' +

'{"firstName":"John","lastName":"Doe" },' +

'{"firstName":"Anna","lastName":"Smith" },' +

'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);

document.getElementById("demo").innerHTML =

obj.employees[1].firstName + " " + obj.employees[1].lastName;

</script>

（27）javascript:void(0)表示调用一个函数，但是不反悔任何内容。

<a href="javascript:void(alert('Warning!!!'))">点我!</a>

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

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

（28）javascript函数的定义以及提升。

函数声明：

function functionName(parameters) {

  执行的代码

}

函数表达式：

var x = function (a, b) {return a * b};

function构造函数，因为函数本身也是对象：

var myFunction = new Function("a", "b", "return a * b");

函数提升（Hoisting） 通过声明式进行函数定义比较好一些

在之前的教程中我们已经了解了 "hoisting(提升)"。

提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升（Hoisting）应用在变量的声明与函数的声明。

因此，函数可以在声明之前调用：

myFunction(5);

function myFunction(y) {

    return y * y;

}

使用表达式定义函数时无法提升

自调用函数：

<script>

(function () {

    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";

})();

</script>

（29）函数参数的传递

javascript中函数中如果有三个参数，调用的时候如果参数不够，那么其他参数就会默认赋值为undefined

functionName(parameter1, parameter2, parameter3) {

    code to be executed

}

在函数调用的过程中，函数中自带arguments对象，通过该对象可以获取到所有的参数。

JavaScript 函数有个内置的对象 arguments 对象.，argument 对象包含了函数调用的参数数组。通过这种方式你可以很方便的找到最后一个参数的值：

实例

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

function findMax() {

    var i, max = 0;

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

        if (arguments[i] > max) {

            max = arguments[i];

        }

    }

    return max;

}

对于函数findMax,它肯定也属于某一对象，该对象可以被全局访问，默认的对象就是网页本身，也就是window。调用window.findMax也是可以的。

（30）函数的闭包问题

var add = (function () {

    var counter = 0;

    return function () {return counter += 1;}

})();

add();

add();

add();

// 计数器为 3

（31）给元素增加事件（同一个元素可以增加多个事件）

element.addEventListener("click", myFunction);

element.addEventListener("click", mySecondFunction);

也可以为window对象增加事件

window.addEventListener("resize", function(){

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

});

（32）事件捕获的方式有两种。一种是冒泡，即里面的先搞，外面的再搞。一种是事件捕获，即谁最先被触发，谁先执行。

（33）javascript window对象

浏览器对象模型  BOM   文档对象模型  DOM

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

window.screen 对象包含有关用户屏幕的信息。

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

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

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）

window.history 对象包含浏览器的历史。

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击按钮向前相同

window.navigator 对象包含有关访问者浏览器的信息。

（34）javascript计时函数：

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

停止计时：

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

以上是反复间隔执行。

下面的方式只是执行一次：

window.setTimeout("javascript 函数",毫秒数);

window.clearTimeout(timeoutVariable)

（35）javascript cookie相关

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