ECMAScript仅仅只是一个描述,定义了脚本语言的所有属性、方法和对象,其他语言可以实现ECMAScript来作为功能的基准,JavaScript就是这样,即ECMAScript为JavaScript核心。
备注:
在 HTML 中,JavaScript 程序由 web 浏览器执行。
JavaScript 使用 Unicode 字符集。
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写:
firstName, lastName, masterCard, interCity
JavaScript的组成
核心(ECMAScript)
文档对象模型(DOM)
浏览器对象模型(BOM)
导入Js
方式一:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>初学js</title>
</head>
<body>
<script>
alert("hello javascript");
</script>
</body>
</html>
注意:
脚本可位于 HTML 的 或 部分中,或者同时存在于两个部分中。
通常的做法是把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
方式二(引入外部JS文件):
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>初学js</title>
</head>
<body>
// <!-- 引入外部js文件 -->
<script src="./test.js"></script>
</body>
</html>
注意:
假如引入了外部的js文件,则不能在该js标签里面编写任何js代码
输出
JavaScript 能够以不同方式“显示”数据:
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
注释
单行注释://
多行注释:多行注释以 / 开头,以 / 结尾。
数据类型(原始类型、引用类型)与变量声明
//ECMAScript有五种原始数据类型:String、Number、Boolean、Undefined、Null
<script>
var a = null;
alert(typeof(a))
</script>
备注:
typeof()方法可以获取值数据类型
instanceof()方法可以判断对象
.toString()方法可以将数据类型转成字符串
获取元素(alert弹出框)
<script>
// <!-- 通过id获取元素 -->
alert(document.getElementById("boxes"));
alert(document.getElementsByClassName("box").length);
// <!-- 获取ul标签集合 -->
alert(document.getElementsByClassName("list"));
// <!-- 通过className获取元素 -->
var list = alert(document.getElementsByClassName("list")[0]);
alert(list.getElementsByTagName(li));
// <!-- 通过Name获取元素 -->
alert(document.getElementsByName("user"));
</script>
循环(控制台输出所有的document内嵌函数)
<script>
// 控制台输出所有的document
for (var key in document) {
console.log(key + ":" + document[key]);
}
</script>
函数
var x = myFunction(7, 8); // 调用函数,返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
输出结果:56
对象
//对象
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
//访问对象属性
objectName.propertyName
objectName["propertyName"]
//如果通过关键词 "new" 来声明 JavaScript 变量,则该变量会被创建为对象:
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
HTML事件
事件 | 描述 |
---|---|
onchange | HTML 元素已被改变 |
onclick | 用户点击了 HTML 元素 |
onmouseover | 用户把鼠标移动到 HTML 元素上 |
onmouseout | 用户把鼠标移开 HTML 元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已经完成页面加载 |
解析Json转为js对象
//json字符串
var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';
//将json解析成js对象
var obj = JSON.parse(text);
//实例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>