本笔记主要目的是练习JavaScript并无其它用途
w3school ：https://www.w3school.com.cn/js/index.asp
目录
3.3.使用 document.write() 方法将内容写到 HTML 文档中。
3.4.使用 console.log() 写入到浏览器的控制台。
5.2. constructor 属性返回所有 JavaScript 变量的构造函数。
一、JavaScript简介
1.JavaScript简介
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
1.1.JavaScript 直接写入 HTML 输出流
<!DOCTYPE html>
<html>
<body>
<p>段落1</p>
<script>
document.write("<h1>h1: JavaScript能够直接写入HTML输出流中</h1>");
document.write("<p>p: JavaScript能够直接写入HTML输出流中2</p>");
</script>
<p>段落<strong>2</strong> </p>
</body>
</html>
1.2.JavaScript 对事件的反应
<!DOCTYPE html>
<html>
<body>
<p>JavaScript 能够对事件作出反应。比如对按钮的点击：</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
</body>
</html>
1.3.JavaScript 改变 HTML 内容、样式
<button type="button" onclick="document.getElementById('id1').style.color='red'">改变颜色-3</button><!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
<script>
function myFunction1(){
//x=document.getElementById("demo"); // 找到元素
//x.innerHTML="改变 HTML 内容-1"; // 改变内容
document.getElementById("demo").innerHTML="改变 HTML 内容-1";
}
function myFunction2(){
x=document.getElementById("demo"); // 找到元素
x.innerHTML="改变 HTML 内容-2"; // 改变内容
}
function myFunction3(){
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式-红色
}
function myFunction4(){
x=document.getElementById("demo") // 找到元素
x.style.color="blue"; // 改变样式-blue
}
</script>
<button type="button" onclick="myFunction1()">改变内容-1</button>
<button type="button" onclick="myFunction2()">改变内容-2</button>
<button type="button" onclick="myFunction3()">改变颜色-1</button>
<button type="button" onclick="myFunction4()">改变颜色-2</button>
</body>
</html>
-
1.3.1. 通过 类名 查找 HTML 元素；通过 标签名 查找 HTML 元素
<!DOCTYPE html>
<html>
<body>
<h2 class="demo2">改变 HTML 元素的内容。H2</h2>
<div id="demo3"><p>改变 HTML 元素的内容。p </p></div>
<script>
function myFunction2(){
x=document.getElementsByClassName("demo2"); // 通过 类名 查找 HTML 元素
document.write("<h2>通过 类名 查找 HTML 元素, " + x[0].innerHTML + "</h2>");
}
function myFunction3(){
x=document.getElementById("demo3"); // 查找 id="demo3" 的元素
y=x.getElementsByTagName("p"); // 然后查找 id="main" 元素中的所有 <p> 元素
//y=document.getElementsByTagName("P"); // 通过 标签名 查找 HTML 元素
document.write('通过 标签名 查找 HTML 元素' + y[0].innerHTML);
}
</script>
<button type="button" onclick="myFunction2()">通过类名改变内容</button>
<button type="button" onclick="myFunction3()">通过标签名改变内容</button>
</body>
</html>
1.4.JavaScript 改变 HTML 图像
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="./images/pic_bulboff.gif";//如果存在字符串 bulbon，图片 src 更新为 bulboff.gif
}
else
{
element.src="./images/pic_bulbon.gif";//若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif
}
}
</script>
<img id="myimage" onclick="changeImage()" src="./images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
- 1.4.1.改变了 <img> 元素的 src 属性
<img id="image" src="./images/image3.gif" width="160" height="120">
<script>
document.getElementById("image").attribute="./images/image3.jpg";
</script>
<p>原图片为 image3.gif,脚本将图片修改为 image4.jpg</p>
1.5.JavaScript 验证输入
<p>如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction(){
var x=document.getElementById("demo").value;
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">请输入数字</button> 
2.JavaScript用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
2.1. head 中的 JavaScript 函数
<p id="demo">改变 HTML 元素的内容。p </p>
<head>
<script>
function myFunction1(){
x=document.getElementById("demo"); // 找到元素
x.innerHTML="改变 HTML 内容-1"; // 改变内容
}
</script>
</head>
<body>
<button type="button" onclick="myFunction1()">改变内容-1</button>
</body> 
2.2. body 中的 JavaScript 函数
<p id="demo">改变 HTML 元素的内容。p </p>
<body>
<script>
function myFunction1(){
x=document.getElementById("demo"); // 找到元素
x.innerHTML="改变 HTML 内容-1"; // 改变内容
}
</script>
<button type="button" onclick="myFunction1()">改变内容-1</button>
</body>
2.3.外部的JavaScript
myScript.js
function myFunction1(){
x=document.getElementById("demo"); // 找到元素
x.innerHTML="改变 HTML 内容-1"; // 改变内容
}
function myFunction2(){
x=document.getElementById("demo"); // 找到元素
x.innerHTML="改变 HTML 内容-2"; // 改变内容
}
function myFunction3(){
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式-红色
}
function myFunction4(){
x=document.getElementById("demo") // 找到元素
x.style.color="blue"; // 改变样式-blue
}index.html
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
<button type="button" onclick="myFunction1()">改变内容-1</button>
<button type="button" onclick="myFunction2()">改变内容-2</button>
<button type="button" onclick="myFunction3()">改变颜色-1</button>
<button type="button" onclick="myFunction4()">改变颜色-2</button>
<script src="myScript.js"></script>
</body>
</html> 
3.JavaScript输出
3.1.使用 window.alert() 弹出警告框。
<!DOCTYPE html>
<html>
<body>
<script>
window.alert(1+2+"弹出警告框");
</script>
</body>
</html> 
3.2.使用 innerHTML 写入到 HTML 元素。
<!DOCTYPE html>
<html>
<body>
<p id="demo">一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>
3.3.使用 document.write() 方法将内容写到 HTML 文档中。
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html> 
3.4.使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>数据写到控制台</title>
</head>
<body>
<script>
console.log("20"); //用F12来启用调试模式，点击 "Console" 菜单
</script>
</body>
</html>
3.5.debugger关键字
debugger关键字用于停止执行JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger语句将无法工作。
开启debugger，代码在第三行前停止执行：
<p id="demo"></p>
<p>开启调试工具，在代码执行到第三行前会停止执行。</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
4.JavaScript语法
4.1.语法
- 1.数组（Array）字面量 定义一个数组：
[40, 100, 1, 5, 25, 10]- 2.对象（Object）字面量 定义一个对象：
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}- 3.函数（Function）字面量 定义一个函数：
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3); //12- 4.var 来定义变量， 使用等号来为变量赋值：
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script>- 4.1.变量提升
var x = 5; // 初始化 x
var y; // 声明 y
elem = document.getElementById("demo"); //查找元素
elem.innerHTML = x + " " + y; //显示x和y，x的值为:5 y的值为:未定义
y = 7; // 设置 y 为 7执行的结果为：
x 为：5，y 为：undefined
- 5.JavaScript 函数，引用一个函数 = 调用函数(执行函数内的语句)。
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}- 6.对代码行进行折行
document.write("你好 \ 世界!");- 7.全局属性
var var1 = 1; // 不可配置
var2 = 2; // 没有使用 var 声明，可配置全局属性- 8.switch语句
<button onclick="myFunction()">今天星期几？</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
default: x="期待周末";
}
document.getElementById("demo").innerHTML=x;
}
</script>
- 9.for循环
<script>
cars=["1","2","3","4"];
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
</script><button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>- 10.for/in - 循环遍历对象的属性
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
- 11.while - 当指定的条件为 true 时循环指定的代码块
<script>
cars=["a","b","c","d"];
var i=0;
while (cars[i]){
document.write(cars[i++] + "<br>");
}
</script>- 12.continue 用于跳过循环中的一个迭代。
for (i=0;i<=10;i++){
if (i==3) continue; //跳过了值 3
x=x + "The number is " + i + "<br>";
}- 13.break 语句用于跳出循环
<script>
cars=["a","b","c","d","e","f"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list; //跳出循环，不会执行后面的代码
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
</script>4.3.JavaScript 对象
对象键值对的写法类似于：
PHP 中的关联数组
Python 中的字典
C 语言中的哈希表
Java 中的哈希映射Ruby 和 Perl 中的哈希表
<script>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁.";
</script>
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
//有两种方式可以访问对象属性：你可以使用 .lastname 或 ["lastname"].
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
4.4.对象方法、访问对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
</script>
</body>
</html>
5.数据类型
在 JavaScript 中有 6 种不同的数据类型：
- string
- number
- boolean
- object
- function
- symbol
3 种对象类型：
- Object
- Date
- Array
2 个不包含任何值的数据类型：
- null
- undefined
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname= new String; //字符串
var x= new Number; //数字
var y= new Boolean; //布尔
var cars= new Array; //数组
var person= new Object; //对象值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
var person = null; // 值为 null(空), 但类型为对象
var person = undefined; // 值为 undefined, 类型为 undefined
var person; // 值为 undefined(空), 类型是undefined
person = undefined; // 值为 undefined, 类型是undefined5.1. typeof 操作符， 检测变量的数据类型。
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" + //string
typeof 3.14 + "<br>" + //number
typeof false + "<br>" + //boolean
typeof [1,2,3,4] + "<br>" + //object
typeof myCar + "<br>" + //undefined (如果 myCar 没有声明)
typeof null + "<br>" + //object
typeof new Date() + "<br>" + //object
typeof function () {} + "<br>" + //function
typeof {name:'john', age:34}; //onject
</script>5.2. constructor 属性返回所有 JavaScript 变量的构造函数。
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"john".constructor + "<br>" + // 返回函数 String() { [native code] }
(3.14).constructor + "<br>" + // 返回函数 Number() { [native code] }
false.constructor + "<br>" + // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor + "<br>" + // 返回函数 Array() { [native code] }
{name:'john'}.constructor +"<br>"+ // 返回函数 Object() { [native code] }
new Date().constructor + "<br>" + // 返回函数 Date() { [native code] }
function () {}.constructor; // 返回函数 Function(){ [native code] }
</script>你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array"):
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
</script> 你可以使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date"):
<p id="demo1"></p>
<script>
var myDate = new Date();
document.getElementById("demo1").innerHTML = isDate(myDate);
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>5.3.类型转换
将数字转换为字符串
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
String(x) + "<br>" +
(x).toString() //toString也有同样的效果
</script>将布尔值转换为字符串
String(false) // 返回 "false"
String(true) // 返回 "true"
false.toString() // 返回 "false"
true.toString() // 返回 "true"将日期转换为字符串
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)将布尔值转换为数字
Number(false) // 返回 0
Number(true) // 返回 1
将日期转换为数字
d = new Date();
Number(d) // 返回 1404568027739
//d.getTime() 也有同样效果
d.getTime() // 返回 1404568027739自动转换类型
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5自动转换为字符串
document.getElementById("demo").innerHTML = myVar;
myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"
myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"
myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"5.4.一元运算符 +
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var y = "5"; //y是一个字符串
var x = + y; //x是一个数字
document.getElementById("demo").innerHTML =
"y: " + typeof y + "<br>" + "x: " + typeof x;
}
</script>
var y = "John"; // y 是一个字符串
var x = + y; // x 是一个数字 (NaN)6.JavaScript 作用域
JavaScript 变量生命周期：
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
6.1.JavaScript 局部作用域
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}6.2.JavaScript 全局变量
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
"我可以调用carName" + carName;
function myFunction() {
carName = "全局变量";
}
</script>
</html>
执行结果：
6.3.Let
通过 var 关键词声明的变量没有块作用域。在块 {} 内声明的变量可以从块之外进行访问。
使用 let 关键词声明拥有块作用域的变量。在块 {} 内声明的变量无法从块外访问：
{
var x = 10;
}
// 此处可以使用 x{
let x = 10;
}
// 此处不可以使用 x在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：
var x = 10; // 允许
let x = 6; // 不允许
{
var x = 10; // 允许
let x = 6; // 不允许
}在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的：
let x = 10; // 允许
let x = 6; // 不允许
{
let x = 10; // 允许
let x = 6; // 不允许
}在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的：
let x = 10; // 允许
var x = 6; // 不允许
{
let x = 10; // 允许
var x = 6; // 不允许
}在不同的作用域或块中，通过 let 重新声明变量是允许的：
let x = 6; // 允许
{
let x = 7; // 允许
}
{
let x = 8; // 允许
}通过 var 声明的变量会提升到顶端。可以在声明变量之前就使用它：
// 在此处，您可以使用 carName
var carName;通过 let 定义的变量不会被提升到顶端。，在声明 let 变量之前就使用它会导致 ReferenceError。
变量从块的开头一直处于“暂时死区”，直到声明为止：
// 在此处，您不可以使用 carName
let carName;示例：
<p id="demo"></p>
<script>
carName = "Audi";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>执行结果：Audi
6.4. const
通过 const 定义的变量与 let 变量类似，但不能重新赋值：
- 常量对象可以更改
// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 您可以更改属性：
car.color = "White";
// 您可以添加属性：
car.owner = "Bill";- 但是您无法重新为常量对象赋值：
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR- 常量数组可以更改
// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];
// 您可以更改元素：
cars[0] = "Honda";
// 您可以添加元素：
cars.push("Volvo");- 但是您无法重新为常量数组赋值：
const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"]; // ERROR在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：
var x = 2; // 允许
const x = 2; // 不允许
{
let x = 2; // 允许
const x = 2; // 不允许
}在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的
const x = 2; // 允许
const x = 3; // 不允许
x = 3; // 不允许
var x = 3; // 不允许
let x = 3; // 不允许
{
const x = 2; // 允许
const x = 3; // 不允许
x = 3; // 不允许
var x = 3; // 不允许
let x = 3; // 不允许
}在另外的作用域或块中重新声明 const 是允许的
const x = 2; // 允许
{
const x = 3; // 允许
}
{
const x = 4; // 允许
}通过 const 定义的变量不会被提升到顶端。
const 变量不能在声明之前使用
carName = "Volvo"; // 您不可以在此处使用 carName
const carName = "Volvo";