前端-王隆-20230511

• js基础：js的基本语法，我们学习的这些东西只能做一些数学运算
  
  • js的三个构成部分
    
    • ECMAScript:语法规范
      
      • 不同的版本
        
        • ES3
          
        •   ES4 - 从未发布过。
          
        • ES5
          
        • ES6 - ECMAScrit6 - ECMAScrit2015 - 重大的改变
          
        • ES7 - ECMAScrit7 - ECMAScrit2016 - 往后的版本就是一些很小的更新
          
    • DOM
      
      • API
        
    • BOM
      
    • 
      
  • web三层
    
    • 结构层 HTML
      
    • 样式层 CSS
      
    • 行为层（交互层）
      
  • 创建方式
    
    • 行内
      
    • 内联
      
    • 外链（推荐使用）
      
  • 变量
    
    • var
      
    • let（ES6中新增的）
      
      • 块作用域 {}
        
      • 不存在提升
        
      • 不能重复定义
        
    • const（ES6中新增的）
      
      • 常量
        
  • 规范
    
    • 变量是由数字、字母、_、$构成的
      
      • 不能以数字开头
        
      • 不推荐使用中文
        
      • 使用有语义的英文单词
        
      • 驼峰命名法:lastName
        
      • 关键字、保留字不要去使用
        
  • 为假的情况
    
    • 0
      
    • ''  空字符串
      
    • null
      
    • undefined
      
    • NaN
      
    • false
      
  • 函数    js学习的核心
    
    • 相同代码块的封装
      
    • 创建方式
      
      • function fn(a,b){}  函数声明式
        
      • let fun = function(){} 函数表达式
        
      • new Function() 构造函数方式
        
    • 参数
      
      • 形参
        
      • 实参
        
    • 返回值 return
      
      • 结束函数的执行
        
      • 返回值
        
      • 后面继续拓展
        
  • 数据类型
    
    • 简单（基本）数据类型
      
      • Number
        
      • String
        
      • Boolean
        
      • null
        
      • undefined
        
    • 复杂（引用、地址、对象）数据类型
      
      • Object
        
      • Array
        
      • Function
        
• 获取元素的方法
  
  • 1、使用它的id获取
    
    • getElementById(id) 返回值，就是这个元素对象，它具有唯一性
      
    • 例
      
  • 2、使用它的class获取它
    
    • getElementsByClassName(class) 返回值，就是这些元素对象的集合
      
    • 例
      
  • 3、使用它的标签名获取它
    
    • getElementsByTagName(tagname) 返回值，就是这些元素对象的集合
      
    • 例
      
  • 4、querySelector(css选择器)
    
    • 注意：只会获取到符合结果的第一个
      
    • 例
      
  • 5、querySelectorAll(css选择器)
    
    • 注意：结果是NodeList，获取其中的某一个要使用下标
      
    • 例
      
• 修改元素的样式
  
  • 通过style属性添加的样式是行内样式 - 优先级高
    
  • 例
    
• 特殊元素
  
  • 例
    
• 添加多个样式的操作
  
  • 
    
• innerHTML属性
  
  • 可读
    
    • console.log(div.innerHTML)
      
    • console.log(div.innerText)
      
  • 可写
    
    • div.innerHTML = '张三四'
      
    • div.innerText = '张三四'
      
  • 例
    
• 事件的基本使用
  
  • js是由事件驱动的
    
  • 事件的绑定（注册）
    
  • 事件的三要素
    
    • 事件源
      
    • 事件类型 onclick点击事件
      
    • 执行的处理程序
      
  • 例
    
  • 
    
• 模板字符串
  
  • ES6中新增加的语法：模板字符串
    
  • `XXXXXX,XX${变量},XXXXXXX`
    
  • 例