JavaScript 学习笔记
JavaScript 是 Web 的编程语言。
JavaScript web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
基本用法
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 标签可以放在 <body> 、<head>标签中，也可以外部引用：
//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>
//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>
//外部标签引用
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
输出
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
alert
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
write
出于测试目的，您可以将JavaScript直接写在HTML 文档中：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
innerHTML
使用 document.getElementById(id) 方法访问某个 HTML 元素。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
批注，该方法会直接替换原内容。
log
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单,信息会显示在控制台中。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
语法
数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
容器。
动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];
赋值
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：
var x, length //此时是未定义值 undefined
x = 5;
length = 6;
var lastname="Doe", age=30, job="carpenter";
注释
// 单行注释
/*
多行注释
多行注释
*/
函数
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实例</title>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点我</button>
</body>
</html>
对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。
//定义对象
var person = {
//创建属性
firstName: "John",
lastName : "Doe",
id : 5566,
//创建方法
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
//访问属性及方法
person.lastName;
name = person.fullName();
事件
常见的HTML事件
- onchange HTML 元素改变
- onclick 用户点击 HTML 元素
- onmouseover 用户在一个HTML元素上移动鼠标
- onmouseout 用户从一个HTML元素上移开鼠标
- onkeydown 用户按下键盘按键
- onload 浏览器已完成页面的加载
字符串
var carname = "Volvo XC60";
var sln = txt.length;
其他参考：https://www.runoob.com/js/js-strings.html
遍历
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
var person={fname:"John",lname:"Doe",age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
变量提升
js允许先赋值后定义。。
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
严格模式
JavaScript 严格模式（strict mode）即在严格的条件下运行。
严格模式下不允许使用未声明的变量。
"use strict";
x = 3.14; // 报错 (x 未定义)
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
