JavaScript基础与数据类型
一、JavaScript简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
1. JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言
- JavaScript 是可插入 HTML 页面的编程代码
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
2. JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 定义了网页的行为
二、JavaScript用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。可以在 HTML 文档中放入不限数量的脚本。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
1. 直接写在HTML文件里
a. <body> 中的 JavaScript
在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>b. <head> 中的 JavaScript函数
在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。
该函数会在点击按钮时被调用：
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>c. <body> 中的 JavaScript 函数
在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。
该函数会在点击按钮时被调用：
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>2. 引入外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：
<!DOCTYPE html> <html> <body> <script src="myScript.js"></script> </body> </html>
你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与在 <script> 标签中编写脚本完全一致。
注意：外部脚本不能包含 <script> 标签。
三、JavaScript 输出
JavaScript 没有任何打印或者输出的函数。JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
1. 使用 window.alert()，弹出警告框来显示数据：
<!DOCTYPE html> <html> <body> <h1>我的第一个页面</h1> <p>我的第一个段落。</p> <script> window.alert(5 + 6); </script> </body> </html>
2. 操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = "段落已修改" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
3. 写到 HTML 文档
出于测试目的，可以将JavaScript直接写在HTML 文档中：
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()); </script> </body> </html>
使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html>覆盖实例4. 写到控制台
如果浏览器支持调试，可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
四、JavaScript 语法
1. 字面量
在编程语言中，一个字面量是一个常量，如 3.14。
- 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e);3.14,1001,123e5
- 字符串（String）字面量 可以使用单引号或双引号 be written with double or single quotes；"John Doe"，‘John Doe’
- 表达式字面量 用于计算：5 + 6，5 * 10
- 数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]
- 对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
- 函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}
2. 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：
var x, length x = 5 length = 6
变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。
变量是一个名称。字面量是一个值。
3. 操作符
JavaScript语言有多种类型的运算符：
4. 语句
在 HTML 中，JavaScript 语句向浏览器发出的命令。
语句是用分号分隔：
x = 5 + 6; y = x * 10;
5. 关键词
JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量：var x=5
JavaScript 同样保留了一些关键字，有些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。
以下是 JavaScript 中最重要的保留字（按字母顺序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | with |
6. 标识符
- 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成；例如：_abc,$abc,abc,abc123是标识符，而1abc不是
- 常用于表示函数、变量等的名称；
- JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符
7. 注释
单行注释
// 我不会执行
多行注释
/*我们 不会 执行*/
8. 数据类型
JavaScript 有多种数据类型：数字，字符串，数组，对象等等：
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值9. 函数
JavaScript 语句可以写在函数内，函数可以重复引用：
引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘于 b 的结果
}10. JavaScript 对大小写敏感
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的。
11. 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。