发表于： 2019-04-20 23:14:20
1 246
Day 59 js-1
今天完成的事情
1.在github中创建JS的repository，并添加到vs的工作区（浪费了很长时间）
2.书到了，勉强看完前三章
3.顺着官网提供的任务路线自行查找并学习了一部分相关内容
遇到的问题
1.【solved】创建JS的repository后，添加到vscode，并与git建立连接
使用pull命令后很久都没有变化，
想到笨办法，先在D盘中创建与仓库同名的文件夹，然后添加到vscode中
首先想到open workspace，
结果打开后发现CSS任务的hello-world仓库消失了
然后又将仓库替换回来，选择Add folder to workspace... 使得工作区存放多个文件夹
这时候发现source-control失效，随便更改仓库中的东西都不会提示有更改信息
然后又开始重新配置git ,期间用到的工具有：CMD，GIT，Github Desktop,
绝望之余打开一看，发现好了，懵。
收获
1.“=”、“==”和“===”
=：是赋值操作
= =：先转换类型再比较
= = =：先判断类型，如果不是同一类型直接为false。
如果用的不是很灵活，建议使用===全等比较符。一般对数据类型和数据类型转化较好的话，才能把==比较符。
比如 0 ‘’ false [] 这四个使用== 都是两两相等的。
2.JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
3.console.log()
主要是方便调试javascript用的, 可以看到在页面中输出的内容。
相比alert他的优点是：
他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。
用户输入：prompt()语句
prompt()就是专门用来弹出能够让用户输入的对话框。
JS代码如下：
var a = prompt("pls input your name");
console.log(a);
上方代码中，用户输入的内容，将被传递到变量 a 里面。
prompt()语句中，用户不管输入什么内容，都是字符串。
alert和prompt的区别：
alert("helloimyhe"); //直接使用，不需要变量
var a = prompt("pls input your name"); // 必须用一个变量，来接收用户输入的值
键盘上的+可能是连字符，也可能是数字的加号。如下：
console.log("我" + "和" + "你"); //连字符，把三个独立的汉字，连接在一起了
console.log("我+和+你"); //原样输出
console.log(1 + 2 + 3); //输出6
console.log("1"+ 2); //输出12
console.log("1"- 2); //输出-1
4.JS补充
JavaScript基础分为三个部分：
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：操作浏览器部分功能的API。比如让浏览器自动滚动。
注：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。
JavaScript 数组
创建数组的三种方式：
下面的代码创建名为 cars 的数组：
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
var cars=["Audi","BMW","Volvo"];
·JavaScript 对象
JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。
属性和方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
·声明变量类型
当声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
5.DOM
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attribute：网页元素的属性
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。
节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，就像一棵树。
DOM的数据结构
浏览器原生提供document节点，代表整个文档。
文档的第一层只有一个节点，就是 HTML 网页的第一个标签<html>
它构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。
除了根节点，其他节点都有三种层级关系。
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。
Document对象至少有三种方式获取DOM元素，分别为：
① document.getElementById():根据页面标签的唯一id来获取，返回的是一个对象，自然可以调用对象的方法，
② document.getElementsByTagName():看到elements就知道这个获取的是多个对象，所以返回的是对象的集合，哪怕只有一个对象，也会返回长度为1的数组，只能通过索引返回对象调用对象的方法。
③ document.getELementsByClassName('xxx'):这个跟上面一个类似，返回的也是数组，但是需要注意的是，它会返回所有包含xxx或者只有xxx的标签的数组。
DOM可以做什么
找对象（元素节点）
DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。节点的访问关系都是属性。
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序
6.杂项
1、onclick 属性由元素上的鼠标点击触发。
在标签中填写 onclick 事件调用函数时，不是 onclick=函数名， 而是 onclick=函数名+()
2、外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码。
3、HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。
4、JavaScript 对大小写是敏感的。
5、对象创建建议使用字面量的格式。有封装的感觉，不会产生作用域的问题，也不会产生其他类型的实例。
6、函数，有函数声明和函数表达式的区别
1)函数声明(Function Declaration);
// 函数声明
function funDeclaration(type){
return type==="Declaration";
}2)函数表达式(Function Expression)。
// 函数表达式
var funExpression = function(type){
return type==="Expression";
}Javascript 中函数声明和函数表达式是存在区别的，函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用。而函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。
明天计划学习
打算花点时间重写CSS任务一，然后开始对JS任务一下手
注： 【unsolved】截日报发出前未解决的问题
【solved】已解决现象但并未从根本上解决问题
【solved】已解决
返回列表
评论