页面由三部分组成

• HTML 超文本编辑
• CSS 层叠样式表
• JS 轻量级脚本语言

JS由三部分组成

• ECMAScript js[语法] 变量 条件 判断 循环 数据类型；兼容性很好 没问题
• DOM document object model 文档对象模型 增删改查 兼容性问题很多
• BOM browser object model 浏览器对象模型 不兼容 不能解决

常用快捷键

• 复制 ctrl + D;

• 强制换行 ctrl+enter；command+enter;

• 快速生成列表 ul>li*6>a{列表$} + Tab;

• 收缩代码 ctrl + -/+;

• div.box + Tab;

• -#header+#main+#footer;

• -#header+(#main>.left.right)+#footer;

• w200+h200+bg#ccc +Tab;
  width: 200px;
  height: 200px;
  background: #cccccc;

• c +Tab
  color: #000;

• psa +Tab
  position: absolute;

• psr +Tab
  position: relative;

• psf +Tab
  position: fixed;

• mg20 +Tab
  margin:20px;

• pa20 +Tab
  padding: 20px;

• mgl/r/t/b/20 +Tab
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;

• pa/r/t/b20 + Tab

        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
  

• dib +Tab
  display: inline-block;

• di +Tab
  display: inline;

• db +Tab
  display: block;

• fz20 + tab;
  font-size: 20px;

• lh30px + Tab;
  line-height:30px ;

• fl + tab ;
  float: left;

• fr + tab ;
  float: right;

• tac+ tab;
  text-align: center;

• alt 选两个

• script:src + tab

CSS 引入方式

• 行内
• 内嵌
• 外联
• 导入

JS 引入方式

• 行内
• 内嵌 script标签内部
• 外链 script:src + tab 引入

js思路

• 拿到谁 获取元素
• 添加事件
• 做什么事

JS作用

• JS操作CSS

对象具有的两个特征：属性和方法；

属性 和 方法的区别 ：属性没括号 ，方法有括号；

this 是谁:

• 当函数被调用的时候，点前面是谁 ，this就是谁;
• 当函数被调用的时候，没有点 ，this就是window;
• 当元素身上的事件被触发时，会触发一个函数，函数中的this指向当前被触发事件的这个元素

输出方式--调试代码

• alert 弹出框
• confirm() 弹出框 返回值是布尔值 true / false
• console.log() 打印 在控制台
• console.dir() 打印属性和方法
• console.table() 把对象以表格的形式输出 -- 基本不用
• document.write 在页面输出
• innerHTML 输出元素包裹的内容 innerText 输出文本

命名方式：匈牙利命名法 又称 驼峰式命名法

• 除了第一个单词外 从第二个单词开始 每个单词首字母大写
• 常用的命名前缀
  • a 数组 aDiv 获取一组元素对象 arr array ary
  • o 对象 oDiv 获取一个元素对象 obj普通对象
  • s 字符串 string
  • n 数字 number
  • b 布尔值 boolean

数据类型

1.基本数据类型
五种:
- string
- number
- boolean
- null
- undefined
2.引用数据类型
两类:
- 对象数据类型 array 普通对象object Date RegExp ...
- 函数数据类型 function(){}
3.区别：
- 基本数据类型 是对值的引用
- 引用数据类型 是对地址的引用

循环

• for 循环四部曲
  1.定义
  2.条件
  3.语句
  4.自增

  
  
  

  for循环图解

• 判断

  • if ...else if...else

    if(num==0){
       alert('0')
    }else if(num==1){
        alert('1')
    }else if(num==2){
        alert('2')
    }else{
        alert('3')
    }
  

  • switch...case..break

  switch(num){
          case 0:
              alert(0);
              break;
          case 1:
              alert(1);
              break;
          case 2:
              alert(2);
              break;
          default:
              alert(3);
              break;
      }