Javascript基础知识

http://www.ziqiangxuetang.com/js/js-tutorial.html

 

一、引用

 

在 HTML 页面中插入JavaScript，请使用 <script> 标签。

<script> 和</script> 会告诉 JavaScript 在何处开始和结束

 

二、基础

 

 

1、输出

 

-- 写到元素

向 id="demo"的 HTML 元素输出文本 "你好 Dolly"

document.getElementById("demo").innerHTML="你好 Dolly";

-- 写到文档

把 <p> 元素写到 HTML文档输出中

document.write("<p>我的第一个JavaScript</p>");

 

2、关键字

 

abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

 

3、注释

 

//

/* … */

 

4、变量

 

var carname;

var pi=3.14;

var lastname="Doe", age=30, job="carpenter";

 

5、数据类型

 

字符串：var carname="VolvoXC60";

数字：var x1=34.00;

布尔值：var x=true;

数组：

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

var cars=["Saab","Volvo","BMW"];

字典：

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

null：var x=null;

 

6、对象

 

-- 创建对象

创建名为"person" 的对象，并为其添加属性：

person=new Object();

person.firstname="John";

-- 访问对象

objectName.propertyName

objectName.methodName()

 

7、函数

 

function myFunction("marked">var1,"marked">var2)

{

代码

return

}

 

8、运算

 

+、-、*、/、%、++、--、=、+=、-=、*=、/=、%=

 

9、比较

 

==、===（绝对等于，值和类型都相同）、!=、!==、>、<、>=、<=、&&、||、!

 

10、条件

 

-- if else

if (condition1)

  {

  当条件 1 为 true 时执行的代码

  }

else if (condition2)

  {

 当条件 2 为 true 时执行的代码

  }

else

  {

  当条件 1 和 条件 2 都不为 true 时执行的代码

  }

 

-- switch

switch(n)

{

case 1:

  执行代码块 1

  break;

case 2:

  执行代码块 2

  break;

default:

 n 与 case 1 和 case 2 不同时执行的代码

}

 

11、循环

 

-- for

for (语句 1; 语句 2; 语句 3)

  {

  被执行的代码块

  }

-- for/in

for (x in person)

 

-- while

while (条件)

  {

  需要执行的代码

  }

 

-- do/while

do

  {

  需要执行的代码

  }

while (条件);

 

-- break

不带标签引用跳出当前代码块

带标签引用跳出任何指定标签

 

-- continue

不带标签引用继续执行当前代码块

带标签引用继续执行任何指定标签

 

12、错误

 

try

  {

  //在这里运行代码

  }

catch(err)

  {

  //在这里处理错误

  }

throw exception

 

13、表单

 

function validateForm()

{

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

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

  {

  alert("First name must be filled out");

  return false;

  }

}

 

三、DOM

 

1、HTML

 

改变输出流：document.write()。（注：不要在文档加载之后使用document.write()。这会覆盖该文档）

改变内容：document.getElementById(id).innerHTML=newHTML

改变属性：document.getElementById(id).attribute=new value

 

2、CSS

 

改变样式：document.getElementById(id).style.property=new style

document.getElementById("p2").style.color="blue";

 

3、事件

 

可以在事件发生时选择执行javascript

οnclick=JavaScript

 

ondblclick	鼠标双击时触发此事件
onmousedown	按下鼠标时触发此事件
onmouseup	鼠标按下后松开鼠标时触发此事件
onmouseover	当鼠标移动到某对象范围的上方时触发此事件
onmousemove	鼠标移动时触发此事件
onmouseout	当鼠标离开某对象范围时触发此事件
onkeypress	当键盘上的某个键被按下并且释放时触发此事件.
onkeydown	当键盘上某个按键被按下时触发此事件
onkeyup	当键盘上某个按键被按放开时触发此事件
onbeforeunload	当前页面的内容将要被改变时触发此事件
onerror	出现错误时触发此事件
onload	页面内容完成时触发此事件
onmove	浏览器的窗口被移动时触发此事件
onresize	当浏览器的窗口大小被改变时触发此事件
onscroll	浏览器的滚动条位置发生变化时触发此事件
onstop	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
oncontextmenu	当弹出右键上下文菜单时发生
onunload	当前页面将被改变时触发此事件
onchange	当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus	当某个元素获得焦点时触发此事件
onreset	当表单中RESET的属性被激发时触发此事件
onsubmit	一个表单被递交时触发此事件

 

4、元素

 

-- 创建元素

 

这段代码创建新的<p>元素： 

var para=document.createElement("p");

如需向<p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("This is a new paragraph.");

然后您必须向<p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。 

这段代码找到一个已有的元素：

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

以下代码在已存在的元素后添加新元素：

element.appendChild(para);

 

-- 删除元素

 

这个 HTML 文档含有拥有两个子节点（两个<p> 元素）的 <div> 元素：

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

找到id="div1" 的元素：

var parent=document.getElementById("div1");

找到id="p1" 的 <p> 元素： 

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

从父元素中删除子元素：

parent.removeChild(child);

 

四、内置对象

 

1、Number

2、String

3、Date

4、Array

5、Boolean

6、Math

7、RegExp