JavaScript基础-慕课网_慕课2-5javascrpt-优快云博客

第01课 - - 接触JavaScript

一.学习原因

1.为什么学习JavaScript

1.基于对象、事件驱动的简单脚本语言。

2.由浏览器负责解释和执行。

3.它让网页呈现动态效果，并实现与用户交互。

2.易学性

1.只要有文本编辑器就可编写

2.可通过简单命令完成一些基础操作。

3.从何学起

起点就是处理网页，先学习基础语法与使用DOM进行简单操作。

二.插入JS

1.<script>标签

成对出现，JavaScript代码写在它们之间。

语法：（text：表示文本类型，javascript：告诉浏览器里面文本属于JavaScript语言）

2.单独创建

把HTML与JS代码分开，并单独创建一个JavaScript文件，其文件后缀通常为js，再将JS代码写在JS文件中。（JS文件中不需要<script>标签，直接编写）

语法：

三.页面中的位置

可放在HTML中的任何位置，但是一般放在head和body部分中。（初始化的js放于head部分，通过事件调用执行的js代码没什么要求）

1.head位置

一般放与head中。用于初始化的JS代码一般放在head中，HTML从上至下执行，用于设置CSS样式的js代码需要在页面加载前执行。

2.body位置

网页读取到该位置时就执行。

四.基本语句、符号

JavaScript是发给浏览器的命令，，告诉浏览器该做什么。

1.“;”分号

1.通常在语句后面加上一个“;”号表示结束（需要在英文状态输入）

语句;

2.不加不会报错，但是要养成良好的编程习惯。

2.注释

提高可读性，方便自己与他人理解。

1.单行注释

2.多行注释

/* */

3.变量（弱类型语言（值不需指定类型））

字面意思理解为可变的量。编程角度则为用于存放某种、某些数据的容器。

命名规则：

1.字母、下划线、美元符号开始。（之后可使用数字）

2.不能是JavaScript保留字或关键字。

3.区分大小写

语法：（定义变量使用关键字var）

var 变量名

使用：（先声明后使用（可直接使用，但不规范））

var mychar;

mychar="javascript";

mychar="hello";

4.判断语句if…else…

条件满足时执行if不满足时执行else。

if(条件){

条件满足执行的语句

}else{

条件不满足执行的语句

}

5.函数

完成特定功能的一段代码，用函数封装提高了代码复用性。

定义：

function 函数名(){

函数代码;

}

函数调用：

HTML中通过点击事件调用函数:

直接在脚本中调用:

函数名();

</script>

通过超链接调用

N.扩展

1.type="text/javascript"

那些老旧的实例可能在<scipt>标签中使用type="text/javascript"，现在已经不必这样做了，JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。--w3cschool

第02课 - - JavaScript入门

一.JavaScript输出内容

1.document.write();

向HTML输出流中写内容，简单说就是直接在网页中输出内容。

1.字符串直接输出。

2.变量输出。

3.多项内容，加号连接输出。

4.也可输出HTML标签。例：“"<br />"”

2.消息对话框

消息对话框点击确定之前，不能执行任何操作（排它性）。输出内容可是字符串、变量。（与document.writer()类似）

alert();：

警告、消息对话框。弹出一个提示框（带有一个确定按钮）。

1.一般可用于调试程序。

confirm();：

允许用户做选择，点击返回boolean值，确定返回true，取消返回false。

prompt();：

询问用户信息，包含：确定、取消、文本框。

确定则返回文本框值，取消则返回null。

2.打开、关闭窗口

1.打开新窗口：

window.open(URL,窗口名,参数字符串);

URL：打开窗口的路径

窗口名：

_blank：新窗口打开

_slef：当前窗口打开

_top：框架网页窗口的上部打开

其他：只能打开一个同名字窗口（不能有空格）

参数字符串：

例：

window.open("2018-04-23-ContactJavaScript.html","_blank","width=1000,height=200,toolbar=yes");

2.关闭窗口：

window.close(); //关闭当前窗口（不能关闭非脚本打开的窗口）

窗口对象.close(); //关闭指定窗口

第03课 - - 了解DOM

一.认识DOM

1.DOM（文档对象模型Document Object Model）

1.定义访问、处理HTML文档的标准方法

2.DOM将HTML呈现为：元素、属性、文本的树结构（节点树）

二.DOM方法设置元素

2.通过ID获取元素

document.getElementById("id名");

3.innerHTML属性

获取或替换HTML元素的内容。

对象.innerHTML = 值; //获取元素对象的内容，再修改。

4.object.style.property = new style;

对象.style.样式属性= "样式值"; //改变HTML元素样式

5.object.className = classname

对象.className = "样式名"; //改变元素class属性引用的样式

6.对象.removeAttribute("元素属性名");

删除元素的该属性。

第04课 - - JavaScrpt进阶

一.数组

1.创建（A要大写）

var object = new Array(); //如果参数为数字，则定义数组初始长度（可变）。

var object = new Array(值1,值2); //声明同时赋值

var object = [值1,值2]; //直接输入一个数组（字面量数组）

2.操作数组的方法

arrayObj.pop();

删除最后一个元素，返回该值

arrayObj.shift();

删除最前一个元素，返回该值

arrayObj.splice(deletePos,count);

删除从指定位置开始，指定个数的元素，数组形式返回删除的数。

arrayObj.unshift(item1,item2,…);

在开始添加一个或多个元素。

arrayObj.push(item1,item2,…);

在结尾添加一个或多个元素。

arrayObj.splice(insert,0,item1,item2,…);（与上面删除同方法，参数不同）

在指定位置插入多个元素。

arrayObj.slice(start,end);

数组形式返回数组一部分。（不包括end）

arrayObj.concat(item1,item2,…);

将多个数组或字符串连接为一个数组

arrayObj.join(separator);

返回字符串，每个元素中间用separator隔开

3.二维数组

多一对“[]”号：var object = [[1,2,…],[1,2,…],….] ;

二.事件

1.常用事件

当在使用了该事件的标签上，做出指定操作时触发。

2.值得注意：

onchange在改变文本之后，需要失焦才能触发。（相对oninput事件更好）

onload支持标签：（需要指定图片路径才算加载完成）

onunload：（估计是用不到的）

目前IE上可运行，其他大部分浏览器不行。（只适合刷新或换页面，如需在关闭页面时提示，使用：onbeforeunload）

N.扩展

1.数组声明长度

节省内存空间：如果不声明长度，默认分配32字节的长度。会浪费空间。

2.undefined

判断一个undefined的变量：（不能使用字符串比较）

未定义变量==undefined; //结果为true

第05课 - - JavaScript内置对象

一.对象

1.什么是对象

JavaScript中所有事物都是对象，如：字符串、数值、数组、函数、等。每个对象都带有属性和方法。

对象的属性：

反映该对象的某些特定的性质。

如：字符串的长度、图像的长宽、…

对象的方法：

能在该对象执行的动作。

如：表单的提交（Submit）、时间的获取（getYear）、…

2.语法：

定义对象：（使用new关键字）

例：var objectName = new Array(); 或 var objectName = [];

访问对象属性：（objectName.propertyName）

例：objectName.length; //访问对象长度，length属性

访问对象方法：（objectName.methodName()）

例：str.toUpperCase(); //返回字符串的大写

二.内置对象

1.Date日期对象

初始时间是从1900年1月1日0时开始的。

var d = new Date(); //当前电脑时间（参数可设置指定时间）

结果格式（火狐）：星期月日年时:分:秒时区

getDay(); 返回星期0-6（0代表星期日）

2.String字符串对象

3.Math对象

1.提供对数据的数学计算。

2.可直接把Math作为对象使用。这是与Date，String对象的区别。

注意：round()方法：四舍六入，五变大。（这样更准确。为负数时会不一样）

4.Array数组对象

排序sort(方法函数)方法：

1.如果参数不指定方法函数

则按unicode码顺序排序

2.如果参数指定方法函数

方法函数比较两个值，返回一个用于说明这两个值相对顺序的数字。

例（自己定义）：

sortNum(a,b){

return ?;

}

若返回值<=-1，则表示A排在B之前。

若返回值>-1&&<1，则表示A和B相同顺序。

若返回值>=1，则表示A排在B之后。

第06课 - - BOM-window对象

一.window对象

1.window对象方法

2.计时器

setInterval()计时器：（每隔指定时间就执行（多次））

setInterval(函数名,毫秒数); 或 setInterval("函数名()",毫秒数);

clearInterval()停止计时器：

根据setInterval()方法所返回的id值，停止计时器。

clearInterval(id值);

setTimeout()计时器：（只执行一次）

clearTimeout()停止计时器

二.History对象

1.介绍

1.记录用户曾经浏览过的页面（URL）（可以实现浏览器前进与后退相似导航的功能）

2.窗口被打开的那一刻开始记录。

每个浏览器窗口、标签、框架…都有history对象与window对象关联。

3.语法：

window.history.[属性|方法] //window可以省略

2.属性、方法

back(); 相当于go(-1);（点击浏览器倒退按钮）

三.Location对象

1.介绍

1.用于获取或设置窗体的URL，并且可以用于解析URL。

2.语法：

window.location.[属性|方法] //window可省略

3.属性示意图：

2.属性、方法

四.Navigator对象

1.介绍

1.Navigator对象包含有关浏览器的信息，通常用于检查浏览器与操作系统的版本。

2.语法：

window.navigator.[属性|方法]; //window可省略

2.属性

platform：返回的是浏览器平台编译的系统。（不是自己的系统）

浏览器信息：在用户操作保证不同的浏览器显示的信息一致。

五.screen对象

1.介绍

1.用于获取用户的屏幕信息

2.语法：

window.screen.属性

2.属性

N.扩展

1.计时器

计时器的参数：

如果是“函数名()”：属于函数调用，所以需要加双引号“""”。

直接是“函数名”：则可不加双引号。

计时器返回值：

测试时第一个计时器从2开始。

之后每新建一个则加1。

第07课 - - DOM

一.认识DOM

1.介绍

1.文档对象模型Document Object Model

2.元素、属性、文本的树结构（节点树）

2.属性、方法

1.节点属性

2.遍历节点树

3.DOM操作（前2个属于document）

4.获取节点

二.属性、方法

1.方法

1.document.getElementsByName("Name")

返回指定名称的节点对象集合。（通过name获取，有可能有多个）

2.document.getELementsByTagName("Tagname")

返回指定标签名的节点对象集合。

3.节点.getAttribute("name")/节点.setAttribute("name","value");

通过元素节点属性名，获取属性的值。/通过节点属性名，设置属性值。

4.节点.appendChild(新节点对象);

需要先通过document.createElement("元素名");新建节点之后，在添加新节点。在该节点的最后一个子节点后添加。

5.节点.insertBefore(新节点对象,指定节点);

该节点的子节点中，在指定子节点前插入新子节点。

6.节点.removeChild(子节点对象);

删除该子节点返回该子节点对象（虽然在DOM树中删除了，但是还是存在内存中，彻底删除：赋值该子节点为null）

7.节点.replaceChild(新节点对象,指定节点);

替换该节点的指定节点。替换该子节点所有与之相关的属性都会被移除。

8.document.createElement("元素名");

创建元素节点，返回该元素节点对象。（需配合appendChild、insertBefore方法使用，将元素节点显示在页面）

9.节点.createTextNode("文本");

为该节点添加文本子节点。

2.属性

1.节点.nodeName：节点名称（只读）

元素节点：与标签名相同

属性节点：属性名称

文本节点：#text

文档节点：#document

2.节点.nodeValue：节点的值

元素节点：undefined或null

文本节点：文本自身

属性节点：属性的值

3.节点.nodeType：节点的类型（只读）

元素：1

属性：2

文本：3

注释：8

文档：9

4.节点.childNodes：访问子节点（数组）

返回调用节点的所有子节点列表。

（注意：节点之间的空白部分，除IE浏览器，其他浏览器会解析为文本节点）

5.节点.firstChild/lastChild：访问第一个/最后一个节点

与childNodes指定索引获得节点，相同效果。

6.节点.parentNode：获得该节点父节点

7.节点.nextSibling/previousSibling：获得同节点树层中，该节点的下\上一个节点

三.网页大小、尺寸

1.网页尺寸（还可获取DOM的元素内容高宽）

innerHeight/innerWidth：（文档对象内部高宽，包括滚动条）

clientHeight/clientWidth：（获取高宽）

scrollHeight/scrollwidth：（网页内容高宽）

offsetHeight/offsetWidth：（网页内容高度，包括滚动条、等边线。）

例：

获取文档对象内部高：document.innerHeight

获取body高：document.body.clientHeight

获取文档内容高：document.documentElement.scrollHeiht

获取body内容高：document.body.scorllHeight

2.网页卷去的距离与偏移量

scrollTop/scrollLeft：

给定对象边界与窗口目前可见内容相应最左/顶端距离

offsetTop/offsetLeft：

给定对象相对于版面或由offsetParent属性指定父坐标的相应左/顶端位置

offsetParent：

布局中设置position属性（Relative、Absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

N.扩展

1.删除子节点的for循环

每删除一个子节点，子节点列表的子节点数（长度）就会变化，所以不能动态的来获取子节点的长度。

2.各大小尺寸区别

scrollWidth：

对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。

clientWidth：

对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。

offsetWidth：

对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

情况1：

元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2：

元素的内容超过可视区，滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。