发表于: 2019-04-20 23:14:20
1 257
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】已解决
评论