JavaScript基础-慕课网
2018年08月05日 15:40:28
阅读数:71
第01课 - - 接触JavaScript
一.学习原因
1.为什么学习JavaScript
1.基于对象、事件驱动的简单脚本语言。
2.由浏览器负责解释和执行。
3.它让网页呈现动态效果,并实现与用户交互。
2.易学性
1.只要有文本编辑器就可编写
2.可通过简单命令完成一些基础操作。
3.从何学起
起点就是处理网页,先学习基础语法与使用DOM进行简单操作。
二.插入JS
1.<script>标签
成对出现,JavaScript代码写在它们之间。
语法:(text:表示文本类型,javascript:告诉浏览器里面文本属于JavaScript语言)
<script type="text/javascript">内容</script>
2.单独创建
把HTML与JS代码分开,并单独创建一个JavaScript文件,其文件后缀通常为js,再将JS代码写在JS文件中。(JS文件中不需要<script>标签,直接编写)
语法:
<script src="路径"></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中通过点击事件调用函数:
<input type="button" οnclick="函数名()" />
直接在脚本中调用:
<script>
函数名();
</script>
通过超链接调用
<a href="javascript:函数名()"></a>
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支持标签:(需要指定图片路径才算加载完成)
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> ,<style>
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是元素的实际宽度。