事件

点击事件(onclick)

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>标题</h1>
  7. <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
  8.     点击
  9. </button>
  11. <!-- p标签通过点击事件显示当前时间 -->
  12. <p id="demo"></p>
  14. </body>
  15. </html>

ES5 (ECMAScript 5.1版本之前)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function myFunction() {
  6.     document.getElementById("demo").innerHTML = "点击事件后修改的文本";
  7. }
  8. </script>
  9. </head>
  11. <body>
  13. <h1>标题</h1>
  14. <p id="demo">原有的文本</p>
  15. <button type="button" onclick="myFunction()">点击</button>
  17. </body>
  18. </html>

ES6 (ECMAScript 6.0版本之后)

  1. <script>
  2.   const myFunction = () =>{
  4.     /* 修改文档中元素id为demo的文本 */
  5.     document.getElementById("demo").innerHTML = "你好 JavaScript";
  7.     /* 修改文档中元素id为demo的样式 */
  8.     document.getElementById("demo").style.fontSize = "30px";
  9.   }
  10. </script>

输出

警告框

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. </body>
  5. <script>
  6.   window.alert('这是一个警告框') 
  7. </script>
  8. </html>

HTML输出

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. </body>
  5. <script>
  6.    document.write('在HTML文档上输出文本')
  7. </script>
  8. </html>

浏览器控制台输出

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. </body>
  5. <script>
  6.    console.log('控制台输出的文本')
  7. </script>
  8. </html>

JavaScript基础类型

基本数据类型

String: 字符串
Number: 数字
Boolean: 布尔值
Null: 空值
Undefined: 未定义
Symbol（ES5）: 唯一的值
BigInt(ES10)： 大数值-9223372036854775808到9223372036854775807

引用类型

Object: 对象
Array：数组
Function: 函数

JavaScript 操作符

作用 符号 示例 结果
赋值 = let num = 1;
console.log(num1)		 1
加 + let num1 =1;
let num2 = 2;
let num3 = num1+num2;
console.log(num3 )		 3
减 - let num1 =1;
let num2 = 2;
let num3 = num2-num1;
console.log(num3 )		 1
乘 * let num1 =1;
let num2 = 2;
let num3 = num1*num2;
console.log(num3 )		 2
初 / let num1 =1;
let num2 = 2;
let num3 = num1/num2;		 0.5
等于 == let num1 =1;
let num2 = 2;
console.log(num1 == num2 )		 false
等于
(同时检查类型)		 === let num1 =1;
let num2 = ‘1’;
console.log(num1 === num2 )		 false
不等于 != let num1 =1;
let num2 = 2;
console.log(num1 !== num2 )		 true
!==
小于 < let num1 =1;
let num2 = 2;
console.log(num1 < num2 )		 true
大于 > let num1 =1;
let num2 = 2;
num1 > num2 ;
console.log(num1 > num2 )		 false
强制转换为布尔值 !! let num1 =1;
console.log(!!num1 )		 true
候补值
(前面的值为undefined或null时使用后面的值)		 ?? let num1;
let num2 = num1 ?? 2
console,log(num2)		 2

变量声明

var

全局声明变量，容易造成命名污染

  1. console.log(a); // undefined
  2. const func = () => {
  3.   a = 1;
  4.   console.log(a); // 1
  5. }
  6. func();
  7. var a;
  8. console.log(a); // 1

let

局部声明变量，在区块作用域内有效果

  1. const func = () =>{
  2.      let a;
  3.   console.log(a); // undefined
  4.   a = 1;
  5.     console.log(a); // 1
  6. }
  7.  console.log(a); // ReferenceError

const

局部声明变量，在区块作用域内有效果(声明后基本数据类型不可以被随意修改，引用数据类型可以修改)

  1. const func = () => {
  2.       const a = 1;  // 这里必须要有赋值
  3.       console.log(a); // 1
  4.       a = 2;  // ReferenceError
  5.    }
  6.    func();
  7.    console.log(a); // ReferenceError
  1. const func = () => {
  2.       const a = { a1: 1 };  // 这里必须要有赋值
  3.       console.log(a); // {a1: 1}
  4.       a.a1 = 2;
  5.       console.log(a); // {a1: 2}
  6.    }
  7.    func();
  8.    console.log(a); // ReferenceError