JavaScript的组成、书写方式、变量1_JS的组成 02_JS的书写方式 1. 行内式 2. 内嵌式 3. 外联式

1_JS的组成

 javascript由ECMAScript 和 DOM 和 BOM 三者共同组成 (面试可能会问)
 
 js就是通过固定的语法来操作 浏览器和 页面结构 来实现网页中的各种效果
 
 1. ES: 定义了javascript的语法规范, 描述了语言的基本语法和数据类型
    简单来说: JS 怎么写, 需要根据 ES 的规定
 2. DOM(Browser Object Model)文档对象模型
    * 有一套成熟的 操作 DOM 节点的 API方法, 通过 DOM 可以操作页面中的元素(其实就是标签)
    比如: 增加一个 DIV
    删除一个 span
    修改 h1 标签的内容
  3. BOM(Document Object Model)浏览器对象模型
    * 有一套成熟的 操作 BOM 的API，通过DOM可以操作页面元素 
    比如: 弹出框
    浏览器跳转
    获取浏览器相关信息
    获取浏览器尺寸

02_JS的书写方式

1. 行内式

   不推荐, 了解即可, 这种写法, 代码量多了, 不好维护
   
   案例：
   1.1 
   <div onclick='alert("点击了div")'></div>
   
   1.2
   在a标签的href属性中书写js代码
   <!-- 在js中 alert() 表示浏览器中的弹窗 -->
   <a href="javascript:alert('你点接了我');">点击</a>
   
   <!-- 此处的js写法常用于a标签的阻止浏览器默认跳转 -->
   <a href="javascript:;">点一下但是不跳转</a>
   
   <!-- 此处书写#表示在当前页面跳转 -->
   <a href="#">点一下</a>

2. 内嵌式

写demo推荐使用, 因为代码量少, 如果代码量多, 不推荐
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <!-- 内嵌的js代码常规位置1 在页面的head标签最后面 -->
  <!-- 1. js代码书写在script标签内  -->
  <!-- 2. 浏览器打开的页面的时候,会立即执行script标签中的js代码 -->
  <!-- 3. script标签中的type属性可以省略 -->
  <!-- 4. 一个页面中可以书写多对script标签,但是script不能嵌套使用 -->
  <script type="text/javascript">
    console.log('位置1')   
  </script>
  <script>
    console.log('位置2')    
  </script>  
</head>
<body>
  <!-- 内嵌的js代码常规位置2 在页面的body标签内最后面 -->
  <script>
    console.log('位置3')
  </script>
</body>
</html>

<!-- 写在html标签外的script标签,浏览器会自动将这个标签放到body标签内的最后面 -->
<script>
  console.log('位置4')
</script>

3. 外联式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <!-- script标签的src属性中 书写js文件的路径地址 -->
  <script src="./test.js">
    // 此处书写的代码不会执行
    alert('999')
  </script>
</body>
</html>

03_JS变量

1. 什么是变量?

变量 是计算机中存储数据的一个标识符, 通过这个标识符可以找到内存中存储的数据

2. js中如何定义变量？

     1. 定义变量
     语法: var 变量名
     2. 赋值变量
     变量名 = 值
     备注: JS 中 一个等号, 叫做 赋值号

  1. 表示定义一个变量
      var age // 表示定义了一个变量,名字为age
      var age = 100  // 表示定义了一个age变量并且赋值为100

  2. 一次定义多个变量
      var age,username,gender
      给已经定义的变量赋值
      age = 100

  3. 定义多个变量并赋值
  var age = 17,username='zs',gender='男'

  4. 使用定义的变量来接收 提问弹窗的返回值
  var age = prompt('你多大?');

  ! 注意 一个变量中只能存储一个值
  var age = 100 //定义age变量并赋值100
  age = 666 // 此时将666赋值给变量age中,则age中原来的值被覆盖了
  console.log( age )

3. 变量名的命名规则和命名规范

命名规则
    1. 变量名只能由 字母 数字 下划线_ $ 组成(变量名不能 以数字开头)
    var 6qwer = 100  //报错 变量名数字开头
    
    2. 不能使用 保留字 或 关键字 作为变量名
        1) 关键字: 在 js 中具有特殊含义的 字母组合
           var     if      for     function
           var var // 报错,不能使用关键字作为变量名
           
        2) 保留字: 在 js 中目前没有特殊含义, 但在将来的某个版本可能会用到, 所以此时也不能使用
        在 ES6 还没出现之前具有的保留字
           let     const   promise
          
    3. 变量名中不能有空格,不要使用中文
    4. 严格区分大小写的
     
命名规范(大家默认遵守的) 
    1. 变量名命名尽量语义化
    2. 如果变量名是由多个单词组成的,则尽量使用驼峰写法
      + 驼峰写法: 第一个单词首字母小写,后续的每个单词的首字母大写 bigbox -> bigBox