JavaScript基础语法

JavaScript基础语法

JS的三大组成部分

​ JS由ES、BOM、DOM组成。

1. ECMAScript（ES）

   • 也就是js的语法，即：我们怎么写代码，什么地方是字母，什么地方是数字，什么地方是符号。

2. BOM（Browser Object Model）- 浏览器对象模型

   • 就是一套操作浏览器的属性和方法
   • 操作浏览器的滚动条、地址栏、改变页面、关闭页面…

3. DOM（Document Object Model）- 文档对象模型

   • 就是一套操作文档（html结构）的属性和方法。
   • 操作页面元素、操作有没有某个元素、操作样式、操作类名…

4. JS的本质

   • 就是使用js的语法来操作页面的元素和浏览器，我们管这个叫做网页动效（动画效果）
   • 使用js语法和后端进行交互，即：前后端交互

行内式JS代码

• 书写在a标签上

  • 直接书写在a标签的href属性上
  • 因为我们的a标签本身具有跳转页面的能力，因此为了和跳转页面的链接做一个区分，我们就加一个东西，即 href = “javascript : 你要执行的js代码;”
  • 注：href属性有 javascript : ; 就是执行行内式 js 代码
  • href 属性没有 javascript : ; 就是执行跳转链接地址

    <a href='javascript: alert("hello world") ;'>点击一下试试</a>

	<a href="https://www.baidu.com">我会跳转链接</a>

• 书写在非a标签上

  • 因为一般的非a标签是没有点击做事情的能力，所以我们要先给非a标签添加一个点击做事情的能力，即我们在标签上写上 οnclick=" ", 当点击的时候
  • 注：如果你是写在非a标签上的行内式js代码，则需要写在一个事件上，目前我们就写在onclick事件上
    • 尽量不要写行内式js代码（强烈不推荐）
  • 举例：on：在…上，click：点击
    • 当你点击在div标签上的时候，会执行后面引号里面那一段js代码

	<div onclick="alert('你好 世界')">点我试试</div>

• 接收第一个js代码

  • alert( ) 是固定语法，表示在浏览器弹出一个提示框，括号里面的内容就是提示框中的文本内容
  • 注：如果你在括号里面写的是纯数字，那么不需要加引号。只要你在括号里面写的不是纯数字，就必须加引号

	alert('hello world')

​

内嵌式JS代码

• 概念

  • 把js代码写在一个script标签对中，不需要依赖事件，只要打开页面就会执行掉。

• 写法

	<script>
    	alert('你好 世界')
  	</script>

• 一个script标签可以写任意行js代码，会按照从上到下的顺序依次执行。

• 一个页面可以书写多个script标签，会按照从上到下的顺序依次执行。

• 一个script标签理论上可以写在页面的任何位置，但是推荐放在head标签的末尾或者body标签的末尾。

外链式JS代码

• 概念

  • 把js代码放在一个 .js 后缀的文件里面，在页面中使用script标签的src属性引入，不需要依赖事件，打开页面就会执行了。

• 写法

	 <script src="./04_test.js"></script>

• 一个script标签只能外链一个js文件
  • 一个页面可以书写多个外链式，会按照从上到下的顺序依次执行
  • 一个script标签一旦被当做外链式引入js文件，那么就不能再当做内嵌式在标签对里面写代码了，写了白写。
• …/ 上一级路径
• ./ 当前路径

JS的注释

• 单行注释

  • 一两个 // 开头，后面的就是注释
  • 被注释的代码是不会执行的
  • 单行注释的快捷键 ctrl + /

• 多行注释

  • 写一个 /**/ 符号
  • 我们的注释内容写在两个人*中间，可以换行书写，被注释的代码是不会执行
  • 快捷键根据不同的浏览器是不一样的 vscode的快捷键是shift + ait + a

JS的变量

• 概念

  • 变量就是在 js 执行程序的时候，保存一个数据的名字，在 js 里面定义变量统一使用 var 关键字

• var num = 100

  • 当你的代码出现一个var的时候，表示你要定义一个变量了
  • 下面表示我们在程序中定义了一个叫做num的名字的变量，目前这个num没有存储数据

	var num

• 给一个变量存储一个数据（值），使用等于号（=）

  • 在js里面，一个等于号不是等于的意思，是负值的意思，即：把等号右边的数据，赋值给左边的变量

• var num = 100

  1. var是js中声明变量的关键字
  2. 空格必须写，是为了分隔var关键字和变量名
  3. num是你自己起的一个变量名，你喜欢写什么就写什么（我们有一定的规则）
  4. 等于号（=）是负值的意思，就是把右边的数据给到左边的名字
  5. 100是我们给num这个变量名存储的内容

• 注意

  1. 我们现在学习的是js，而不是html，不是css
  2. js是运行在电脑内存中的一段程序，它存储的内容不是在标签里面
  3. 当你的html和css把网页做好后，我们的js是让网页动起来，比如：用户点击一下某个位置，某一个div不见了
  4. var n = 123456789
     • 当计算 123456789 + 200 就可以写成 n + 200
     • 当计算 123456789 + 500 就可以写成 n + 500

• 同时声明多个变量

  • 我们可以用一个var关键字声明多个变量

  • 一个变量只能存储一个值，一旦你给他第二值的时候，那么第一值就不见了，消失了

    • var num = 100  //声明了一个叫做num的变量，赋值为100
      num = 200  //使用一个被声明过的变量num，重新赋值为200，此时num=200
      

  • 当你需要使用一个var声明多个变量的时候，多个变量之间使用逗号分隔

    • var n1, n2, n3
      

    • 表示我们同时声明了三个变量，一个叫做n1，一个叫做n2，一个叫做n3

  • 同时声明多个变量并且一并赋值

    • var n1 = 10, n2 = 20, n3 = 30
      

  • 同时声明多个变量，有的赋值，有的不赋值

    • var n1 = 100, n2, n3 = 300
      

• 变量的命名规则和命名规范

  • 命名规则：你必须遵守的，不然就会报错

    1. 一个变量只能由 数字 字母 下划线(_) 美元符($) 组成

    2. 一个变量不能由数字开头

    3. js 中的变量严格区分大小写

    • num 和 Num 和 NUm 和 NUM 这是四个变量

    • // 严格区分大小写
      var num = 100
      console.log(Num) // 报错, 告诉你 Num is not defined
      

    4. 不允许使用关键字或保留字
    • 关键字: JS 语法里面正在使用的关键字, 比如 var
    • 保留字: JS 语法规范里面现在没有再使用的关键字, 但是将来可能会使用的
    • 官方发布了一个标准, 告诉你, 这些我占下了, 你别用
    • 用了的话, 现在可能不会报错, 但是哪天一旦官方把他定义为关键字
    • 你的程序就会报错了

• 命名规范：建议你遵守的，因为大家都这样

  • 不要使用中文

  • 变量名尽量语义化，选择一个有意义的单词来作为变量

    • var age = 18
      var height = 180
      var shengao = 180
      var chengji = 99
      

  • 变量遵循驼峰命名法

    • 当一个变量名由多个单词组成的时候， 从第二个单词开始, 首字母大写

    • var useremail // 用户邮箱的意思
      var userEmail // 建议写成这个样子
      

JS的输出语法

• 因为js目前都是在html页面引入，并且运行在浏览器里面，所以我们js目前的输出都是输出在浏览器里面

• alert(输出的内容)

  • 在浏览器出现一个提示框，提示框里面是我写在 小括号内 的内容

  • 输出的内容规则：

    • 如果是纯数字，就可以不用加引号

      • alert(123456789)
        

    • 如果不是纯数字，就需要加引号

      • alert("number")
        

    • 因为如果不是纯数字，又不加引号，则会被当做变量（前提：定义了该变量）

      • var num = 123456789
        alert(num) //使用num这个变量
        

    • 输出一个纯数字，加上引号了，表示输出的内容是一段普通文本

      • alert("123456789")
        

  • 输出的内容出现报错

    • alert(number)
      

    • 输出一个非纯数字且没有加引号，控制台会输出一个报错信息，即：number（你使用的这个变量） is（是） not（没有） defined（定义）

• console.log(输出的内容)

  • 在浏览器控制台输出对应的内容，不会有弹框出现，console表示在控制台，log表示日志

  • 输出的内容规则和 alert( ) 是一样的，即：如果是纯数字，就可以不用加引号，如果不是纯数字，就需要加引号

  • 举例

    • 输出一个非纯数字，且没有加引号

      • console.log(number)
        

      • 如果没有声明过number这个变量，控制台就会出现报错

    • 输出一个非纯数字，且没有加引号（前提：定义了该变量）

      • var number = 1024
        console.log(number)
        

      • 因为提前定义了number这个变量，所以控制台输出的是1024

    • 输出一个非纯数字，且加了引号

      • console.log("number")
        

      • 表示我输出的就是number这一段普通文本，不是一个变量

• 小案例—交换变量

	var n1 = 5
    var n2 = 6

    // 使用代码的方式让 n1 变成 6, 让 n2 变成 5
    // 使用一个第三个变量来转介
    var n3 = n1 // 声明了一个 n3 变量, 把 n1 存储的值给了 n3, 此时 n3 就是 5
    n1 = n2 // 给 n1 变量重新赋值, 赋值为 n2 存储的值, 此时 n1 = 6
    n2 = n3 // 给 n2 变量重新赋值, 赋值为 n3 存储的值, 此时 n2 = 5

    console.log(n1)
    console.log(n2)