热门搜索： Android Java C# Asp

源码示例-分类

Android源码

JavaScript 教程（详细全面）

第一章 JavaScript简介

1.1.JavaScript是什么

JavaScript是一种运行在客户端(浏览器)的编程语言

1.2.JavaScript的书写位置

1.2.1.行内样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  //代码写在标签内部

  <button onclick="alert('逗你玩的')">点击我月薪过万</button>
</body>

</html>

1.2.2.内部样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    
    //直接写在HTML文件里，用script标签包住
    /*
    注意事项

    我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。
    如果先加载的javascript期望修改其下方的HTML那么它可能由于HTML尚未被加载而失效。
    因此，将javascript代码放在HTML页面的底部附近通常是最好的策略
    */

    alert('嗨，欢迎学习JavaScript')
  </script>
</body>

</html>

1.2.3.外部样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 通过src引入外部js文件 -->

  <script src="外部样式.js"></script>
</body>

</html>

1.3.JavaScript的输出输入语法

1.3.1.什么是语法：

人与计算机打交道的规定
我们要按照这个规则去写
我们程序员需要操纵计算机，需要计算机看得懂
输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户这便是一次输入和输出的过程。

1.3.2.JavaScript的输出语法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // JavaScript输出语法一：
    document.write('要输出的内容')
    //作用：向body内输出内容
    // 注意：如果输出的内容写的是标签如'<br>...',也会被解析成网页元素

    // JavaScript输出语法二：
    alert('要输出的内容')
    // 作用：页面弹出警告对话框

    // JavaScript输出语法三：
    console.log('在控制台输出内容');
    // 作用：控制台输出语法，程序员调试使用

  </script>
</body>

</html>

1.3.3.JavaScript的输入语法

1.3.4.JavaScript代码执行顺序

按HTML文档流顺序执行JavaScript代码
alert() 和 prompt()它们会跳过页面渲染先被执行

1.4.JavaScript的注释

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //  JavaScript的注释分为两种
    //1、单行注释  //
    //2、多行注释  /* */
  </script>
</body>

</html>

第二章 JavaScript基础语法

2.1.什么是字面量

在科学计算机中，字面量（literal）是在计算机中描述事/物

比如

我们是工资是10000，此时10000就是数字字面量
'欢迎来到JavaScript' 就是字符串字面量
还有 [ ] 数组字面量 { } 对象字面量等等

2.2.变量

2.2.1.变量是什么

变量是计算机存储数据的‘容器’

白话：变量是一个盒子

通俗：变量是计算机中用来存储数据的‘容器’，它可以让计算机变得有记忆

注意：变量不是数据本身，他们仅仅是一个存储数值的容器，可以理解是一个个用来装东西的的纸盒子

2.2.2.声明变量

要想使用变量，首先需要创造变量（也被称为声明变量或者定义变量）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //要想使用变量，首先需要创造变量（也被称为声明变量或者定义变量）
    // 语法：
    let age
    //我们声明了一个age变量
    //age即变量的名称，也叫标识符
  </script>
</body>

</html>

我们声明了一个age变量
age即变量的名称，也叫标识符

2.2.3.变量的基本使用

定义了一个变量后，你就能初始化它（赋值）在变量名之后更上一个‘=’，然后是数值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.定义一个变量
    let age
    // 2.age 变量赋值为18
    age = 18 //age是变量 18是字面量
  </script>
</body>

</html>

2.2.4.更新变量

变量赋值后，还可以通过简单的给它一个不同的值来跟新它

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.定义一个变量
    let age = 18
    // 2.变量里面的数据发生变化跟改为19
    age = 19
    //3.页面输出结果为19
    document.write(age)

    // 1.定义一个变量
    let cat = 18
    // 2.这里不允许声明多个变量
    let cat = 19
    //3.输出会报错
    document.write(cat)
  </script>
</body>

</html>

2.2.5.变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量本质：是程序在内存中申请一块用来存储数据的小空间

2.2.6.变量名规则与规范

规则：必须遵守，不遵守报错

规范：建议遵守，不遵守不会报错

规则：

不能用关键字
关键字：有特殊含义的字符，JavaScript内置的一些英文词汇。列如：let、var、if等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如Age和age是不同的变量

规范：

起名要有意义
遵守小驼峰命名法
小驼峰命名法：第一个单词首字母小写，后面每个单词的首字母大写

2.2.7.let和var的区别

在较旧的JavaScript，使用关键字 var 来声明变量，而不是let。var现在开发中一般不再使用它，只是我们可能再老版程序中看到它，let 为了解决 var 的一些问题。

var声明:

可以先使用在声明(不合理)
var声明过的变量可以重复声明(不合理)
比如变量提升、全局变量、没有块级作用域等等

2.2.8.常量

概念:使用 const 声明的变量称为“常量‘’

使用场景:当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范:和变量一致

注意: 常量不允许重新赋值,声明的时候必须赋值(初始化)

小技巧:不需要重新赋值的数据使用const

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // const 和 let 一样是es6新语法
    // const的值不允许改变
    const age = 18
    age = 19
    console.log(age); //报错
  </script>
</body>

</html>

2.3.运算符

2.3.1.赋值运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var a = 10
    var b = 20

    //加并赋值
    a += b
    //a = a + b
    console.log(a); //30
    console.log(b); //20

    //减并赋值
    a -= b
    // a = a - b
    console.log(a); //10
    console.log(b); //20

    //乘并赋值
    a *= b
    console.log(a); //200
    console.log(b); //20

    //除并赋值
    a /= b
    console.log(a); //10
    console.log(b); //20

    //取模并赋值
    b %= a
    console.log(a); //10
    console.log(b); //0
  </script>
</body>
</html>

2.3.2.逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <!-- 
      && 逻辑与运算符 一假则假
      || 逻辑或运算符 一真则真
    -->
  <script>
    console.log(true && true) //true
    console.log(false && true) //false
    console.log(true && false); //false
    console.log(false && false); //false

    console.log(true || true); //true
    console.log(true || false); //true
    console.log(false || true); //true
    console.log(false || false); //false

    console.log(3 > 2 && 2>1); //true
    console.log(3>2 && 2<1); //false
    console.log(3>2 || 2<1); //true
  </script>
</body>
</html>

2.3.3.比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    //==相等运算符
    console.log(5 == "5"); //true

    //===全等运算符
    console.log(5 === "5"); //false

    //!= 不相等
    console.log(5 != "5"); //false

    // !== 不全等
    console.log(5 !== "5"); //true

    //==和!=在比较不同的数据类型时，会将比较数据转换为同一类型
    //===和!==则不会转换
  </script>
</body>
</html>

2.3.3.算术运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 加号运算符
    let a = 10
    let b = 20
    let c = a + b
    console.log(c);

    //减法运算符
    console.log(c - a);

    //乘法运算符
    console.log(a * b);

    //除法运算符
    console.log(b / a);

    // 取模运算
    console.log(c % b); //10

    //幂运算
    console.log(2 ** 10); //1024

    //自增运算  （前自增）
    let m = 10
    let n = 20
    m = ++n
    console.log(m); //21
    console.log(n); //21

    //自增运算 （后自增）
    m = n ++;
    console.log(m); //21
    console.log(n); //22

    //自减运算 （前自减）
    m = --n
    console.log(m); //21
    console.log(n); //21

    //自减运算 （后自减）
    m = n--
    console.log(m); //21
    console.log(n); //20

    var x = 3
    console.log(x);
    console.log(++x); //4
    console.log(x++); //4
    console.log(x); //5

    console.log(--x); //4
    console.log(x); //4
    console.log(x--); //4
    console.log(x); //3

  </script>
</body>
</html>

2.3.4.字符串运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 隐式转换
    // 当两个数据类型不同时，js会按照固定的规则进行转换

    //字符串运算符；
    // 当加号遇见字符串，加号做拼接使用
    console.log(1+1);
    console.log(Infinity + 1);
    console.log(1 + null);
    console.log(1+true);
    console.log(1 + false);

    console.log("12" - 0);
    console.log(null * 999); //0
    console.log(null * undefined); //NaN

    console.log(12 + "0"); //120
    console.log(1 + "1"); //11
    console.log(null + "999"); //null999

    var name = "xiaozhang"
    var age = 18
    console.log(name+"的年龄是" + age);

  </script>
</body>
</html>

2.3.4.运算符的优先级

2.4.数据类型

2.4.1.数字类型（Number）

2.4.2.字符串类型（string）

2.4.3.模板字符串

2.4.4.空类型（null）

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

2.4.5.未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined

2.5.数据类型转换

2.5.1.为什么需要数据类型转换

2.5.2.隐式转换

2.5.3.显示转换

2.5.4.数据类型转换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1.将数据转换为布尔型数据
    // 转换时，代表空或者固定的值 [空字符串，数字0，NaN，null[undefined] 会转换成false]
    //其他的值就会转换为true

    let a = Boolean("")
    console.log(a); //false

    console.log(Boolean(" ")); //true
    console.log(Boolean("false")); //true
    console.log(Boolean(0)); //false
    console.log(Boolean(undefined)); //false
    console.log(Boolean(null)); //false
    console.log(Boolean("null")); //true
    console.log(Boolean(Infinity)); //true
    console.log(Boolean(2)); //true
    
    //2.将数据转换为数字型数据
    //number()

    console.log(Number(true)); //1
    console.log(Number(false)); //0
    console.log(Number(undefined)); //NaN
    console.log(Number(null)); //0
    console.log(Number("123")); //123
    console.log(Number("123.a")); //NaN
    console.log(Number("")); //0
    console.log(Number("  ")); //0
    console.log(Number("true")); //NaN
    console.log(Number(""));

    //3.讲数据转换为字符串类型
    let b = false
    console.log(typeof b); //boolean
    var c = toString(b)
    console.log(typeof c); //string
  </script>
</body>
</html>

2.5.5.基本数据类型和引用数据类型

友情链接

CSDN网

51CTO网

菜鸟教程

网站简介 CSDN使命：成就一亿技术人 CSDN愿景：成为技术人交流和成长的家园 CSDN（中国开发者网络）是全球知名中文开发者网站。秉承成就一亿技术人的使命，为IT技术人成长及科技企业发展，提供开发者生态的全方位服务。CSDN在社区基础上，通过知识云、人才云、开发云三大服务，赋能开发者、研发团队及科技企业在IT知识学习、人才招聘、研发效能与协同管理等方面的高速成长与发展。人人都是开发者，家家都是技术公司，CSDN全力前行，共建中国十万亿技术大生态！

51CTO是一个有18年历史的知名技术社区。通过技术社区、技术博客和新媒体矩阵等综合产品服务体系，凝聚了2000万IT技术人员、50万位技术博主和近千家公司的CTO.

网站包括了HTML、CSS、Javascript、PHP、C、Python等各种基础编程教程。同时本站中也提供了大量的在线实例，通过实例，您可以更好地学习如何建站。本站致力于推广各种编程语言技术，所有资源是完全免费的，

关于我们 - 网站声明

JavaScript 教程 （详细 全面）

目录