JavaScript 入门

JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

在 HTML 中，JavaScript 代码必须位于 script 与 /script 标签之间。

JS使用

可以在head body中使用JS，也可以使用外部脚本

<script src="myScript.js"></script>

在外部文件中放置脚本有如下优势：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

JS输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JStest1</title>
</head>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo1"></p>
<button onclick="document.write(3)">试一试</button>

<script>
    document.getElementById("demo1").innerHTML = 1;
    document.write(2);
    window.alert(4)
    console.log(5)
</script>
</body>
</html>

JS语句

在 HTML 中，JavaScript 程序由 web 浏览器执行。

这条语句告诉浏览器在 id=”demo” 的 HTML 元素中输出 “Hello Kitty.”：

document.getElementById("demo").innerHTML = "Hello Kitty.";

请在每条可执行的语句之后添加分号。

JS关键字

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

JS变量

var x = 7;
var y = 8;
var z = x + y;

JS数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。

var person;                  // 值是 undefined，类型是 undefined

在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。

不幸的是，在 JavaScript 中，null 的数据类型是对象。

JS函数

JavaScript 函数通过 function 关键词进行定义

function myFunction(p1, p2){
    return p1 * p2;
}

如何使用函数：

function toCelsius(fahrenheit){
    return (5/9)*(fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

JS对象

对象包括对象属性和对象方法

var person = {
    firstName: "Bill",
    lastName: "Gates",
    id: 678,
    fullName: function(){
        return this.firstName + "" + this.lastName;
    }
};

JS事件

JavaScript 允许您在事件被侦测到时执行代码。

<button onclick="document.getElementById('demo').innerHTML=Date()">现在的时间是？</button>

JS日期

默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串：

Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间)

var d = new Date();

JS条件语句

if (time < 10) {
    greeting = "Good morning";
 } else if (time < 18) {
    greeting = "Good day";
 } else {
    greeting = "Good evening";
 }

JS Switch语句

switch (new Date().getDay()) {
    case 0:
        day = "星期天";
        break;
    case 1:
        day = "星期一";
         break;
    case 2:
        day = "星期二";
         break;
    case 3:
        day = "星期三";
         break;
    case 4:
        day = "星期四";
         break;
    case 5:
        day = "星期五";
         break;
    case 6:
        day = "星期六";
}

JS for循环

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

JS while循环

while (i < 10) {
    text += "数字是 " + i;
    i++;
}

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

JS 异常

<p id="demo"></p>

<script>
try {
    adddlert("欢迎访问！");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

JS Hoisting

提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为。

x = 5; // 把 5 赋值给 x
 
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

JS Let

{ 
  var x = 10; 
}
// 此处可以使用 x

{ 
  let x = 10;
}
// 此处不可以使用 x

JS 调试

如果您的浏览器支持调试，那么您可以使用 console.log() 在调试窗口中显示 JavaScript 的值：

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

JS JSON

什么是 JSON？

JSON 指的是 JavaScript Object Notation
JSON 是轻量级的数据交换格式
JSON 独立于语言 *
JSON 是“自描述的”且易于理解

* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

JSON转化为JS对象

<!DOCTYPE html>
<html>
<body>

<h1>用 JSON 字符串创建对象</h1>

<p id="demo"></p>

<script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

JS 表单

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("必须填写姓名！");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="/demo/action_page.php" onsubmit="return validateForm()" method="post">
  姓名：<input type="text" name="fname">
  <input type="submit" value="提交">
</form>

</body>
</html>

参考

https://www.w3school.com.cn/