页面有三部分组成

• HTML：超文本标记语言。
• CSS：层叠样式表。
• JS：轻量级的脚本语言。

JS由三部分组成

• ECMAscript：JS的语法，包含变量，循环，条件判断，数据类型等等等等，没有兼容性问题；
• DOM 全称：Document object model 文档对象类型，会
  出现很多兼容性问题，程序员可以解决。
• BOM 全称：browser object model 浏览器对象类型，不兼容，不能解决。

常用的快捷键

• 强制换行 ctrl+enter；
• webstrom中快速打出代码
  • ul>li>p*2+Tab
• 把代码收缩展开
  • ctrl+“+”展开；
  • ctrl+“-”收缩；

css引入的三种方式

• 行内式：style="";
• 内嵌式：<style></style>
• 外链式：<link href="" rel="stylesheet" type="text/css">

js引入的三种方式

• 行内式：onclick="alert('1234')" 点击事件。onmouseover鼠标移入显示
• 内嵌式：<script></script>
• 外链式：<script src="...js"></script>

js的编程思路

• 1.找到谁
• 2.给某某加什么事件
• 3.干什么事

作业

css题

左边容器的宽度固定为200px，右边容器自适应，请用三种方法？

• 1.左边用浮动，右边用margin-left:200px;
• 2.左边用绝对定位，右边用margin-left:200px；
• 3.两边都用浮动，父级clear:both;清除浮动；

只有一个按钮，点击该按钮，div显示，再点击改按钮，div隐藏；

<script>
    var oBt=document.getElementById('bt');
    var oDiv=document.getElementById('div');
    oBt.onclick=function () {
        if (oDiv.style.display=='block'){
            oDiv.style.display='none';
        }
        else
        {
            oDiv.style.display='block';
        }
    }
</script>

    oBt.onclick = function () {
        switch (oDiv.style.display) {
            case 'block':
                oDiv.style.display = 'none';
                break;
            default:
                oDiv.style.display = 'block';
                break;
        }
    }

   var oBt = document.getElementById('bt');
    var oDiv = document.getElementById('div');
    var bOk = true;
 oBtn.style.display{
     if(bOk){
         oDiv.style.display='none';
     }
     else{
         oDiv.style.display='block';
     }
     bOk=!bOk;
 }

   var oBt = document.getElementById('bt');
    var oDiv = document.getElementById('div');
    var bOk = true;
 oBt.onclick=function () {
        if(bOk){
            oDiv.style.display='none';
        }
        else {
            oDiv.style.display='block';
        }
        bOk=!bOk;
    };

对象具有两个特征

• 1.属性
• 2.方法
  属性和方法的区别：属性没有括号，方法有括号；

this小结

• 当函数被调用的时候，看前边是否有“·”，点前边是谁，this就是指谁；
• 当函数被调用的时候，如果前边没有点，说明被window调用，this就是值window；
• 当元素身上的事件被触发的时候，会执行一个函数，函数中的this指向当前被触发事件的这个元素；

例如：oDiv.onclick=function(){}
中this就是指oDiv。

输出方式（帮助调试和测试代码）

• alert() 弹出框；
• confirm() 会有返回值，true，false；
• console.log() 打印出来，在控制台上输出；
• console.dir() 打印出来，在控制台上输出对象的属性和方法，既输出对象的详细信息；
• document.write() 在页面上输出信息；
• innerHTML输出元素包含的内容
• innerText 输出文本
• consle.table() 在控制台上让对象以表格的形式输出；

命名规范

匈牙利命名法也叫作驼峰式命名法

• 除了第一个单词外，从第二个起，每个单词的首字母大写；
• 常用的命名前缀
  • a 数组
  • o 对象
  • s 字符串
  • n 数字
  • b布尔值

数据类型：

• 基本数据类型
  • 字符串 string ，数据 number，布尔值 Boolean，null，undefined
• 引用数据类型
  • 对象数据类型
    • 普通的对象 object，数组 array，date
  • 函数数据类型
    • function(){}
• 基本数据类型和引用数据类型的区别
  • 基本数据类型是对值得引用，引用数据类型是对地址的引用

循环

• 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;
      }
  

隔行换色，两种思路

• 条件判断：if...else if...else.... switch...case break....

var aLi=document.getElementsByTagName('li');
     for(var i=0;i<aLi.length;i++ )
     {
     if(i%2==0){
     aLi[i].style.background='red';
     }
     else{
     aLi[i].style.background='pink';
     }
     }

var ali = document.getElementsByTagName('li');
    for (var i = 0; i < ali.length; i++) {
        switch (i % 2) {
            case 0:
                ali[i].style.background='yellow';
                break;
            default:
                ali[i].style.background='green';
                break;
        }
    }

• 用%的思想：
  • 小技巧：有几种情况，就%几；