一、变量

1. 变量是什么，有什么用

  • 变量是存储数据值的容器

    2. 声明(定义)变量

    3. 赋值, 再次赋值会覆盖原值

    1. // 变量的声明
    2. var username;
    3. var age; 
    4. // 变量的赋值
    5. username = '张三';
    6. age = 18;
    7. // 变量的声明和赋值同时进行
    8. var username2 = '李四';
    9. console.log(username2);  // 李四
    10. username2 = '王五';
    11. console.log(username2);  // 王五
    12. // 下面是错误做法,不应该重复声明
    13. var username2 = 'chenliu';

    二、js 变量命名规范

    1. 区分大小写(html 不区分大小写)

    2. 标识符(比如变量名称等) (1) 以字母、下划线、$开头 (2) 其他字符可以是字母、下划线、$或数字 (3) 驼峰式:小写字母开头,第二个打次首字母大写

    3. 注释 单行注释 多行注释

    4. 关键字和保留字 关键字:系统在使用 保留字:系统将来可能用到 _ 不能作为标识符来使用 * 用来作标识符就会报错

    1. <body>
    3. <div>asdfasdfasdf</div>
    4. <DIV>ASDFASDFASDFASDF</DIV>
    5. <div data-cardId="654654654654654645646466">必踩的坑</div>
    6. <script>
    7.    // 变量 a 和 A 是两个不相同的变量
    8.    var a = 100;
    9.    var A = 200;
    10.    // 驼峰式命名: 小写字母开头,第二个单词首字母大写
    11.    var cartId;
    12.    var cartList;
    13.    // 关键字和保留字,使用了就会报错
    14.    var continue;
    15.    var if;
    16. </script>

    三、变量有哪些类型

1. 数字 Number 类型

  • 整数
  • 小数
  • 最大值和最小值 (了解)
  • NAN : 不是数字的数字

  • typeof 判断变量的类型

    1. <script>
    2. // 数字类型: 整数
    3. var count = 40;
    4. var price = 3.5;
    5. // 最大值和最小值
    6. var maxValue = Number.MAX_VALUE;
    7. var minValue = Number.MIN_VALUE;
    8. // NaN 不是数字的数字 Not a Number
    9. var aaa = NaN;
    10. console.log(typeof count);  // number
    11. console.log(typeof aaa);  // number
    12. </script>

    2. String 类型 字符串

  • 有三种表达方式: 双引号, 单引号, 反引号

  • 推荐使用单引号
  • 如果字符串中含有引号, 单双引号同时使用

  • 字符串可以通过 + 进行拼接

    1. <script>
    2. // 方式1: 双引号
    3. var username = "张三";
    4. // 方式2: 单引号
    5. var password = '123456';
    6. // 方式3: 反引号(模板字符串)
    7. var text = `我们是中国人`;
    9. // 字符串中包含引号
    10. var text1 = '我们是"中国人"';
    12. // 字符串拼接
    13. var firstName = 'Tom';
    14. var lastName = 'Jame';
    15. var fullName = firstName + lastName;
    16. console.log('fullName:',fullName);
    17. </script>

    3. Boolean 类型 true 和 false

  • 只有true和false两个值

  • 变量命名一般用疑问句
    1. <script>
    2. var isOpen = true;
    3. var opened = false;
    4. var finished = true;
    5. console.log(typeof isOpen); // boolean
    6. console.log(typeof opened); // boolean
    7. </script>

    4. Undifined 类型 undefined

    用来表示声明了变量但未初始化(赋值)
    1. <script>
    2. var username;
    3. console.log(username); // undefined
    4. var username2 = 'huruqing';
    5. console.log(username2);  
    6. </script>

    5. Object 类型

  1. 普通对象（无序集合）

    • 对象的属性是无序的, 那个属性在前在后都没关系
    • 读取属性的两种方式
    • 修改对象属性
      1. <script>
      2. // 定义对象
      3. var girlFriend = {
      4. height: 180,
      5. age: 18,
      6. sex: '女',
      7. }
      8. // 读取对象属性, 方式1  常用
      9. console.log('年龄:',girlFriend.age);
      10. console.log('身高:',girlFriend.height);
      11. // 读取对象属性, 方式2  偶尔使用
      12. console.log('身高:',girlFriend['age']);
      13. // 修改对象属性
      14. girlFriend.age = 60;
      15. console.log('修改后的年龄', girlFriend.age);
      16. </script>

  2. 数组（特殊对象,有序集合）

    1. <script>
    2. // 1.数组可以存放任意类型的是变量
    3. var arr = [111,'a', true, {a:2}];
    4. // 2.一般情况下,数组成员都是同一个类型
    5. var ages = [10,20,30,40];
    6. /**
    7. * 3.数组成员的读取
    8. * 第一个成员 ages[0];
    9. * 第二个成员 ages[1];
    10. */
    11. console.log('第一个成员',ages[0]);
    12. console.log('第二个成员',ages[1]);
    13. console.log('第三个成员',ages[2]);
    14. console.log('第四个成员',ages[3]);
    15. console.log('第五个成员',ages[4]); // 没有第五个成员,它的值是: undefined
    16. debugger;
    17. // 4.数组的长度
    18. console.log('数组的长度:',ages.length);
    19. // 5. 读取最后一个成员
    20. var len = ages.length;
    21. console.log('最后一个成员:',ages[len-1]);
    22. </script>

    6. Null 类型 null

    声明一个变量准备用来存储对象
    1. <script>
    2. var obj = null;
    3. console.log(typeof obj);  // object
    4. </script>

    资料 1: 课堂练习

  1. 数据类型有哪几种(提问)
    1. 数字, 字符串, 布尔, 对象, undifined, null
  2. 什么时候数据类型会是 undefined?
    1. 声明了变量, 但是没有赋值, 变量的值就是undefined
  3. 字符串有哪几种形式,一般用那种?
    1. 单引号, 双引号, 反引号(模板字符串)
  4. 常见的数字有哪些?
    1. 整数, 小数, 最大值和最小值
  5. var obj = {name: ‘王菲’, age: 40} ,用两种方式在控制台打印属性值 name 的值
    1. console.log(obj.name);
    2. console.log(obj[‘name’]);
  6. 数组练习
    (1) 打印对象里数组的长度
    a. console.log(result.list.length);
    b. var arr= result.list; console.log(arr.length);
    (2) 打印数组最后一个成员的所有属性值
    console.log(result.list[result.list.length-1]); // 不太好的做法
    // 获取数组的长度
    var len = result.list.length;
    // 获取最后一个成员
    var item = result[len-1];
    // 打印该成员的所有属性
    console.log(item.categoryId);
    console.log(item.name);
    console.log(item.iconUrl);
    1. var result = {
    2. "code": 666,
    3. "msg": "success",
    4. "list": [{
    5.  "categoryId": 145,
    6.  "name": "时令鲜果",
    7.  "iconUrl": "/img/fresh/other/r1.png"
    8. }, {
    9.  "categoryId": 243,
    10.  "name": "海鲜水产",
    11.  "iconUrl": "/img/fresh/other/r2.png"
    12. }, {
    13.  "categoryId": 279,
    14.  "name": "家禽蛋",
    15.  "iconUrl": "/img/fresh/other/r3.png"
    16. }, {
    17.  "categoryId": 346,
    18.  "name": "地方农产",
    19.  "iconUrl": "/img/fresh/other/r4.png"
    20. }, {
    21.  "categoryId": 436,
    22.  "name": "百果园公司",
    23.  "iconUrl": "/img/fresh/other/r5.png"
    24. }, {
    25.  "categoryId": 357,
    26.  "name": "农品茗茶",
    27.  "iconUrl": "/img/fresh/other/r6.png"
    28. }, {
    29.  "categoryId": 6,
    30.  "name": "五谷杂粮",
    31.  "iconUrl": "/img/fresh/other/r7.png"
    32. }, {
    33.  "categoryId": 311,
    34.  "name": "牛羊肉",
    35.  "iconUrl": "/img/fresh/other/r8.png"
    36. }]
    37. }

    资料 2: 作业

作业1:

把老师上课的代码全部自己敲一遍到三遍, 把有疑问的地方记录下来

作业2:

作业要求: 把答案写在语雀上, 提交作业发语雀链接即可

  1. 变量是什么,有什么用?
  2. 变量有哪几种数据类型,其中简单(基本)数据类型有哪些,复杂(引用)数据类型又有哪些?
  3. undefined 和 null 有什么区别?
  4. 根据链接里迪丽热巴的个人信息, 使用一个对象来存放她的个人信息, 迪丽热巴个人介绍
  5. 定义一个对象存放电影详情页面的数据
  6. 定义个数组存放电影列表数据信息(至少 5 条信息)
  7. 定义一个对象, 存放特惠页面信息
  8. 附加题: 有一个数组, var starList = [‘赵丽颖’, ‘迪丽热巴’, ‘佟丽娅’, ‘王丽坤’, ‘李丽珍’, ‘邓丽君’];;把数组成员输出到页面上.

附加作业:

  1. 完成卖座网电影详情静态页面的编写
  2. 完成水果生鲜销售这个网站静态页面的编写
  3. 使用今天所学的知识去描述水果生鲜每个页面的信息