前言

  1. 调试代码,找出代码中的问题经常使用 debugger 来打断点, 而要能在准确位置打上断点, 就必须熟悉程序的执行流程
  2. 流程控制语句有三种: 顺序结构, 分支结构和循环结构

    (一) 顺序结构(默认)

1. 程序默认从上到下一句一句代码执行, 这就是顺序结构

2. 打断点操作

  1. <script>
  2.     var a = 2;
  3.     debugger;
  4.     console.log(a);
  5.     var b = 10;
  6.     console.log(b);
  7.     var c = 20;
  8.     console.log(c);
  9.     if (a>3) {
  10.         console.log('a>3');
  11.     } else {
  12.         console.log('a<=3');
  13.     }
  14. </script>

(二) 分支结构

1. if else

  1. <script>
  2.     var age = prompt();
  3.     // 先转成数字
  4.     age = Number(age);
  5.     debugger;
  6.     // age的值是NaN,结果为true, 否则为false
  7.     if (isNaN(age)) {
  8.         alert('请输入数字');
  9.     } else {
  10.         if (age < 0) {
  11.             alert('请输入大于或等于0的数字');
  12.         } else {
  13.             //  进行年龄分段的判断
  14.             if (age < 6) {
  15.                 alert('这是个婴儿');
  16.             } else if (age < 12) {
  17.                 alert('这是个少儿');
  18.             }else if (age < 17) {
  19.                 alert('这是个青少年');
  20.             }else if (age < 45) {
  21.                 alert('这是个青壮年');
  22.             }else if (age < 69) {
  23.                 alert('这是个中年人');
  24.             }else {
  25.                 alert('这是个老年人');
  26.             }
  27.         }
  28.     }
  29. </script>

2. 三目运算符

  1. <script>
  2.     var sex = '男';
  3.     var str;
  4.     if(sex === '男') {
  5.        str = '是个男的'; 
  6.     } else {
  7.         str = '是个女的';
  8.     }
  9.     // 三目运算符 判断条件为true取?后面的值,否则取:后面的值
  10.     var str2 = sex === '男'?'是个男的':'是个女的';
  11.     console.log(str);
  12.     console.log(str2);
  13. </script>

3. switch break

  1. //方法一
  2. <script>
  3.     var floor = prompt();
  4.     floor = Number(floor);
  6.     // if (floor == 1) {
  7.     //     alert('上1楼');
  8.     // } else if (floor == 2) {
  9.     //     alert('上2楼');
  10.     // }  else if (floor == 3) {
  11.     //     alert('上3楼');
  12.     // }  else if (floor == 4) {
  13.     //     alert('上4楼');
  14.     // } 
  16. //方法二
  17.     switch (floor) {
  18.         case 1:
  19.             alert('上1楼');
  20.             break;
  21.         case 2:
  22.             alert('上2楼');
  23.             break;
  24.         case 3:
  25.             alert('上3楼');
  26.             break;
  27.         case 4:
  28.             alert('上4楼');
  29.             break;
  30.         default:
  31.             alert('请输入楼层');
  32.     }
  33. </script>

(三) 循环结构

1. for 循环

  1. 标准 for 循环四要素 ```javascript for(var i=0;i<5;i++){ console.log(‘i=’,i); }

(1)循环变量初始值 var i=0; (2)循环条件 var i<5; (3)循环变量改变 i++; (4)循环体 console.log(‘i=’,i);

  2.    1. for 循环的运行规律

(1)第一次循环 1->2->4->3 (2)第二次循环 2->4->3 (3)第三次循环 2->4->3 …….. 当循环条件不满足,就会结束循环

  2.    1. continue 和 break
  3. ```javascript
  4. <script>
  5. console.log('-------------break------------')
  6.     for(var i=0;i<10;i++){
  7.         console.log('i=',i);
  8.         if (i===5) {
  9.             break;
  10.         }
  11.     }
  13.     console.log('-------------continue------------')
  14.     for(var j=0;j<10;j++){
  16.         // continue后的代码不再执行,继续进入下一轮循环
  17.         if (j===5) {
  18.             continue;
  19.         }
  20.         console.log('j=',j);
  21.     }
  22. </script>
  1. for循环的四个部分不是必须的

  2. 死循环

    1. <script>
    2. // 死循环
    3. for(;;){}
    4. </script

    2. 数组遍历和对象遍历

    1. <script>
    2. // 数组的遍历
    3. var filmList = [
    4.   {name: '电影1',time: 1233},
    5.   {name: '电影2',time: 1233},
    6.   {name: '电影3',time: 1233}
    7. ];
    9. // 一个简单的遍历
    10. for (var i=0;i<filmList.length;i++){
    11.   var film = filmList[i];
    12.   console.log('第'+(i+1)+'电影', film);
    13. }
    15. // 把电影名称拼接起来, 用逗号隔开
    16. var filmStr = '';
    17. for (var i=0;i<filmList.length;i++){
    18.   var film = filmList[i];
    19.   filmStr = filmStr + film.name + ',';
    21.   // console.log(filmStr); 
    22. }
    23. // 遍历之后的运算的结果
    24. console.log(filmStr);
    26. // 对象遍历
    27. var person = {name: 'laohu', age: 100};
    28. for (var p in person) {
    29.  console.log(p,person[p])
    30. }
    31. </script>

    例子

    1. <script>
    2. var performer = {
    3.   chineseName: "迪丽热巴·迪力木拉提",
    4.   english: "Dilraba Dilmurat",
    5.   alias: ["迪丽热巴", "小迪", "热巴", "胖迪"],
    6.   nationality: "中国",
    7.   nation: "维吾尔族",
    8.   birthplace: "新疆维吾尔自治区乌鲁木齐市",
    9.   birthDate: "1992年6月3日",
    10.   constellation: "双子座",
    11.   blood: "AB型",
    12.   height: 168,
    13.   weight: 47,
    14.   school: "上海戏剧学院",
    15.   occupation: ["演员", "歌手"],
    16.   agency: "嘉行天下工作室",
    17.   representative: ["阿娜尔罕", "克拉恋人", "三生三世十里桃花", "烈火如歌", "一千零一夜"],
    18.   achievements: [
    19.       "2016年中英电影节最佳新人奖",
    20.       "2016年中国泛娱乐指数盛典新势力女艺人奖",
    21.       "2016年爱奇艺尖叫之夜新生代最具实力演员",
    22.       "2015年国剧盛典年度最受欢迎新人女演员",
    23.       "2014年中国时尚权力榜年度演艺圈新锐势力奖"
    24.   ]
    25. }
    27. // 遍历对象属性
    28. for (var p in performer) {
    29.   console.log(p, performer[p]);
    30.   debugger;
    31. }
    32. </script>

    3. while 循环 和 do while 循环

    (四) 渲染商品列表

1. 模板字符串, 字符串中的变量使用${变量名}代替

  1. var username = 'laohu';
  2.    var str = `<div>${username}</div>`;
  3.    document.write(str);

2. 获取网页内的元素节点

  1. // 获取id为app的元素节点, 并将节点存放在变量app内
  2. var app = document.getElementById('app');

3. 给元素节点填充内容

  1. // 填充文本
  2. app.innerHtml = 'hello world';
  3. // 填充标签
  4. app.innerHtml = '<div>老胡</div>';
  5. // 字符串拼接变量
  6. var username = 'laohu';
  7. app.innerHtml = '<div>'+username+'</div>';  // 数据多的时候,拼接不方便
  1. <script>
  2.     var username = 'laohu';
  3.     var age = 100;
  4.     var str = `<div style="border:1px solid">用户名:${username} ----  年龄: ${age}</div>`;
  5.     document.write(str);
  6. </script>

4. 使用模板字符串拼接长串标签

资料 1: 课堂练习

  1. 计算 1 至 100 累加的值并输出到页面上

    1. <script>
    2.  // 作业1
    3.  var sum = 0;
    4.  for (var i = 1; i <= 100; i++) {
    5.      sum += i;
    6.  }
    7.  console.log('总和:', sum);
    8. </script>

  2. 使用for循环把数组的成员展示到页面上

    1. var fruits = ['香蕉', '苹果', '雪梨', '火龙果'];
    1. <script>
    2.  var fruits = ['香蕉', '苹果', '雪梨', '火龙果'];
    3.  // 方法1
    4.  for (var i = 0; i < fruits.length; i++) {
    5.      var item = fruits[i];
    6.      document.write(item + '</br>');
    7.  }
    8.  // 方法2, 这种方法更好, 只操作一次元素节点
    9.  var str = '';
    10.  for (var i = 0; i < fruits.length; i++) {
    11.      var item = fruits[i];
    12.      str = str + item + '</br>'
    13.  }
    14.  document.write(str);
    15. </script>

  3. 第2题中, 香蕉字体变黄色, 苹果字体变体红色, 雪梨颜色变白色, 火龙果颜色变粉红色

    1. <script>
    2.   var fruits = ['香蕉', '苹果', '雪梨', '火龙果'];
    3.   var str = '';
    4.   for (var i=0;i<fruits.length;i++){
    6.   }
    7. </script>
    1. // 优化版本//////////////////
    2. var fruits = ['香蕉', '苹果', '雪梨', '火龙果', '木瓜', '荔枝'];
    3.  var str = '';
    4.  for (var i = 0; i < fruits.length; i++) {
    5.      var item = fruits[i];
    6.      var color;
    8.      switch (item) {
    9.          case '香蕉':
    10.              color = 'yellow';
    11.              break;
    12.          case '苹果':
    13.              color = 'red';
    14.              break;
    15.          case '雪梨':
    16.              color = 'blue';
    17.              break;
    18.          case '火龙果':
    19.              color = 'pink';
    20.              break;
    21.          default:
    22.              color = 'black';
    23.      }
    24.      str += `<li style="color:${color}">${item}</li>`;
    25.  }
    26.  document.write(str);
    1. //进阶版//////////////////////
    2. <body>
    3.  <ul id="app">
    5.  </ul>
    6.  <script>
    7.      var fruits = ['香蕉','苹果','雪梨','火龙果'];
    8.      //var app=<title>Document</title>.<ul id="app"></ul>
    9.      var app = document.getElementById('app');
    10.      //声明为空
    11.      var str = '';
    12.      //i=0;i=香蕉','苹果','雪梨','火龙果']的 长度（length);i放后面先运算,再自增
    13.      for(var i=0;i<fruits.length;i++)
    14.      {
    15.          var item = fruits[i];
    16.          //str=str +
    17.          str +=`<li style="color:red;">${item}</li>`
    18.      }
    19.      console.log(str);
    20.      app.innerHTML = str;
    21.  </script>
    22. </body>

    ```javascript //完整版/////////////////////// 

  1. <ul id="list">
  2.     <!-- <li>
  3.         <div>
  4.             <p class="f16">香蕉</p>
  5.             <p class="f12">海南</p>
  6.         </div>
  7.         <div class="f12">四季</div>
  8.     </li> -->
  9. </ul>
  12. <script>
  13.     var fruits = [{
  14.         name: '香蕉',
  15.         season: '四季',
  16.         prodAdrr: '海南'
  17.     }, {
  18.         name: '苹果',
  19.         season: '夏天',
  20.         prodAdrr: '山东'
  21.     }, {
  22.         name: '雪梨',
  23.         season: '冬季',
  24.         prodAdrr: '广西'
  25.     }, {
  26.         name: '火龙果',
  27.         season: '春节',
  28.         prodAdrr: '广东'
  29.     }];
  31.     var str = '';
  32.     for (var i = 0; i < fruits.length; i++) {
  33.         var item = fruits[i];
  34.         str += `<li>
  35.                     <div>
  36.                         <p class="f16">${item.name}</p>
  37.                         <p class="f12">${item.prodAdrr}</p>
  38.                     </div>
  39.                     <div class="f12">${item.season}</div>
  40.                 </li>`;
  41.     }
  43.     document.getElementById('list').innerHTML = str;
  44. </script>

  2. 4. 编程题
  3. ```javascript
  4. 要求:
  5. (1)收集本小组成员个人信息, 做成一个数组, 并且使用for循环把成员信息输出到网页上
  6. (2)成员信息包含姓名, 年龄, 性别, 籍贯, 爱好
  7. (3)可以设置适当的样式,做成移动端动态页面

作业(周五&周六)

  1. 作业1: 渲染电影列表, 列表数据在本日代码的data文件夹内
  2. 作业2: 卖座网详情静态页面(每个人都要完成)

  3. 作业3: 团队合作写生鲜网静态页面 http://fresh.huruqing.cn/product/list

    1. (1)共七个静态页面:首页, 详情页, 分类页面, 购物车页面(登录才能查看), 个人中心页面, 设置页面, 登录页面
    2. (2)组长负责安排任务: 比如谁负责公共部分, 谁负责首页, 谁负责购物车页面
    3. (3)人数少的小组,至少每个人写两个页面,有能力者可多写

  4. 使用语雀总结本周所学知识, 把不明白的知识点搞明白