菜鸟笔记——javascript

<script src="myScript.js"></script> //引用外部js文件

JavaScript 对大小写敏感

可以在文本字符串中使用反斜杠对代码行进行换行。

document.write("Hello \
World!");

for…in 循环中的代码块将针对每个属性执行一次
for (对象中的变量)
{
要执行的代码
}
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

1.声明变量

命名：

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不推荐）
• 变量名称对大小写敏感

可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：var name=“Gates”, age=56, job=“CEO”;
未使用值来声明的变量，其值实际上是 undefined。
重新声明 JavaScript 变量，该变量的值不会丢失。

2.数据类型

字符串、数字、布尔、数组、对象、Null、Undefined

• var carname=new String(); //内建对象
• var x= new Number();
• var y= new Boolean();
• var cars= new Array();
• var person= new Object();

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。


局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。


全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。


JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

3.js对象

Number:
JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。

Boolean:
下面的所有的代码行均会创建初始值为 false 的 Boolean 对象
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
下面的所有的代码行均会创初始值为 true 的 Boolean 对象：
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean(“true”);
var myBoolean=new Boolean(“false”);
var myBoolean=new Boolean(“Bill Gates”);

4.js实现

核心 ECMAScript 描述了该语言的语法和基本对象；
文档对象模型 DOM 描述了处理网页内容的方法和接口；
浏览器对象模型 BOM 描述了与浏览器进行交互的方法和接口。

5.DOM

访问 HTML 元素（节点）
您能够以不同的方式来访问 HTML 元素：

• 通过使用 getElementById() 方法
• 通过使用 getElementsByTagName() 方法
• 通过使用 getElementsByClassName() 方法

HTML DOM - 改变 HTML

1. 改变 HTML 输出流
   document.write() 可用于直接向 HTML 输出流写内容。

2. 改变 HTML 内容
   修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
   ex. document.getElementById(id).innerHTML=new Text

3. 改变 HTML 属性
   document.getElementById(id).attribute=new value 可以改变 HTML 元素的属性。
   ex. document.getElementById(“image”).src=“landscape.jpg”

HTML DOM - 改变 CSS

1. 改变 HTML 样式
   document.getElementById(id).style.property=new style 可以改变 HTML 元素的样式。
   ex. document.getElementById(“p2”).style.color=“blue”;

HTML DOM 事件

1. onload 和 onunload 事件
   onload 和 onunload 事件会在用户进入或离开页面时被触发。
   onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
   onload 和 onunload 事件可用于处理 cookie。

2. onchange 事件
   onchange 事件常结合对输入字段的验证来使用。
   ex.

	function myFunction()
	{
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
	}
	
	<input type="text" id="fname" "myFunction()">		//输入时字符变成大写

3. onmouseover 和 onmouseout 事件
   onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

4. onmousedown、onmouseup 以及 onclick 事件
   onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
   首先当点击鼠标按钮时，会触发 onmousedown 事件，
   当释放鼠标按钮时，会触发 onmouseup 事件，
   最后，当完成鼠标点击时，会触发 onclick 事件。

HTML DOM 元素（节点）

1. 创建新的 HTML 元素
   如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
   ex.

	<div id="div1">
	<p id="p1">这是一个段落</p>
	<p id="p2">这是另一个段落</p>
	</div>
	
	<script>
	var para=document.createElement("p");
	var node=document.createTextNode("这是新段落。");
	para.appendChild(node);
	
	var element=document.getElementById("div1");
	element.appendChild(para);
	</script>

2. 删除已有的 HTML 元素
   如需删除 HTML 元素，您必须首先获得该元素的父元素。

	<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
	</div>
	
	<script>
	var parent=document.getElementById("div1");
	var child=document.getElementById("p1");
	parent.removeChild(child);
	</script>

6.js window

Window Location

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）
• location.assign() 方法加载新的文档
  ex.window.location.assign(“http://www.w3school.com.cn”)

History

• history.back() 方法加载历史列表中的前一个 URL
• history forward() 方法加载历史列表中的下一个 URL

消息框

• 警告框
  警告框经常用于确保用户可以得到某些信息。
  当警告框出现后，用户需要点击确定按钮才能继续进行操作。
  语法：alert(“文本”)

• 确认框
  确认框用于使用户可以验证或者接受某些信息。
  当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
  如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
  语法：confirm(“文本”)

• 提示框
  提示框经常用于提示用户在进入页面前输入某个值。
  当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
  如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
  语法：prompt(“文本”,“默认值”)

计时

• setTimeout()
  setTimeout(action, delay)方法在第二个参数所指定的延迟时间（ms）后，调用作为第一个参数传入的函数。
  用clearTimeout(name)取消定时器函数

	var timer1 = setTimeout(action,delay);
	clearTimeout(timer1);

• setInterval()
  setTimeout(action, delay)方法在第二个参数所指定的间隔时间（ms）后，调用作为第一个参数传入的函数。

	var timer2 = setInterval(action,delay);
	clearInterval(timer2);