ECMAScript仅仅只是一个描述,定义了脚本语言的所有属性、方法和对象,其他语言可以实现ECMAScript来作为功能的基准,JavaScript就是这样,即ECMAScript为JavaScript核心。

备注:
在 HTML 中,JavaScript 程序由 web 浏览器执行。
JavaScript 使用 Unicode 字符集。

JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写:
firstName, lastName, masterCard, interCity

JavaScript的组成

核心(ECMAScript)
文档对象模型(DOM)
浏览器对象模型(BOM)

导入Js

方式一:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <title>初学js</title>
  6. </head>
  7. <body>
  8. <script>
  9. alert("hello javascript");
  10. </script>
  11. </body>
  12. </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>