一、变量

  1. 变量是什么，有什么用
    • 变量是存储数据值的容器
  2. 声明(定义)变量

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

    二、js 变量命名规范

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

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

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

    三、变量有哪些类型

  8. 数字 Number 类型

    • 整数
    • 小数
    • 最大值和最小值 (了解)
    • NAN : 不是数字的数字
    • typeof 判断变量的类型
  9. String 类型 字符串
    • 有三种表达方式: 双引号, 单引号, 反引号
    • 推荐使用单引号
    • 如果字符串中含有引号, 单双引号同时使用
    • 字符串可以通过 + 进行拼接
  10. Boolean 类型 true 和 false
    • 只有true和false两个值
    • 变量命名一般用疑问句
  11. Undifined 类型 undefined
    用来表示声明了变量但未初始化(赋值)
  12. Object 类型
    1. 普通对象（无序集合）
      • 对象的属性是无序的, 那个属性在前在后都没关系
      • 读取属性的两种方式
      • 修改对象属性
    2. 数组（特殊对象,有序集合）
  13. Null 类型 null
    声明一个变量准备用来存储对象
  14. 课堂练习(见本文后面的资料)

资料 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. 变量是什么,有什么用?
    a.变量是存储数据值的容器
  2. 变量有哪几种数据类型,其中简单(基本)数据类型有哪些,复杂(引用)数据类型又有哪些?
    a.number string boolean
    b.object 数组
  3. undefined 和 null 有什么区别?
    a. undefined是声明了一个变量没有赋值,null是无效的

  4. 根据链接里迪丽热巴的个人信息, 使用一个对象来存放她的个人信息, 迪丽热巴个人介绍

    1. var information = {
    2.  chineseName:'迪丽热巴',
    3.  foreignName:'Dilraba Dilmurat',
    4.  Alias:['迪丽热巴','小迪','胖迪','热巴'],
    5. Nationality:'中国',
    6. nation:'维吾尔族',
    7. birthplace:'新疆维吾尔自治区乌鲁木齐市',
    8. birth:'1992年6月3日',
    9. Constellation:'双子座',
    10. bloodType:'AB型',
    11. height:'47kg',
    12. school:'上海戏剧学院',
    13. occupation:['演员','歌手'],
    14. company:'嘉行天下工作室',
    15. works:['阿娜尔罕','克拉恋人','三生三世十里桃花','烈火如歌','一千零一夜'],
    16. achievement:['2016年中英电影节最佳新人奖',
    17.             '2016年中国泛娱乐指数盛典新势力女艺人奖',
    18.             '2016年爱奇艺尖叫之夜新生代最具实力演员',
    19.             '2015年国剧盛典年度最受欢迎新人女演员',
    20.             '2014年中国时尚权力榜年度演艺圈新锐势力奖'],
    21. }

  5. 定义一个对象存放电影详情页面的数据

    1. var page = {
    2. homepageimg:'https://pic.maizuo.com/usr/movie/bed8f7edd414e5b8afd788be30b92f9f.jpg',
    3. movieTitle:'流浪地球',
    4. score:'8.00分',
    5. showTime:'2019-02-05上映',
    6. showArea:'中国大陆',
    7. totalLength:'100分钟',
    8. introduce:'太阳即将毁灭，人类在地球表面建造出巨大的推进器，寻找新家园。然而宇宙之路危机四伏，为了拯救地球，为了人类能在漫长的2500年后抵达新的家园，流浪地球时代的年轻人挺身而出，展开争分夺秒的生死之战',
    9.  performer:[
    10. {
    11.  img:'https://pic.maizuo.com/usr/movie/88357f5dd8a4e3736863f0dd04126b3b.jpg',
    12.  name:'郭帆',
    13.  position:'导演',
    14. },
    15. {
    16.  img:'https://pic.maizuo.com/usr/movie/1b1339cc8604c304f32db9033677559d.jpg',
    17.  name:'刘启',
    18.  movieName:'屈楚萧',
    19. },
    20.    {
    21.  img:'https://pic.maizuo.com/usr/movie/a491325a2e5f00a49f2b35c3012de6f5.jpg',
    22.  name:'王磊',
    23.  movieName:'李光洁',
    24. },
    25.    {
    26.  img:'https://pic.maizuo.com/usr/movie/5d5b3a1abc9d72fd7f2290b6b3bd07ca.jpg',
    27.  name:'吴孟达',
    28.  position:'演员',
    29. },
    30. ], 
    31. }

  6. 定义个数组存放电影列表数据信息(至少 5 条信息) ```javascript var list = [

]

  2. 7. 定义一个对象, 存放特惠页面信息
  3. ```javascript
  4. var preferential = {
  5.     mainPicture:'/img/hb1.c99f4fac.jpg',
  6.   commodity:'柳州鲜香螺蛳粉 300g*1',
  7.   introduce:'传统制粉手艺 甄选多重原料 地道广西风味',
  8.     originalPrice:'¥15.9',
  9.   presentPrice:'¥13',
  10.     headerphoto:['/img/tx1.6e193b13.jpg','/img/tx2.da2d4c60.jpg'],
  11. }
  1. 附加题: 有一个数组, var starList = [‘赵丽颖’, ‘迪丽热巴’, ‘佟丽娅’, ‘王丽坤’, ‘李丽珍’, ‘邓丽君’];;把数组成员输出到页面上. ```javascript

  2. var starList = [‘赵丽颖’, ‘迪丽热巴’, ‘佟丽娅’, ‘王丽坤’, ‘李丽珍’, ‘邓丽君’]

    1.  console.log(starList[0]),
    2.  console.log(starList[1]),          
    3.  console.log(starList[2]),          
    4.  console.log(starList[3]),          
    5.  console.log(starList[4]),                  
    6.  console.log(starList[5]),

    ``` 附加作业:

  3. 完成卖座网电影详情静态页面的编写

  4. 完成水果生鲜销售这个网站静态页面的编写
  5. 使用今天所学的知识去描述水果生鲜每个页面的信息