<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
-
改变 HTML 输出流
document.write() 可用于直接向 HTML 输出流写内容。 -
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
ex. document.getElementById(id).innerHTML=new Text -
改变 HTML 属性
document.getElementById(id).attribute=new value 可以改变 HTML 元素的属性。
ex. document.getElementById(“image”).src=“landscape.jpg”
HTML DOM - 改变 CSS
- 改变 HTML 样式
document.getElementById(id).style.property=new style 可以改变 HTML 元素的样式。
ex. document.getElementById(“p2”).style.color=“blue”;
HTML DOM 事件
-
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。 -
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
ex.
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
<input type="text" id="fname" "myFunction()"> //输入时字符变成大写
-
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 -
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时,会触发 onmousedown 事件,
当释放鼠标按钮时,会触发 onmouseup 事件,
最后,当完成鼠标点击时,会触发 onclick 事件。
HTML DOM 元素(节点)
- 创建新的 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>
- 删除已有的 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);