[外门弟子]JS-8|2019年04月16日的日报-技能树.IT修真院

发表于： 2019-04-16 23:59:30

1 698

Day 56 js-前期准备-1

今天完成的事情

1.查看并学习之前任务里所要求的的js前期准备工作

遇到的问题

1. js第一步：了解js是如何运行的。

javascript脚本的编写必须在HTML或者XHTML文件中执行。

有两种方法：

第一种：是把javascript放在<head>标签文档中的<script>标签之间；

第二种方法：

是把javascript脚本另存一个文件中，改成扩展名为.js的独立文件。

在<head>中放入一个<script>标签，并用src=“”属性指向该文件的路径。

但是这样做最好是把<script>标签放在HTML文档最后，</body>结束标签之前；

可以更快的加载页面。

注意：1、HTML中可以无限量的放入javascript。

2、javascript可以同时在<head>和<body>中同时存在。

2. js第二步：了解javascript的语法：

1、javascript语句（statement）：要求不严格，只需要简单的把各条语句放在不同的行上就可以分隔开。但是每句末尾建议加上；分号，这是一个良好的编程习惯。

如：多条语句放同一行用分号隔开：first statement；second statement；

first statement；

second statement；

这样做的原因是为了让代码更容易阅读，也能更容易跟踪javascript脚本执行的顺序。

2、注释（comment）：注释是为了能有效的帮助了解代码流程，了解代码在其中的角色作用，可以帮助了解代码在干什么。

有两种方法：

“//”这个是代表注释开始行，这一行就会被当做一条注释。

想要多条注释就必须每条开始前面都加上“//”。

如：

//自我提醒：有注释是件好事

//自我提醒：

//有注释是件好事

或者使用/*，*/也是可以多条注释的。

如：

/*自我提醒：

有注释是件好事*/

这种方法的注释适用于大量大段的时候，可以提高整个脚本的可读性。

3、变量（variable）：会发生变化的东西称为“变量”。

假如设置一个变量名为mood，它的值可以设置happy或者sad，但是它的mood名是不变的，值可以随时改变。

把值存入变量的操作称为“赋值（assignment）”。

在javascript中可以这样给变量赋值：

如：mood=“happy”；

age=33；

注意：在javascript中允许不用给变量赋值声明，赋值将自动声明该变量。但这在其他的程序语言中是不允许的。

（2）声明：提前声明

4、常量（const）同时也是关键字。

常量可以储存值，但是初始化后值不能再改变。

const也是可以声明多个常量。

注意：代表明确数字或字符串的常量名都应该由大写字母组成，并用下划线间隔多个单词，便于区分。

如：

const ROOM_TEMP_C=21.5;

注意：变量和常量优先用哪个？

经验法则告诉优先使用常量。

只是用于给某个数据取名字，并非改变它的值。优点：可以防止一些不应该被更改的值被意外更改。

有一种情况必须用变量而非常量：for循环。

5、字面量：

字面量本质上是一种创建值的方式。

let room=“conference_room_a”;

room表示“标识符”，意思表示这是一个常量。

“conference_room_a”表示“字面量”

注：conference_room_a是蛇型命名法。可以采用任意一种命名规范，但是选择了就不能更改，保持一致性。

注意：数字不需要任何形式的引号，因为标识符不能以数字开头。

javascript可以区分标识符和字面量。

6.基本数据类型有六个：分别是：

（1）数字（number）：

有两种格式的近似值。（1、IEIE-764双精度。2、浮点型）

但更倾向于简单使用“double”（双精度型）

javascript只有一种数值数据类型（专用的整数类型）。

优点：1、简化了javascript。

2、降低对整数算法有性能的要求，或对固定精度的数字的精度有较高要求的应用的适应性。

注：Javascript能识别4种数字字面量。（十进制数、二进制数、八进制数和十六进制数）

（2）字符串（string）：是简单的文本数据。

在javascript中表示“unicode”文本。

unicode：是统一字符编码标准，一个计算机行业标准。用来表示文本数据，涵盖了字符的字符码，以及大多数人类语言的符号，甚至是emoji表情符号。（unicode不需要转义可以直接在编辑器中输入。在编辑器中输入unicode字符前，需要查看编辑器和操作系统的相关文档，在正确使用。）

转义：作用是为了区分文本数据。通过符号来进行转义，符号为反斜杠（\）可以对引号进行转义，让Javascript认为该字符串并没有结束。

如：

const dialog（对话框）=“...\...\"to Max”;

单引号''表示英文文本语句，或插入HTML脚本时。

双引号“”表示HTML标签相关属性的值。

注：数字可以用作字符串：

给数字加上引号，就变成了字符串。

如：const resultl=3+'30'; //'30'被转换成字符串，结果为字符串'330'

javascript会自动将包含数字的字符串转换成数字。

如：const resultl=3*'30'; //‘30被转换成数字；结果为数值90；

（3）布尔型（boolean）：

有两种值：

1、true（正确的）

2、false（错误的）

正确的表示方法：

let heating=true；

let heating=false；

布尔型的两个用途：

1、存储特殊值。number、INFINIFY

2、以函数的形式提供某些功能。

（4）null 开发者用 +（5）undefind 留给javascript用。这两个都只有一个唯一的值。两者都表示不存在的。

注：新手不确定的情况下建议使用null。

（6）符号：是ES6的新特性，是一种新的数据类型，代表一个唯一的标志，是独一无二的，不会匹配其他任何符号。有点类似对象（每个对象都是唯一的），但符号是一种基本类型。

7.对象：

与基本类型相反，形式和值都非常多样化。可以代表多个值或者复杂值，在生命周期中是可以变的，本质上是个容器。

对象的灵活性，可以用来构造自定义的数据类型。

对象的语法：

大括号{}是成对出现的。对象的内容称作属性（或成员）：属性由名称或键和值组成。

注：属性名必须是“字符串”或者“符号”，值可以是任意类型（包括其他对象）。

如：

const obj={}；

obj.color； //“yellow”

obj自始至终指向同一个对象，只是对象自身的内容被修改了。

javascript提供了一些内置的对象：

（1）Array

（2）Date

（3）RegEXP

（4）Map和WeakMap

（5）Set和Weakset

8.数组：

（1）是javascript的一种特殊类型的对象。天生具有自然排序特性。（元素0总是出现在元素1之前），键是数字，并且是有序的。

优点：

1、拥有C语言数组的高效索引。

2、拥有强大的动态数组和链表的特性。

特性：

1、数组长度不固定，可以随时添加和删除元素。

2、类型是多样的。每个元素是任意类型。

3、数组下标从0开始，第一个元素是0。

注意：建议用数字来表达数组，用非数字的键会增加定位bug的难度，也会造成混乱。

javascript中用方括号[ ]创建数组字面量，多个元素之间用逗号隔开。如：

const a1=[1,2,3,4]; //数值的数组。

const a2=[1,'two',3,null]; //混合类型。

（2）数组的属性：length（返回），返回数组元素的个数。如：

const arr=['a','b','c'];

arr.length;

可以访问数组的指定元素。（类似访问对象的属性）

const arr=['a','b','c']; //获取第一个元素。

arr[0];

//数组最后一个元素的下标是arr.length-1

arr[arr.length-1];

这里可以这样理解，数组是有自然排序的，元素0永远在1前面，所以这里'a'是0，'b'是1，'c'是-1，因为前面给最后一个元素'c'赋值为-1。

改变数组特定下标的元素的值，赋一个新的值就可以了。如：

const arr=[1,2,'c',4,5];

arr[2]=3; //arr的值为[1,2,3,4,5]

这里arr[2]指的是0~2数字，就是指arr[2]对象赋值为3，3表示为‘c’

3.http 译名全名是超文本传输协议，它是一个应用层协议。

http://www.mamicode.com/info-detail-1217840.html

协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则

超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器.http协议是基于tcp协议的。

https：

http与https的区别

HTTP 无法加密，而HTTPS 对传输的数据进行加密，更加安全。
HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书。
HTTP 标准端口是80 ，而 HTTPS 的标准端口是443。
在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层。

HTTP1.1版本新特性：

默认持久连接节省通信量，只要客户端服务端任意一端没有明确提出断开TCP连接，就一直保持连接，可以发送多次HTTP请求
管线化，客户端可以同时发出多个HTTP请求，而不用一个个等待响应
断点续传（实际上就是利用HTTP消息头使用分块传输编码，将实体主体分块传输。）

http特点：

无状态的协议，无状态就是客户端的每次请求都没有关系，它们是独立的。
只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。
底层是基于TCP实现的。

http报文分为请求报文和响应报文

请求报文：它会向Web服务器请求一个动作。

请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成

响应报文：它会将请求的结果返回给客户端。

响应报文由三个部分组成，分别是：状态行、消息报头、响应正文。

接下来说一下前端要重点知道的知识：

URL（统一资源标识符）：

一种特殊类型的URI，包含协议、域名、端口，可能包含虚拟目录、文件名、锚、参数。其中协议，域名，端口一部分不一样，就是跨域。

Request Method（请求方式）：

GET，POST，HEAD，PUT，DELETE，CONNECT，OPTIONS，TRACE。常用就是GET,POST，注意它们的区别。

状态码：

1xx：指示信息--表示请求已接收，继续处理。
2xx：成功--表示请求已被成功接收、理解、接受。
3xx：重定向--要完成请求必须进行更进一步的操作。
4xx：客户端错误--请求有语法错误或请求无法实现。
5xx：服务器端错误--服务器未能实现合法的请求。

常见状态码

200 OK：客户端请求成功。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器收到请求，但是拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。
503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）。

4. Cookie/Session机制详解

http://blog.csdn.net/fangaoxin/article/details/6952954

同一个客户端的这次请求和上次请求是没有对应关系，对http服务器来说，它并不知道这两个请求来自同一个客户端。为了解决这个问题，Web程序引入了Cookie机制来维护状态.

Cookie常用属性

属性名	描述
String name	该Cookie的名称。Cookie一旦创建，名称便不可更改
Object value	该Cookie的值。如果值为Unicode字符，需要为字符编码。如果值为二进制数据，则需要使用BASE64编码
int maxAge	该Cookie失效的时间，单位秒。如果为正数，则该Cookie在maxAge秒之后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为–1
boolean secure	该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false
String path	该Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/”
String domain	可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”
String comment	该Cookie的用处说明。浏览器显示Cookie信息的时候显示该说明
int version	该Cookie使用的版本号。0表示遵循Netscape的Cookie规范，1表示遵循W3C的RFC 2109规范

正常情况下，同一个一级域名下的两个二级域名如www.helloweenvsfei.com和images.helloweenvsfei.com也不能交互使用Cookie，因为二者的域名并不严格相同。如果想所有helloweenvsfei.com名下的二级域名都可以使用该Cookie，需要设置Cookie的domain参数，例如：

Cookie cookie = new Cookie("time","20080808"); // 新建Cookie

cookie.setDomain(".helloweenvsfei.com"); // 设置域名

cookie.setPath("/"); // 设置路径

cookie.setMaxAge(Integer.MAX_VALUE); // 设置有效期

response.addCookie(cookie); // 输出到客户端

修改本机C:\WINDOWS\system32\drivers\etc下的hosts文件来配置多个临时域名，然后使用setCookie.jsp程序来设置跨域名Cookie验证domain属性。

注意：domain参数必须以点(".")开始。另外，name相同但domain不同的两个Cookie是两个不同的Cookie。如果想要两个域名完全不同的网站共有Cookie，可以生成两个Cookie，domain属性分别为两个域名，输出到客户端。

cookie与session区别：

cookie将状态保存在客户端，session将状态保存在服务端。
session相对于cookie要安全，但cookie不需要占用服务器的资源。
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5.琐碎

ctrl+shift+/ 快速注释

CSS cursor 属性：显示光标的类型（形状）。

checked复选框属性。

定义：

checked属性规定在页面加载时应该被预先选定的input元素。

用法：

checked属性与<input type=“checkbox”>或者<input type=“radio”>配合使用。

checkbox属性：

<input type=“checkbox”>允许为表单中（或不在表单中）的提交项选择一个单一值。

注意：若表单提交时，checkbox未勾选，则提交的值并非为value=unchecked；此时的值不会被提交到服务器。

该元素包含全局属性。

当checked的type属性的值为checkbox时，这个属性的存在表示input是否默认被选中。可以将该属性设置为checked=“checked”，或者更简单只设置为checked；

.cake input[type="checkbox"] {
display: none;
}

还有一个重点就是伪类选择器:checked；

:checked伪类选择器表示任何处于选中状态的radio（<input type=“radio”>），checkbox（<input type=“checkbox”>）或者（“select”）元素中的option html元素（“option”）。

语法：:checked;

通过勾选或选中元素或取消勾选/取消选中，来改变该元素的:checked状态。

input[type=checkbox]:checked ~ .sky {
display: block;
}

收获

1.js学习

变量：存储一个可变的值
常量：存储一个不可变的值
标识符和字面量：声明的变量常量就是标识符，其存储的值就是字面量
六个基本类型：注意，数字和字符串的区别：1是数字，“1”是字符串。布尔型就是对true和错false。对象简单来说就是在{ }内的键值对的集合，键key在前，冒号后面是值value。数组，[ ]内，用逗号分隔的一系列元素。

2.http

3.Cookie

明天计划学习

1.继续js的学习，尝试开启 js task1

注：【unsolved】截日报发出前未解决的问题

【solved】已解决现象但并未从根本上解决问题

【solved】已解决