JavaScript

2021/7/9 1:06:57

本文主要是介绍JavaScript,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

JavaScript

为什么要学JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。

javascript的作用:

1.表单验证——减轻服务器压力

javascript是客户端脚本语言,对于一些无效性的数据,为了减轻服务器压力,在客户端上进行表单验证,筛除一些无效的数据验证。

2.制作页面特效

3.动态改变页面内容(如动态轮播、选项卡显示等)

特点:

1.向HTML页面中添加交互行为

2.脚本语言,语法和Java类似

3.解释性语言,边执行边解释(即使一行代码出错,前面的内容也能运行显示)

JavaScript组成

由ECMAScript(ES6)、BOM、DOM三部分组成

基本结构:

<script type="text/javascript">
 <!-- 
 JavaScript语句
  -->
</script>

< script>可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可。

JavaScript的执行原理

在这里插入图片描述

网页中引用JavaScript的方式

1.行内(标签内)引入
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');">
2.HTML文件内部使用< script>标签引入

在html文件中使用< script> < /script>标签,可以写在html文件的任何位置(标签内除外)

3.外部JS文件

写在js文件中,在HTML文件中通过

<script src="export.js type="text/javascript"></script>

引入.

ECMAScript(ES6)

ECMAScript是一种语法标准(约束)

主要是对语法、变量、数据类型、运算符、逻辑控制语句。关键字、保留字、对象等内容进行标准约束.

JavaScript核心语法

变量
1.先声明变量再赋值
var width;
width=10;
2.同时声明和赋值变量
var userName="六月";
var i,j,k=15;  //只给K赋值,i、j声明了没赋值
3.不声明直接赋值(不提倡)
userName="六月";
i=1;

变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不提倡使用

变量的作用域
1.全局变量

在函数外声明的变量,网页上的所有脚本和函数都能访问它
全局变量在页面关闭后被删除

2.局部变量

在函数内声明的变量(必须用var),只能在函数内部访问它
可以在不同的函数中使用名称相同的局部变量
局部变量在函数运行以后被删除

数据类型
1.undefined
var width;

变量width没有初始值,将被赋予值undefined

2.null

表示一个空值,与undefined值相等。

(用于判断对象是否为空)

3.number

整数和浮点数

var score=90; //整数
var score=96.5; //浮点数
4.boolean

布尔型true 和false

5.string

被引号(单引号和双引号)括起来的文本

var string="This is a string"
6.object
var string =null;

typeof string的结果为object类型

typeof运算符

用于检测变量的返回值
typeof运算符返回值如下:
undefined:变量被声明后,但未被赋值
string:用单引号或双引号来声明的字符串
boolean:true或false
number:整数或浮点数
object:javascript中的对象、数组和null

数组

(1)创建数组语法:

var 数组名称=new Array(size);

size表示数组中可存放的元素总数,可以使用一个整数自变量来控制数组容量(也允许超出);也可以不填,代表可以添加任意多的值

(2)数组赋值
1.声明时赋值

var fruit=new Array("apple","orange","peach","banana");

2.分别赋值

var fruit=new Array(2);
fruit[0]="apple";
fruit[1]="orange";

(3)访问数组元素
1.通过数组名称和元素下标直接访问数组元素
2.可以使用for-in循环输出数组元素

运算符号
类型运算符
算术运算符+ - * / % ++ –
赋值运算符= += -=
比较运算符> < >= <= == != === !==
逻辑运算符&& || !
逻辑控制语句
if条件语句
if(条件){
//javascript代码
}else{
//javascript代码
}

if中的条件
1.如果是数字类型,除了0以外都为true, 0为false
2.如果是字符串类型,字符串长度大于0都为true,长度为0则为false
3.null和undefined为false
4.其他有值的都为true

switch多分支语句
switch(表达式){
   case 常量1:
         javascript语句1;
         break;
   case 常量2:
         javascript语句2;
         break;
   ....
   default:
         javascript语句3;
         break;
}
for、while循环语句
for(初始化;条件;增量){
    JavaScript代码
}

while(条件){
    JavaScript代码
}
for-in循环语句

类似java中的增强型for循环

var fruit=["apple","orange","peach","banana"];
for(var i in fruit){
    document.write(fruit[i]+"<br/>")
}
注释

1.单行注释以//开始

2.多行注释以/*开始,以 */结束

常用的输入/输出

alert()

在页面弹出一个输出框(警告框)
alert(“提示信息”);

prompt()

在页面中弹出一个用户输入框
prompt(“提示信息”,“输入框的默认信息”);

语法约定

1.代码区分大小写
2.变量、对象和函数的名称规范
3.要写分号

程序调试

1.断点调试

(1)浏览器自带JS调试工具(如Chrome的F12)
(2)可设置断点,变量监控等
语法错误排查–>逻辑错误排查–>修改错误

2.alert()调试

使用alert()弹出不确定的数据,来判断出现错误的位置

3.console调试

在控制台输出不确定的数据,来判断出现错误的位置

函数

类似于java中的方法,是完成特定任务的代码语句块
使用更简单:不用定义属于某个类,直接使用

函数可以分为系统函数和自定义函数

系统函数
1.parseInt(“字符串”)

将字符串转换为整型数字
如:parseInt(“86”)将字符串"86"转换为整型值86

2.parseFloat(“字符串”)

将字符串转换为浮点型数字
如:parseFloat(“3.45”)将字符串“3.45”转换为浮点数3.45

3.isNaN()

用于检查其参数是否是非数字
如果是数字,返回false,
如果不是数字,返回true

自定义函数

1.定义函数语法:

function 函数名(参数1,参数2,参数3,....){
   //javascript语句
   [return 返回值]
}

不带参数则为无参函数,
带参数则为有参函数
return返回值可有可无,根据情况添加

2.调用函数
函数调用一般和表单元素的事件一起使用,调用格式:
事件名=“函数名()”;

事件

名称说明
onload一个页面或一幅图像完成加载
onclick鼠标单击某个对象
onmouseover鼠标指导移到某元素上
onkeydown某个键盘按键被按下
onchange域的内容被改变

BOM

Browser Object Model(浏览器对象模型)
提供了独立于内容与浏览器窗口进行交互的对象
(用JavaScript操作浏览器)

BOM可实现功能:
1.弹出新的浏览器窗口
2.移动、关闭浏览器窗口以及调整窗口的大小
3.页面的前进、后退

在这里插入图片描述

window对象

浏览器窗口对象

常用的属性

history:有关客户访问过的URL的信息

location:有关当前URL的信息

window.属性名=“属性值”

示例:
window.location=“http://www.kgc.cn”;
表示跳转到课工场首页

常用的方法
方法名称说明
prompt()显示可提示用户输入的对话框(点击取消返回null)
alert()显示带有一个提示信息和一个确认按钮的警示框
confirm()显示一个带有提示信息、确定和取消按钮的对话框(点击确定返回true,点击取消放回false)
close()关闭浏览器窗口
open()打开一个新的浏览器窗口,加载给定URL所指定的文档
setTimeout()在指定的毫秒数后调用函数或计算表达式
setInterval()按照指定的周期(以毫秒计)来调用函数或表达式
confirm()方法

将弹出一个确认对话框

confirm("对话框中显示的纯文本 ")

confirm()与alert()和prompt()的区别

alert():一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
prompt():两个参数,输入对话框,用来提示用户输入一些信息,单击”取消“按钮则返回null,单击”确认“按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息
confirm():一个参数,确认对话框,显示提示对话框的消息、“确定”按钮和“取消按钮”,单击"确认"按钮返回true,单击"取消"按钮返回false,因此与if-else语句搭配使用

open()方法

window.open(“弹出窗口的url”,“窗口名称”,“窗口特征”)

在这里插入图片描述

history对象
常用方法:
名称说明
back()加载history对象列表中的前一个URL
forward()加载history对象列表的下一个URL
go()加载history对象列表的某个具体URL
go()方法

若参数为0,则为刷新
参数<0,则-1代表后退一页,-2代表后退两页…
参数>0,则1代表前进一页,2代表前进两页…

location对象
常用属性
名称说明
host设置或返回主机名和当前URL的端口号
hostname设置或返回当前URL的主机名
href设置或返回完整的URL
常用方法
名称说明
reload()重新加载当前文档(刷新)
replace()用新的文档替换当前文档
document对象
常用属性
名称说明
referrer返回载入当前文档的URL
URL返回当前文档的URL
referrer

document.referrer

通过载入当前文档的URL判断页面是否是从指定链接进入,来执行不同的操作

常用方法
名称说明
getElementById()返回对拥有指定id的第一个对象的引用(对象的id唯一)
getElementsByName()返回带有指定名称的对象的集合(相同name属性)
getElementsByTagName()返回带有指定标签名的对象的集合(相同的元素)
write()向文档写文本、HTML表达式或javascript代码
innerText
document.getElementById("book").innerText="现象级全球畅销书";

动态改变层、标签中的内容,只能设置纯文本

innerHTML
document.getElementById("book").innerText="<h1>现象级全球畅销书</h1>";

动态改变层、标签中的内容,可以设置标签及文本

JavaScript内置对象

Array对象

数组对象,用于在单独变量名中存储一系列的值

常用属性

length:设置或返回数组中的元素的数目

常用方法
名称说明
join()把数组的所有元素放入一个字符串,通过一个分隔符进行分隔
sort()对数组排序(默认按首字母排序)
push()向数组末尾添加一个或更多元素,并返回新的长度
concat()合并两个数组
Date对象

用于操作日期和时间
var 日期对象=new Date(参数)
参数格式:MM DD,YYYY,hh:mm:ss
例如:

var today =new Date()   //返回当前日期和时间
var tdate=new Date("9 1,2017,14:58:12");
常用方法
名称说明
getDate()返回Date对象的一个月中的某一天,其值介于1~31之间
getDay()返回Date对象的星期中的每一天,其值介于0~6之间,0为周日
getHours()返回Date对象的小时数,其值介于0~23之间
getMinutes()返回Date对象的分钟数,其值介于0~59之间
getSeconds()返回Date对象的秒数,其值介于0~59之间
getMonth()返回Date对象的月份,其值介于0~11之间,0为1月份
getFullYear()返回Date对象的年份,其值为4位数
getTime()返回自某一时刻(1970年1月1日)以来的毫秒数
string对象

用于支持对字符串(文本)的处理
var 字符串对象 =new String(参数)
参数是要存储在String对象中或转换成原始字符串的值
如:

var str =new String("kgc");
常用属性

length

表示字符串长度
语法:
字符串对象.length

如:

var str="this is javascript";
var strLength=str.length;  //长度是18
常用方法
名称说明
charAt()charAt(index)返回在指定位置的字符(下标从0开始)
concat()concat(str2)连接字符串
replace()replace(str1,str2)用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串
split()split(str)将一个字符串分割成字符串数组
indexOf()indexOf(str,index)返回某个指定的字符串值在字符串中首次出现的位置,找不到则返回-1
lastIndexOf()lastIndexOf(str,index)返回一个指定的字符串值最后出现的位置,找不到则返回-1
match()可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,找不到返回null
toLowerCase()把字符串转换为小写
toUpperCase()把字符串转换为大写
substr()从起始索引号提取字符串中指定数目的字符
substring()substring(index1,index2)提取字符串中两个指定的索引号之间的字符(包括开始位置,不包括结束位置)
slice()提取字符串中的某个部分,并以新的字符串返回被提取的部分(负数参数则从后往前截取)
Math对象

用于执行常用的数学任务,它包含了若干个数字常量和函数

常用方法
方法说明示例
ceil()对数进行上舍入Math.ceil(25.5) 返回26
Math.ceil(-25.5) 返回-25
floor()对数进行下舍入Math.floor(25.5) 返回25
Math.floor(-25.5) 返回-26
round()把数四舍五入为最接近的数Math.round(25.5) 返回26
Math.round(-25.5) 返回-26
random()返回0.0~1.0之间的随机数0.6273608814137365
定时函数
setTimeout()

setTimeout(“调用的函数”,等待的毫秒数)
暂停指定的毫秒数后执行指定的代码

clearTimeout()

用于停止执行setTimeout()方法的函数代码
clearTimeout(setTimeout()返回的ID值)

如:

var myTime=setTimeout("disptime()",1000);
clearTimeout(myTime);
setInterval()

间隔指定的毫秒数不停地执行指定代码
setInterval(“调用的函数”,间隔的毫秒数)

clearInterval()

用于停止setInterval()方法执行的函数代码
clearInterval(setInterval()返回的ID值)

如:

var myTime=setInterval("disptime()",1000);
clearInterval(myTime);

DOM

Document Object Model(文档对象模型)

是HTML文档对象模型(HTML DOM)定义的一套标准方法,用来访问和操纵HTML文档。

每个HTML页面打开后会被页面加载成文档对象

(JavaScript操作网页内容)

可以分为三个方面:DOM core、HTML-DOM、CSS-DOM

在这里插入图片描述

DOM是对文档中的节点进行操作的,document文档中的节点关系如下图:

在这里插入图片描述

访问节点

1.使用getElement系列方法访问指定节点

语法:

document.getElementById()          //通过id属性获取对象
document.getElementsByTagName()    //通过标签名获取对象
document.getElementsByName()       //通过name属性获取对象
document.getElementsByClassName()  //通过class属性获取对象

通过ID获取的对象为单个,而通过标签名、name属性、class属性等获得的值为多个对象的集合,需要根据下标[i]指定单个元素对象

2.根据层次关系访问节点
属性名称描述
parentNode返回节点的父节点
childNodes返回子节点集合,子节点为childNodes[i]
firstChild返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastChild访问节点的最后一个子节点
nextSibling下一个节点
previousSibling上一个节点

上述方法获得的子节点是包括空格等文本节点在内的所有节点,故firstChild、lastChild在有换行的情况下获得的子节点都为空格节点的undefined

3.element属性
属性名称描述
firstElementChild返回节点的第一个子节点
lastElementChild访问节点的最后一个子节点
nextElementSibling下一个节点
previousElementSibling上一个节点

上述方法获取子节点只包括元素节点,而排除了换行等带来的空格等文本节点

oNext=oParent.nextElementSibling || oParent.nextSibling
oPre=oParent.previousElementSibling || oParent.previousSibling
oFirst=oParent.firstElementChild || oParent.firstChild
oLast=oParent.lastElementChild ||oParent.lastChild

通常为了兼容浏览器,可以将两种写法用||连起来使用

节点信息

分为nodeName(节点名称)、nodeValue(节点值)、nodeType(节点类型)三部分

节点名称 nodeName

1.元素节点——元素名称
2.属性节点——属性名称
3.文本节点——#text
4.document节点——#document

节点值 nodeValue

1.元素节点——null
2.属性节点——属性值
3.文本节点——文本信息
4.document节点——null

节点类型 nodeType

1.元素element
NodeType值=1
2.属性attr
NodeType值=2
3.文本text
NodeType值=3
4.注释comments
NodeType值=8
5.文档document
NodeType值=9

操作节点

操作节点的属性

getAttribute(“属性名”)

通过元素对象的属性名获取对应的属性值

setAttribute(“属性名”,“属性值”)

设置元素对象的属性名和对应的属性值

创建和插入节点

创建节点
名称描述
createElement(tagName)创建一个标签名为tagName的新元素节点
A.appendChild(B)把B节点追加到A节点的子节点中的末尾
insertBefore(A,B)把A节点插入到B节点之前(同级)
cloneNode(deep)复制某个指定的节点

删除和替换节点

名称描述
removeChild(node)删除指定的节点,node为节点对象
replaceChild(newNode,oldNode)用其他的节点替换指定的节点,newNode为新节点对象,oldNode为被替换的节点对象

示例:

var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);

var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);

操作节点样式

用javascript改变节点样式可以有两种方式

1.style属性

HTML元素对象.style.样式属性=“属性值”;

document.getElementById("titles").style.color="#ff0000";

对于有带“-”的样式属性,去掉"-","-"后面的单词首字母改为大写
如:font-size应写为fontSize

在这里插入图片描述

2.className属性

HTML元素对象.className=“样式名称”

给元素对象套用定义好的样式

function over(){
	document.getElementById("cart").className="cartOver";
}

获取元素的样式

HTML元素对象.style.样式属性;

document.defaultView.getComputedStyle(元素对象,null).属性

HTML元素对象.currentStyle.样式属性;

alert(document.getElementById(“cartList”).currentStyle.display);
(兼容IE浏览器)

获取元素的位置

在网页中的一些悬浮框可以随着滚轮向下拉固定在固定的位置,我们通过CSS中的position定位可以实现,也可以通过javascript来实现

元素属性
属性描述
offsetLeft返回当前元素左边界到它上级元素的左边界的距离,只读属性
offsetTop返回当前元素上边界到它上级元素的上边界的距离,只读属性
offsetHeight返回元素的高度
offsetWidth返回元素的宽度
offsetParent返回元素的偏移容量,即对最近的动态定位的包含元素的引用
scrollTop返回匹配元素的滚动条的垂直位置
scrollLeft返回匹配元素的滚动条的水平位置
clientWidth返回元素的可见宽度
clientHeight返回元素的可见高度
元素属性应用
document.documentElement.scrollTop;   //标准浏览器
//或
document.body.scrollTop;   //chrome

document.documentElement.scrollLeft;
//或
document.body.scrollLeft;

可先获取元素与界面上方及左方边界的距离,然后获取随滚轮向下和向右拉动的距离,两者相加来给元素进行定位,实现元素在网页中固定悬浮的效果。

示例:

var sTop=document.documentElement.scrollTop ||document.body.scrollTop;


这篇关于JavaScript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程