JavaScript

最新推荐文章于 2022-09-27 23:38:21 发布

leafya

最新推荐文章于 2022-09-27 23:38:21 发布

阅读量230

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/leafya/article/details/101458433

版权

JavaScript基础

JavaScript概述

JavaScript的概念和执行原理

JavaScript也是程序语言中的一种，但是JavaScript是嵌入到HTML语言中，直接通过浏览器运行。

JavaScript的执行原理：当客户端向服务器端请求某个页面时，服务器端将整个页面中包含JavaScript的脚本代码作为响应内容，发送回客户端机器，客户端浏览器根据发回的网页文件从上往下逐行读取并解析其中的html或者脚本代码

JavaScript脚本代码是从服务器端下载到客户端，然后在客户端执行，它不占用服务器端的CPU等资源。因此，通过在客户端执行脚本代码，分担了服务器的任务，从而间接地提升了Web服务器的性能

JavaScript组成

ECMAScript：JavaScript语法核心。

DOM：文档对象模型（Document Object Model），提供访问和操作网页内容的方法和接口。

BOM：浏览器对象模型（Browser Object Model），提供与浏览器交互的方法和接口

JavaScript核心语法

先声明变量再赋值

var是声明变量的关键字。给变量命名时，要遵守如下规则：

（1）第一个字符必须是一个字母、下划线（_）或一个美元符号$。

（2）后面的字符可以是字母、下划线、美元符号或数字。

（3）区分大小写。

（4）不能与关键字同名，如while、for和if等
同时声明和赋值变量

可以使用一条语句定义多个变量，把每个变量用逗号分隔开即可。

例：

var i=“hi”;
var x=3,y=5;
不声明直接赋值，易出错，不建议使用

数据类型

JavaScript中有五种简单数据类型，也称为基本数据类型，分别是undefined、null、boolean、number和string。另外还有一种复杂数据类型——object对象类型。JavaScript是基于对象的语言，这意味着程序员既可使用系统自定义的对象，也可使用自己创建的对象

undefined

表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。
null

null是空类型，表示一个变量已经有值，但值为空对象，使用typeof检测时会返回object
boolean

boolean是布尔类型，也称真假类型。这个类型有两个标准值：true(真)和false(假)。

布尔值用来表示一个逻辑表达式的结果，通常用做判断处理。
number

整数或小数。
string

string是字符串类型，这是程序中使用最广的一种类型。字符串是使用单引号或双引号引起来的若干字符。

运算符

运算符号是一种特殊的符号，一般由1~3个字符组成，用于实现数据之间的运算、赋值和比较。

算术运算符：+（加）、-（减）、*（乘）、/（除）、%（求余）、++（一直加1）、–（一直减1）

“+”也能实现字符串的相加，只要表达式中有一个字符串，用“+” 相连成一个新的字符串，例如：’demo‘+123的结果是’demo123’。

赋值运算符：=

比较运算符：>（大于）、<（小于）、>=（大于等于）、<=（小于等于）、==（等于）、!=（不等于）

逻辑运算符：&&（与）、||（或）、！（非）

JavaScript的流程控制语句(选择、循环)

选择结构
- if
  - if单分支：
    
    if(条件表达式) {
    语句或语句块
    }
  - if双分支
    
    if(条件表达式) {
    语句或语句块1
    } else{
    语句或语句块2
    }
  - if多分支
    
    if(条件表达式1){
    语句或语句块1
    } else if(条件表达式2){
    语句或语句块2
    }…
    else if(条件表达式n){
    语句或语句块n
    }else{
    语句或语句块n+1
    }
- switch
  
  switch（表达式）{
  case 取值1：语句或语句块1;break;
  case 取值2：语句或语句块2;break;
  …
  case 取值n：语句或语句块n;break;
  default: 语句或语句块n+1;break;
  }
  
  例：
  
  var time=new Date();
  var week=time.getDay();
  switch(week){
  case 1:
  case 2:
  case 3:
  case 4:
  case 5:document.write(“工作日”);break;
  default:document.write(“休息日”);break;
  }
循环结构
- while
  
  while（条件表达式）{
  语句或语句块
  }
- do-while
  
  do{
  语句或语句块
  }while(条件表达式);
- for
  
  for(初始化表达式;循环条件表达式;循环后的操作表达式){
  语句或语句块
  }
- break与continue
  
  只有循环条件表达式的值为false时，循环语句才能结束循环，如果想提前中断循环，可以在循环体语句块中添加break语句。在循环体中添加continue语句，就跳过本次循环要执行的剩余语句，然后开始下一次循环。

JavaScript函数和事件

JavaScript的函数

定义函数

function 函数名（形式参数1,形式参数2,…,形式参数n）{
语句
}

定义函数有以下几个规则：

使用function关键字，function后是函数名，同java语言不同，不必说明返回值的类型。
函数的命名规则与变量名的命名规则相同。
函数名后的()，可以包含若干参数，也可以选择不带任何参数。
最后是一对{}，包含具体实现特定功能的若干语句。

系统函数

parseInt()

parseInt函数将字符串转换为整数。它从字符串的开头开始解析，在第一个非整数位置停止解析并返回前面读到的所有整数。如果字符串不是以整数开头，将返回NaN(Not a Number：非数字值)。

parseInt(string)


字符串	结果
“150cats”	150
“cats”	NaN
“6”	6
“-6”	-6
“6.56”	6

parseFloat()

返回一个浮点数

parseFloat(string)

字符串	结果
“route66.5”	NaN
“8.5dogs”	8.5
“6”	6
“6.56”	6.56
“.7”	0.7

isNaN()

isNaN() 函数用于判断参数是否是NaN（不是数字）。如果是 NaN，那么 isNaN 函数返回 true ，否则返回 false

isNaN(参数)

参数	结果
‘134’	false
‘2a34’	true
‘2.34’	false
’ ’ (空格)	false
‘wh’	true

eval()

运行以字符串形式表示的javascript代码串，并返回执行代码串后的结果

JavaScript的事件

onclick事件

鼠标单击页面元素时触发的事件

onload和onunload事件

onload 事件会在页面加载完成后立即发生
用户关闭或刷新网页时触发onunload事件

onblur事件

onblur事件是指光标或者焦点离开元素后触发的事件

onchange事件

onchage事件通常指输入框的值发生了变化或者改变下拉框的选项会触发onchange事件。
在下拉列表框中选中友情链接后，窗口打开指定的页面。

onmouseover和onmouseout事件

onmouseover和onmouseout事件是指鼠标移入、移出页面元素时触发的事件

BOM编程

浏览器对象模型（BOM）

一个完整的浏览器对象模型主要包括window、history、location和document等对象，其中window对象是整个浏览器对象模型的顶层对象
各个对象所处位置及其关系如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38DolPFI-1569491772020)]

window对象

window对象处于对象模型的第一层，对于每个打开的窗口，系统都会自动将其定义为window对象。

window常用的属性

属性	含义
document	窗口中当前显示的文档对象
history	History对象保存窗口最近加载的URL
location	当前窗口的URL
status	状态栏文本

常见的方法

方法	说明
prompt	显示可提示用户输入的对话框
alert	显示带有一个提示消息和一个确定按钮的警示框
confirm	显示一个带有提示信息、确定和取消按钮的确认框
close	关闭浏览器窗口
open	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout	在设定的毫秒数后调用函数或计算表达式
setInterval	按照设定的周期（以毫秒计）来重复调用函数或表达式
clearInterval	取消重复设置，与setInterval对应

利用窗口对象的open、close方法打开、关闭窗口

open方法的返回值是打开的window的对象。Open方法的第一个参数是新窗口的URL，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征。常见的特征如下表：

名称	说明
height、width	窗口文档显示区的高度、宽度。单位为像素
left、top	窗口的x坐标、y坐标。单位为像素
toolbar=yes \| no \|1 \| 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes \| no \|1 \| 0	是否显示滚动条。黙认是yes
location=yes \| no \|1 \| 0	是否显示地址地段。黙认是yes
status=yes \| no \|1 \| 0	是否添加状态栏。黙认是yes
menubar=yes \| no \|1 \| 0	是否显示菜单栏。黙认是yes
resizable=yes \| no \|1 \| 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes \| no \|1 \| 0	是否显示标题栏。黙认是yes

window对象计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

setInterval() 方法

setInterval方法会根据设置的时间间隔反复执行指定的代码，直至程序结束或利用clearInterval方法取消。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>每三秒弹出 "hello"</title>
</head>
<body>

<p>单击按钮每3秒出现一个“Hello”警告框。</p>
<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	setInterval(function(){alert("Hello")},3000);
}
</script>

</body>
</html>

setTimeout() 方法

setTimeout方法会在指定的时间执行指定的代码并退出。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>等待3秒后弹出“hello”</title>
</head>
<body>

<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	setTimeout(function(){alert("Hello")},3000);
}
</script>

</body>
</html>

history对象

history对象保存了当前浏览器窗口打开文档的一个历史记录列表，使用history对象，可以将当前浏览器页面跳转到某个曾经打开过的页面。

方法	描述
history.back()	后退一个页面，相当于浏览器后退按钮
history.forward()	前进一个页面，相对于浏览器前进按钮
history.go()	打开一个指定位置的页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后退</title>
<script>
    function goBack()
    {
        window.history.back()
    }
</script>
</head>

<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

location对象

location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏。location对象通过window的location获取属性，location对象的常用属性和方法如下表：

名称	描述
href属性	获取或设置网页地址
reload方法	重新加载当前页面，相对于浏览器的刷新按钮

DOM编程

文档对象模型（DOM）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

DOM把html文档看成由元素、属性和文本组成的一棵倒立的树：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38DolPFI-1569491772020)]

document对象

document对象的方法主要用于操作文档节点，控制其内容和外观。其常用的方法如下表：

名称	描述
write	用于向html文档中动态输入内容
getElementById	返回对拥有指定 id 的第一个对象的引用
getElementsByTagName	返回带有指定标签名的对象集合。
getElementsByName	返回带有指定名称的对象集合
createElement	创建代表某个html元素的对象

节点信息

DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
属性节点和文本节点都属于元素节点的子节点。因此操作时，需先选中元素节点，再修改属性和文本。

如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name和tag，可以根据层次关系来查找节点，在DOM中，每个节点都具有访问各节点的属性。

属性名	描述
parentNode	当前节点的父节点引用
childNodes	当前节点的所有子节点
firstElementChild	当前节点的第一个子节点
lastElementChild	当前节点的最后一个子节点
previousSibling	当前节点前一个兄弟节点
nextSibling	当前节点后一个兄弟节点

动态添加和删除节点

使用document对象可以创建、添加和删除DOM树的节点，因此可以使用document对象制作动态添加、删除页面元素的特效。

<script type="text/javascript">
 var newNode=document.createElement("div");
 newNode.className="content";
 newNode.innerHTML="这是一个新创建的节点";
 </script>

使用appendChild(node)将指定的节点追加到现有子节点的末尾
使用removeChild删除节点

JavaScript常用对象

Date对象

通过创建Date对象，可以获取计算机中的时间。由于脚本总是在客户端中运行，而不是服务器，所以获取的是本地计算机的时间。

Date对象方法

方法	功能
getDate	返回一个月中的某一天（1~31）
getDay	返回一周中的某一天（0~6），0为周日，1为周一，以此类推
getFullYear	以四位数返回年份
getHours	返回小时（0~23）
getMilliseconds	返回毫秒
getMinutes	返回分钟（0~59）
getMonth	返回月份（0~11），0为一月，1为二月，以此类推
getSeconds	返回秒数（0~59）
getTime	返回1970年1月1日至今的毫秒数

Math对象

使用Math对象可以进行更多的高级运算，如：平方根、三角函数、对数和随机数等。


Math.abs(number)	返回number的绝对值
Math.ceil(number)	对number向上取整，如Math.ceil(67.6)返回值是68
Math.floor(number)	对number向下取整，如Math.ceil(67.6)返回值是67
Math.max(number1,number2)	返回number1与number2中的较大值
Math.min(number1,number2)	返回number1与number2中的较小值
Math.pow(x,y)	返回x的y次幂
Math.random()	返回0和1之间的伪随机数，可能为0，但总是小于1，[0,1)
Math.round(number)	返回最接近number的整数
Math.sqrt(number)	number的平方根

数组

数组就是用一个变量来表示的一组数据的集合。它用于实现对这组数据的统一管理，数组中的每一个数据也叫数组的一个元素。
数组列表用于表示一组数据的集合，它由一对方括号（[]）包围，列表中的每个元素用逗号分隔，数组元素可以是任意类型的数据（包括其他数组）

Array对象

JavaScript中也提供一个名为Array的内部对象来创建数组。通过调用Array对象的各种方法，可以方便地对数组进行排序、删除和合并等操作。Array有多种形式的构造函数，因此利用Array对象创建数组的方式有多种，下面列出了最常用的三种方式：

new Array();
new Array(size);
new Array(element0, element1, …, elementn);

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

String对象

String是动态对象，需要创建对象实例后才能使用它的属性或方法。需要注意的是，当某字符串使用单引号或双引号标注时，可以被当作字符串对象实例进行处理，从而直接调用String对象的属性和方法。

常用属性

length是String对象的最常用属性，用于计算字符串中的字符个数。例如计算“abcdf”的长度。
var len=" abcdf ".length;

String对象方法

名称	描述
charAt	返回字符串对象中指定索引处的字符，索引从0开始
indexOf	返回某个子字符串在目标字符串中首次出现的位置，在目标字符串中没有子字符串则返回-1
substr	从指定索引位置开始截取指定长度的字符串
substring	返回指定索引范围内的字符串。
toLowerCase	把字符串转化为小写
toUpperCase	把字符串转化为大写。
split	返回按照指定分隔符拆分的若干子字符串数组。如：var arr=“hello,world”.split(",");arr是数组变量，其中第一个数组元素是“hello”，第二个数组元素是“world”

with语句

在一段连续的程序代码中，如果多次使用到某个对象的属性或方法，那么只需要在with关键字后的小括号中写出这个对象的名称，然后就可以在其后大括号中的执行语句里直接引用该对象的属性名或方法名，不必再在每个属性和方法名前都加上对象实例名和点（.）

语法：
with(对象名称){
   执行语句块
}

制作时间特效的案例可以使用with语句进行简写：

function showTime(){
 var today = new Date(); 
 with(today){
 var year=getFullYear();//获得年
 var month=getMonth()+1;//获得月
 var day=getDate();//获得日
 var hh =getHours();  //获得小时、分钟和秒
 var mm =getMinutes();//获得分钟
 var ss =getSeconds();//获得秒
}
document.getElementById("myclock").innerHTML=year+"年"+month+"月"+day+"日"+hh+":"+mm+":"+ss;
}
window.setInterval("showTime()",1000);//每隔1秒取一次当前的时间
window.onload=showTime;

续的程序代码中，如果多次使用到某个对象的属性或方法，那么只需要在with关键字后的小括号中写出这个对象的名称，然后就可以在其后大括号中的执行语句里直接引用该对象的属性名或方法名，不必再在每个属性和方法名前都加上对象实例名和点（.）

语法：
with(对象名称){
   执行语句块
}

制作时间特效的案例可以使用with语句进行简写：

function showTime(){
 var today = new Date(); 
 with(today){
 var year=getFullYear();//获得年
 var month=getMonth()+1;//获得月
 var day=getDate();//获得日
 var hh =getHours();  //获得小时、分钟和秒
 var mm =getMinutes();//获得分钟
 var ss =getSeconds();//获得秒
}
document.getElementById("myclock").innerHTML=year+"年"+month+"月"+day+"日"+hh+":"+mm+":"+ss;
}
window.setInterval("showTime()",1000);//每隔1秒取一次当前的时间
window.onload=showTime;