一、课程回顾
番外篇:Github静态网页搭建方法。
【理论讲解】
在信息技术高速发展的现在,我们可以这样理解,对人类来说的所有的信息都是对计算机来说的数据,因此可以想象,计算机可以涵盖的数据的多样化、丰富化。
一切从命名开始
以人名举例讲解:
我们对于一个人的概念,可以说是一堆属性和关系的集合。包括:姓名、身高、体重、年龄……
先取名再生小孩——把名字和小孩关联上
用名字来操纵人——小明,快去写作业。
从姓名开始思考——丰富的属性、多样关系
名字和目标——小明是一个具体的人,目标是一堆属性、关系等。
关联名字和目标——小明不等于一个具体的人,“小明”这个名字,只是一组数据的集合。
各种描述递进:用格式化方式、符号化方式、伪代码方式描述“小明”,越来越接近代码的呈现。——能看懂伪代码了就能看懂代码了
我们是如何识别人的?——记住一个人的名字与其属性、关系的对应信息。
程序的目标地是什么?——“处理数据、得到结果”
首先需要对数据进行命名(一切从命名开始):
与C、Java等其他编程语言不同,JavaScript里所有数据,不区分类型,都用“var”表示
语句:var output = “Hello, JS”
代表:1..声明:var output;2.定义:output = “Hello, JS”
即:声明这个变量,变量名output,再定义这个变量,给这个变量赋值。
内行话——“先声明再定义”
命名方式:常用驼峰命名法,(还有带下划线的,具体内容自己了解)
【实操部分】
分别在浏览器和Node环境运行样例,尝试修改内容,观察显示效果,对运行环境有初步感受。
【心法记录】
1、本课程重点是编程思想的讲解
2、代码不重要,掌握理解问题、解决问题的方法最重要。
3、一切从命名开始——体会:对于一个新的要表达、运用的信息或数据,名字起得好一定程度上代表思路、概念清晰。
4、学会、擅用画图的方法来进行思考。
二、课程作业
【第二次作业】——变量和值
昨天我帮你们梳理了变量和值之间的关系。下面梳理一些知识点供大家参考,好好利用周末的时间把这块啃下来。
1.多样化的数据格式(数字、文本、布尔、对象、数组)
2.多样化的数据格式的操作方式。
以上内容网上有很多教程,如果你想买书,我推荐“JavaScript权威指南—淘宝前端团队翻译的那本”
作业要求-1.熟读getting-started-with-javascript/study/lesson2/smaple_code.js代码。用node环境和浏览器环境运行一下代码(注意:浏览器运行请使用my_personal_info_page.html)
作业要求-2.写一篇课程总结,题目为:编程中为什么会有丰富化的数据格式?(我可能跑题了)
我的作业
在信息化社会,数据几乎无所不包,所有可以想象到的信息都可以用数据来记录、存储。在快速更替的时代,我们希望有更高效、高质的工作、学习以及生活,丰富多样的实用软件、精准高效的数据分析处理工具都再发挥着越来越重要的作用。
如此纷繁的数据交给计算机来处理,需要有规范的数据格式,即数据类型,以便处理能力更有的放矢、更高效。
一.大类
在JavaScript中数据类型分为两类:1.原始类型、2.对象类型。
原始类型:包括数字、字符串、布尔值。
有两个特殊的原始值:null(空)、undefined(未定义)。
对象类型:对象(object),数组(array)是一种特殊对象,函数是另一种特殊对象。
二.具体说说:
1.原始类型:
1-1.数字:
1-1-1. JavaScript的数字均采用IEEE 754标准定义的64位浮点格式表示,不区分整数值和浮点数值(与C和Java等不同),需要注意的是:JavaScript的实际操作,整数是基于32位整数。
1-1-2. JS程序中直接出现的数字称为数字直接量(numeric literal),包括整型直接量、浮点型直接量。
1-1-2-1. 整型直接量:包括十进制整型直接量、十六进制整型直接量。某些JS的实现支持八进制整型直接量,但不保证通用,因此一般不要使用八进制整型直接量。
1-1-2-2. 浮点型直接量:包括传统实数写法,例如:3.14、1.789;指数记数法,例如:6.02e23、2.987653E-32。浮点型直接量语法表示为:[digits][.digits][(E|e)[(+|-)]digits]
1-1-3. JS的算术运算:
1-1-3-1. 基本运算符包括加(+)、减(-)、乘(*)、除(/)和求余(%)
1-1-3-2. 复杂的算术运算:通过Math对象的属性定义的函数和常量来实现,例如:Math.pow(2,3) ->8,2的3次幂;Math.ceil(.6)->1,向上求整;Math.floor(.6) ->0,向下求整。
1-1-4. JS的算术运算在溢出(overflow)、下溢(underflow)或被零整除时不会报错。
1-1-4-1. 溢出(overflow):即当数字运算结果超过了JS所能表示的数字上限,正数时以无穷大(Infinity)表示、负数时以负无穷大(-Infinity)表示。
1-1-4-2. 下溢(underflow):即当运算结果无限接近于零并比JS能表示的最小值还小,此时JS会返回0。还有个“负零”概念,一般可忽略。
1-1-4-3. 被0整除,返回无穷大(Infinity)或负无穷大(-Infinity),0除以0、无穷大除以无穷大、给负数作开方或算术运算符与不是数字或无法转换为数字的操作数一起使用时,都将返回非数字,表示为NaN(not-a-number)。
NaN有一点特殊:它和任何值都不相等,包括自身。x==NaN不能表示x是NaN,可通过x!=x判断,当且仅当x为NaN时,x!=x为true。
1-1-5. 二进制浮点数和四舍五入错误
在JS的数值范围内,浮点数只能表示有限个数实数,而不是一般理解的无数个,会有些真实值只能近似表示。这是由于浮点数表示法是二进制表示法引起,只能精确的表示2的次方分之一的值,如:1/8、1/1024,而我们常会使用十进制分数,如:1/10、1/1000,二进制浮点数无法精确表示类似0.1这样简单的数字。会造成运算的尴尬,如0.3-0.2并不等于0.2-0.1。
这不是JS中才会出现,好在精确值非常精确,一般任务都能胜任,只有在比较两个数大小事才会遇到。以后的版本或许会针对此做改进。如涉及重要金融计算,建议使用“分”而不是“元”作单位。
1-1-6. 日期和时间的表示:JS语言包括Date()构造函数,可以创建包括年月日时分秒的对象,进行日期、时间的特定值提取、使用,有些特殊规范,比如月份从0开始。
1-2. 字符串:
1-3. 布尔值:boolean,指代真或假、开或关、是或否,类型值只有两个:true和false。用于编程语言的控制结构。通常与比较语句结合使用,举例:
If(a==4)
b=b+1;
else
a=a+1;
这段代码判断a是否等于4,等于时,b加1;不等于时,a加1。
关于转换:任意JavaScript的值都可以转换为布尔值,其中undefined、null、0、-0、NaN、“”(空字符)六个会转换为false(有称“假值”(falsy value)),其他值均会转换为true(有称“真值”(truthy value))。
布尔值支持三个布尔运算符、一个方法:”&&”(AND)、”||”(OR)、”!”(NOT) 以及toString()
2.两个特殊的原始值:null(空)、undefined(未定义)。它们不是数字、字符串、布尔值这些原始类型,通常代表了各自特殊类型的唯一的成员。它们都不包含任何属性和方法。
3. 对象类型:对象(object),数组(array)是一种特殊对象,函数是另一种特殊对象
3-1.对象(object):(还需学习理解、补充)
3-2.数组(array):是值的有序集合。每个值叫做一个元素,每个元素在数组中有一个位置索引数。数组元素可以是任意类型,也不一定是常量。数组能够表达不同类型的组合信息,比如一个人的相关信息等。
3-2-1.创建数组:
(1)数组直接量:
没有元素的数组:var empty=[];
有3个元素的数组:var array1=[1,2,3];
3个不同类型的元素和结尾的逗号:var array2=[1,“a”,true,](数组直接量语法允许有可选的结尾的逗号,所以是三个元素而非四个)
(2)调用构造函数Array():
没有任何元素的空数组:var a = new Array()
指定长度作为参数:var a = new Array(10)——没有存储值及索引,预分配了一个数组空间。
显式指定方式:var a = new Array(5,4,3,“test”);——这种方式不如使用数组直接量。
3-2-2.数组方法包括:join()、reverse()、sort()、concat()、slice()、splice()、push()和pop()、unshift()和shift()、toString()和toLocaleString(),前面这些是ECMAScript3中的方法,在ECMAScript5中还有forEach()、map()、filter()、every()和some()、reduce()和reduceRight()、indexOf()和lastIndexOf()
(还需在使用中逐渐深入理解)
作业要求-3. 如果有问题,在总结中把你的问题罗列出来,我会做解答。
遇到的问题
1、 浏览器运行代码发现的情况:
当打开my_personal_info_page.html页面后,同一部分内容,并未修改这部分代码,刷新前后显示效果不同。
修改代码后直接点击浏览器的刷新后“console”页显示:(后来试过不做任何代码修改,直接刷新也会这样)
想知道这是什么情况?
2、更新Fork项目时报错:
需要更新老师的项目内容,从网上搜索到方法介绍(原文链接地址),文中介绍了网站和终端两种方法。
先使用的终端方法,结果失败了,最后一步提示报错,后来使用了网站操作方式,很顺利,更新成功。
终端报错如下图,请老师帮忙分析下网站能成功、终端不成功是什么原因?谢谢~!
3.关于Date()函数,尝试执行var now = new Date(),得到的返回值时间是晚于我们8小时的时间?
4.另外想问,能不能推荐个MAC用的保存网页(好几屏)为图片的好办法?用chrome能不能实现?
【附加作业要求】
1.在github上部署自己的静态网页,把网页地址放在总结文档里。
在github上部署的静态网页:https://fanmilir.github.io/MyPage/
【作业提交方式】
1.请向getting-started-with-javascript项目发起pull request。
https://github.com/xugy0926/getting-started-with-javascript
2.文档格式,markdown。
3.提交homework/lesson2目录下。