前言

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

(一) 顺序结构(默认)

  1. 程序默认从上到下一句一句代码执行, 这就是顺序结构
  2. 打断点操作

(二) 分支结构

  1. if else
  2. 三目运算符
  3. switch break

(三) 循环结构

1. for 循环

  1. 标准 for 循环四要素 ``` 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.    1. for循环的四个部分不是必须的
  4.    1. 死循环
  5. <a name="vBURv"></a>
  6. ### 2. 数组遍历和对象遍历
  7. <a name="yjtn9"></a>
  8. ### 3. while 循环 和 do while 循环
  10. <a name="9d7e7d05"></a>
  11. ## (四) 渲染商品列表
  13. 1. 模板字符串, 字符串中的变量使用${变量名}代替
  14. 1. 获取网页内的元素节点

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

  2. 3. 给元素节点填充内容

// 填充文本 app.innerHtml = ‘hello world’; // 填充标签 app.innerHtml = ‘

老胡
‘; // 字符串拼接变量 var username = ‘laohu’; app.innerHtml = ‘
‘+username+’
‘; // 数据多的时候,拼接不方便

  2. 4. 使用模板字符串拼接长串标签
  4. <a name="be3305fa"></a>
  5. ## 资料 1: 课堂练习
  7. 1. 计算 1 至 100 累加的值并输出到页面上
  8. 1. 使用for循环把数组的成员展示到页面上
  9. ```javascript
  10.  var fruits = ['香蕉', '苹果', '雪梨', '火龙果'];

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

    1.  var fruits = ['香蕉', '苹果', '雪梨', '火龙果', '木瓜', '荔枝'];
    2.  var str = '';
    3.  for (var i = 0; i < fruits.length; i++) {
    4.      var item = fruits[i];
    5.      var color;
    7.      switch (item) {
    8.          case '香蕉':
    9.              color = 'yellow';
    10.              break;
    11.          case '苹果':
    12.              color = 'red';
    13.              break;
    14.          case '雪梨':
    15.              color = 'blue';
    16.              break;
    17.          case '火龙果':
    18.              color = 'pink';
    19.              break;
    20.          default:
    21.              color = 'black';
    22.      }
    23.      str += `<li style="color:${color}">${item}</li>`;
    24.  }
    25.  document.write(str);

  2. 编程题

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

作业(周五&周六)

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

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

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

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