JavaScript -- 入门篇

1. js的内容：

写入HTML输出

对事件做出反应

改变HTML内容

改变HTML图像

改变HTML样式

验证输入

2. html中的脚本必须嵌套在<script>  与</script>之间，脚本可放置在head或者body中，一般head中放函数，

外部的js:  <script src=" js/index.js" > </script>

3. js输出

通常操作html，指定id的元素改变其内容

document.getElementById("demo").innerHTML="My First JavaScript";

写到文档输出：

document.write("<p>My First JavaScript</p>");

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

4. js注释

// 单行

/*

*多行

*/

5. js变量

var x = 2;  //弱类型语言  变量是用来存储数据的容器 必须字母开头对大小写敏感

当变量没有赋值时候，值是undefined

重新声明该变量，值不变

6. js数据类型

字符串："hello" 

数字：4

布尔：true

数组：var arr = new Array();   arr[0] = 1 ;  arr[1] = 2;    

var arr = new Array("one", "two", "three");

对象：属性是名称和值的对，name:value

var person={firstname : "Bill",lastname  : "Gates",id        :  5566};

name = person.lastname;

或者 name = person["lastname"];

null表示空值，undefined表示不含有值

7. 属性和方法

访问属性：object. property

访问方法：object. method();

8. js函数：事件驱动

function funName(arg1, arg2)

{

//code blocks

return something;

}

函数内为局部变量，函数结束后被删除；函数外为全局，网页上所有脚本都能访问

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。即使它在函数内执行

9. js运算符

算术

赋值

比较

逻辑

条件

+：用于字符串连接

10. if else：

if(){}

else if(){}

else{}

switch():

{

case 1:

//code blocks

break;

default:

//

}

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

{ }

for(x in person)     //var person = {fname:"jone",  lname:"herry",  age:88}; 

{

txt = txt + person[x];

}

while(){}

do{}  while();

break跳出循环 ；  continue进入下一循环

11. 异常  try  catch  finally

try{}

catch(err){}

12. js DOM文档对象模型：js访问html所有元素

DOM树：

查找html元素：

通过id：

var x=document.getElementById("intro");

通过标签名：

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

通过类名： 在IE8中无效

改变html：

改变输出流：document.write();

改变html内容：

document.getElementById(id).innerHTML=new HTML

改变html属性：

document.getElementById(id).attribute = new value;  //eg:  .src = "lan.jpg"; 

改变样式：

document.getElementById(id).style.property= newstyle;  //eg:  .style.color ="blue "; 

DOM事件：

用户点击鼠标；onclick

网页已经加载；onload  onunload

图像已经加载

鼠标移动到元素上；onmouseover   onmouseout   onmousedown  onmouseup

输入字段被改变；onchange

提交表单；

用户触发按键；

获得焦点：onfocus

DOM元素：节点

创建新的<p>元素：var para = document.createElement("p");

创建文本节点  var node = document.createTextNode("this is new paragraph");

p元素追加文本结点：para.appendChild(node);

在找到的元素后面添加这个创建的新元素：element.appendChild(para);

删除元素：parent.removeChild(child);

var child=document.getElementById("p1");child.parentNode.removeChild(child);

13. js 对象

内建对象：

Date  String   Array

创建直接的实例

这个例子创建了对象的一个新实例，并向其添加了四个属性：

实例

person=new Object();person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";

使用对象构造器

本例使用函数来构造对象：

实例

function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;}

创建 JavaScript 对象实例

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("Bill","Gates",56,"blue");var myMother=new person("Steve","Jobs",48,"green");