JavaScript

变量

本质

程序在内存中申请的一块用来存放数据的小空间

基本函数:

//prompt('附带文本提示') 弹出输入框

//输出字符:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。//document.write("字符");
  • 使用 innerHTML 写入到 HTML 元素。 解析HTML标签
  • 使用innerText写入到文本中 不解析HTML标签
  • 使用 console.log() 写入到浏览器的控制台。//console.log(变量);

函数(特别的):

间歇器函数:

  • setInterval("执行操作",时间); 表示每隔时间(单位为毫秒)执行一次操作,其中,执行操作要用引号括起来
  • setTimeOut("执行操作",时间); 表示隔时间(单位为毫秒,一次性)执行操作,其中,执行操作要用引号括起来

执行操作有两种:

  1. setInterval("函数名()",时间)
  2. setInterval(函数名,时间)

引用方式:

1. 行内式

<input type="button" value=" 值 " οnclick="alert('弹出内容')" >

(其中onclick绑定一个事件 鼠标点击时,alert()是js内置的弹出警示框的方法)

2. 内嵌式

<script>

alert('内嵌式 ');

</script>

(在script标签内部编写js代码即可)

3. 外链式

<script src= " js文件的地址 " ></script>

(注意:使用外链式引入 js 时,不可以再向 引入js文件的那个 script 标签中再写 js 代码;但在其他的script标签中写js代码是完全可以的!)

属性:

属性

说明

语法格式

language

设置使用的脚本语言及版本

language="JavaScript1.5" 其中引号内的表示版本

src

设置一个外部脚本文件的位置

src="文件名.js" 指定外部文件的脚本位置

type

设置所使用的脚本语言,此属性已代替language属性

type="text/javascript"

defer

此属性表示当HTML文档加载完毕后再执行脚本语言

defer 没有属性值

变量

命名规则:

由字母、下划线、$、或数字组成,并且第一个字母必须是字母、下划线或$,变量不能是保留字或者系统关键字。

变量的声明(所有变量的命名):

1.var 变量名 = 值 ;

缺点:

  • 可以先使用后声明
  • 可以重复声明
  • 比如变量提升、全局变量、没有块级作用域等

2.let 变量名 = 值;

常量:

const 常量名 = 值;

声明时必须赋值

一般变量名是全大写表示

数据类型(基本数据类型:数字、字符串、布尔值、未定义值、空值;常见的引用数据类型为:对象):

注意:

1.用单引号括起来的字符不能含有单引号,双引号括起来的字符不能含有双引号,因为JavaScript分辨不清楚哪两个双引号是一对

2.数字如果被引号括起来了那么其为字符串,一般情况下不能进行运算

3.未定义值是该变量定义了没有赋值,此时,其输出结果为undefined

4.空值表示该值=null且为给该变量分配空间

5.数值型的特殊值:Infinity(超出了JavaScript能表示的数值最大值时,表示无穷大),NaN表示非数字

变量引用

模板字符串:反引号包含数据,输出时在要引用部分改为${变量名}即可

一般方法:直接使用加法原则

变量检测:

typeof 变量名

类型转换:
  • 单+号:转换成数字型
  • 类型(变量名)

运算符(与其他语言类似)

1.算数运算符:

加法:

  1. 数字+数字=数字 var num = 10 + 5 //num的值是15
  2. 字符串+字符串=字符串 var str = "hello" + "world" //str的值为“helloworld”
  3. 字符串+数字=字符串 var str = "今年是" + 2023 //str的值为“今年是2023”(这是一个字符串)

//因为被引号括起来的数字也是字符串,所以按以上第3种情况进行运算

自增运算符:

i++:

指的是使用之后再自增

++i:

指的是先自增再使用

自减运算符同上

2.赋值运算符:

运算符

展开式

a+=b

a=a+b

a-=b

a=a-b

a*=b

a=a*b

a/=b

a=a/b

a%=b

a=a%b

3.比较运算符
4.逻辑运算符
5.条件运算符

a = 条件 ? 表达式1:表达式2;

表示条件成立时执行a = 表达式1,不成立时执行表达式2

//分号为语句结束的标志

= 赋值

== 判断,只求值相等

=== 全等,包括数据类型和值

!= 判断,只求值不相等

!== 全不等,包括数据类型和值

类型转换:

1.字符串转换为数字

  • Number() 可以将任何数字型字符串(引号内只有数字的字符串)转换成数字
  • parselnt()和parseFloat() 准确的说,其可以提取首字母为数字的任意字符串中的数字,parselnt()只能提取整数部分,parseFloat()可以提取整数和小数部分,其作用原理为,判断第一个字符是否为数字或者正(+)负(-)号,如果不是,直接退出返回NaN(No a Number),(小数点也是非数字,parseFloat()中不能出现在第一位)

2.数字转换为字符串

  • 与空字符串相加 (较多使用)
  • toString() 用法为 变量.toString(); 表示将变量转换成字符串
转义字符:

转义字符

说明

转义字符

说明

\'

英文单引号

\b

退格

\"

英文双引号

\t

水平制表符,Tab空格

\n

换行符

\f

换页

\v

垂直制表符

\r

回车符

\\

反斜杠

\OOO

八进制整数,范围为000~777

\xHH

十六进制整数,范围为00~FF

\uhhhh

十六进制编码的Unicode字符

注意:

如果在document.write()中换行应该用<br/>

如果是在alert()中换行时,使用\n

//document.write()中的内容是显示在网页中的,alert()中的内容是显示在弹窗中的

JavaScript注释:

单行注释://注释内容

多行注释(在*号之间即可):/*注释内容*/

//HTML的注释:<--内容-->

//CSS注释:/*内容*/

流程控制

1.顺序结构
2.选择结构
if
  • 单向选择: if(条件){语句}若条件成立,执行大括号内的语句
  • 双向选择:if(条件){语句块1}else{语句块2}若条件成立,执行if后面大括号的语句块1,不成立执行else后的大括号内的语句块2
  • 多向选择:if(条件){语句块1}else if(条件2){语句块2}···else{语句块n} 先判断第一个if条件,若条件成立,执行if后面大括号的语句块1,不成立判断第二个if后的语句,成立执行,不成立继续下一个if,如果没有if了,执行else后的大括号内的语句块n
switch

switch(判断值)

{

case 取值1:语句块1

break;

case 取值2:语句块2

break;

case 取值3:语句块3

break;

·

·

·

case 取值n:语句块n

break;

}

从上依次判断,哪个取值成立则执行哪个后面的语句块(判断值的形式为全等:===)

3.循环结构

1.while(){}

2.do{}while();

3.for(;;){}

异常处理语句:

try{

somestatements;

}catch(exception){

somestatements;

}finally{

somestatements;

}

//try 尝试执行代码关键字

//catch 捕捉异常的关键字

//finally 最终一定会被处理的区块关键字,该关键字和后面大括号中的语句可以省略

Error对象:

name:表示异常类型的字符串

message:实际的异常信息

throw语句:

语法:

throw new Error("somestatements");

示例:

if(num==0)

{

throw new Error("除数不能为0");

}

此时,catch中的异常信息可表示为exception.message

函数:

函数定义:function 变量名(参数1,参数2,···,参数n){···}

有无返回值都是以上定义的方法,但是如果有返回值,函数需要在函数体内最后一行加上return 返回值;

函数的形参可以规定值,意思是如果没有参数传入即执行,如:

function (a = 1){} 如果没有参数传入则a=1,如果有,则a=传入的参数 即默认值

函数调用:
  • 直接调用(一般用于无返回值的函数)
  • 表达式中调用(一般用于有返回值的函数)
  • 在超链接中调用 语法为:<a href="javascript:函数名"></a>
  • 在事件中调用

嵌套函数:

函数内部定义函数,但是该函数只能在内部使用

内置函数(内部定义好的函数):

函数

说明

parselnt()

提取字符串中的数字,只提取整数

parseFloat()

提取字符串中的数字,可以提取小数

isFinite()

判断某一个数是否有一个有限数值

isNaN()

判断一个数是否为NaN值

escape()

对字符串进行编码

unescape()

对字符串进行解码

eval()

把一个字符串当做表达式来执行

encodeURI()

对URI字符串进行编码

decodeURI()

对已编码URI字符串进行解码

protostype属性(每个对象都具有的属性):

该属性可以向对象中添加属性或方法

语法格式:

object.prototype.name = value;(object 构造函数名,name 要添加的属性名或方法名,value 添加属性值或执行方法的函数

for ··· in···语句

作用:遍历对象的每一个属性

注意:输出时使用数组的格式;如:

for(var example in 对象名)

{

document.write("属性:"+example+"+object[example]+"<br>");

}

with函数:

with(对象名称){

}

//{}内可以直接引用对象的属性和方法

对象

说明:

调用对象属性时,用“.”

内置对象

1.字符串对象:String

字符串对象名.length 表示该字符串对象的字符串长度

字符串对象名.toLowerCase()或toLocalLowerCase() 表示将字符串中的大写字符转换成小写(后一种不常用)

字符串对象名.toUpperCase()或toLocalUpperCase() 表示将字符串中的小写字符转换成大写(后一种不常用)

字符串对象名.charAt(n) 获取第n+1个字符(因为第一个字符下标为0)

字符串对象名.substring(start, end) 表示截取[start,end)范围的字符串,如果end省略,表示从start截到结尾

字符串对象名.replace(原字符串,替换字符串) 表示替换所有原字符串为替换字符串

字符串对象名.replace(正则表达式,替换字符串) 正则表达式为/字符串/g,表示替换第一个正则表达式中的字符串

字符串对象名.split("分隔符") 表示用选中的分隔符为剪刀,将字符串分割为若干部分,若引号内无内容,则分割每一个字符

字符串对象名.indexOf(指定字符串) 表示找出指定字符串目标字符串首次出现的位置,返回值为其下标

字符串对象名.lastIndexOf(指定字符串) 表示找出指定字符串目标字符串最后一次出现的位置,返回值为其下标

indexOf(指定字符串)与lastIndexOf(指定字符串)在没有找到指定字符串时均返回-1

方法

说明

anchor()

创建HTML锚

big()

使用大号字体显示字符串

small()

使用小号字体显示字符串

fontsize()

使用指定的字体大小来显示字符串

bold()

使用粗体来显示字符串

italics()

使用斜体显示字符串

link()

将字符串显示为链接

strike()

使用删除线来显示字符串

blink()

使用闪动字符串,此方法不支持IE游览器

fixed()

以打字机文本显示字符串,相当于在字符串两边增加<tt>标签

fontcolor()

以指定的颜色显示字符串

sub()

将字符串显示为下标

sup()

将字符串显示为下标

trim()

去除字符串两边的空格

将一个字符串倒序:

split("")将字符串按特定的方式分割重组为一个数组
reverse()用于颠倒数组中元素的顺序
join("")将数组按特定的方式重组为一个字符串

2.数组对象:Array

创建:

var 数组名 = new Array(元素1,元素2,···,元素n); 完整形式

var 数组名 = [元素1,元素2,···,元素n]; 简写形式

//数组的下标从0开始

数组名.slice(start, end); 获取数组[start,end)部分,获取的为start开始到end-1的元素

数组名.unshift(新元素1,新元素2,···,新元素n); 表示在数组开头添加新元素

数组名.push(新元素1,新元素2,···,新元素n); 表示在数组结尾添加新元素

数组名.shift() 表示删除数组中一个元素

数组名.pop() 表示删除数组中最后一个元素

数组名.splice(start, length,element1,element2,···) 表示删除数组中start(下标,包括start)开始之后的length长度的元素,并在数组后添加element1,element2···

数组名.sort(函数名) 表示对数组中所有元素进行大小比较,其中,函数名为定义数组排序的函数名称

升序降序函数定义:

升序

降序

function up(a,b)

{

return a - b;

}

function down(a,b)

{

return b - a;

}

数组名.reverse() 表示实现数组中所有元素的反向排列(即:颠倒数组元素的顺序)

数组名.map(回调函数); 返回值为新数组

实例:arr.map(function (ele,index) {retrun 字符串})

数组名.join("连接符"); 表示将数组中的元素通过连接符连接成字符串 若没有连接符,则默认为逗号

3.日期对象:Date

实例化(new):

  1. 得到当前的时间
    1. const date = new Date();
  1. 得到固定的时间
    1. const date = new Date("固定时间");
      1. 固定的时间格式可为:年-月-日 时: 分: 秒
      2. 固定的时间格式可为:年,月,日,时,分,秒

日期对象的方法:

方法

说明

getFullYear()

获取年份,取值为四位数字

getMonth()

获取月份,取值为0~11之间的整数,所以,在定义时,一般写为 var 变量名 = d.getMonth() + 1 即表示1~12之间的整数

getDate()

获取日数,取值为1~31之间的整数

getDay()

获取星期数,其返回值为0~6,0表示星期天,1~6分别表示星期一到星期六,可以先定义一个数组对应下标即可

getHours()

获取小时数,取值为0~23 之间的整数

getMinutes()

获取分钟数,取值为0~59 之间的整数

getSeconds()

获取秒数,取值为0~59 之间的整数

toLocaleString()

获取年月日时分秒

toLocaleDateString()

获取年月日

toLocaleTimeString()

获取时分秒

setFullYear(year,month,day)

可以设置年(必选参数)、月、日

setMonth(month,day)

可以设置月(必选参数)、日

setDate(day)

可以设置日(必选参数)

setHours(hour,min,sec,millisec)

可以设置时(必选参数)、分、秒、毫秒

setMinutes(min,sec,millisec)

可以设置分(必选参数)、秒、毫秒

setSeconds(sec,millisec)

可以设置秒(必选参数)、毫秒

时间戳(毫秒数):

使用场景:

计算倒计时的效果,需要借助时间戳来完成

算法:
  • 将来的时间戳-现在的时间戳 = 剩余时间毫秒数
  • 剩余时间毫秒数转换成剩余的年月日时分秒就是倒计时的时间

转换(先转换成秒数,即初以1000)

天数

parseInt(总秒数/60/60/24)

小时

parseInt(总秒数/60/60%24)

分钟

parseInt(总秒数/60%60)

秒数

parseInt(总秒数%60)

方法:
  1. 使用getTime()方法(必须实例化)

如:const date = new Date();console.log(date.getTime());

  1. 简写: +new Date()(字符串转换成数字型)

如:console.log(+new Date());

  1. 使用Date.now()方法(无须实例化,但是只能得到当前的时间戳)

如:console.log(Date.now());

4.数学对象:Math

属性

说明

PI

圆周率//度数可以写为:度数*Math.PI/180

LN2

2的自然对数

LN10

10的自然对数

LOG2E

以2为底e的对数

LOG10E

以10为底e的对数

SORT2

2的平方根

SORT1_2

2的平方根的倒数

方法

说明

max(a,b,c,···,n)

返回一组数的最大值

min(a,b,c,···,n)

返回一组数的最小值

sin(x)

正弦

cos(x)

余弦

tan(x)

正切

asin(x)

反正弦

acos(x)

反余弦

atan(x)

反正切

atan2(x)

反正切(常用,因为其可以精确返回哪一个角,而atan(x)不行)

floor(x)

向下取整(返回小于或等于x最近的整数)

ceil(x)

向上取整(返回大于或等于x最近的整数)

round(x)

返回最接近x的整数

random()

生成随机数 左闭右开 即[x,y)

abs(x)

返回x的绝对值

sqrt(x)

返回x的平方根

log(x)

返回x的自然对数(以e为底)

pow(x,y)

返回x的y次幂

exp(x)

返回e的指数

random生成随机数的技巧(一般嵌套在取整的方法内,表示生成该范围内的整数)
  • Math.random()*m 生成0~m的随机数 [0,m)
  • Math.random()*m+n 生成n~m+n的随机数
  • Math.random()*m-n 生成-n~m-n
  • Math.random()*m-m 生成-m~0的随机数

5.文档对象

介绍:

代表游览器的窗口中的文档,该对象是Window对象的子对象,DOM默认对象是Window,所以Window对象中的方法和子对象不需要使用window来引用,通过Document对象可以访问HTML文档中包含的任何标记,并且可以动态的更改文档中的某些内容。

属性:

属性

说明

alinkColor

链接文字被单击时的颜色,对应于<body>标记中的alink属性

all[]

储存HTML标记的一个数组(该属性本身也是一个对象)

bgColor

文档的背景颜色,对应<body>标签中的bgcolor属性

fgColor

文档的文本颜色(不包含超链接的文字),对应<body>标签中的text属性值

forms[]

储存窗体对象的一个数组(该属性本身也是一个对象)

images[]

储存图像对象的一个数组(该属性本身也是一个对象)

linkColor

未被访问的链接的文字的颜色,对应<body>标签中的link属性

links[]

储存link对象的一个数组(该属性本身也是一个对象)

vlinkColor

表示已访问的链接的文字颜色,对应<body>标签中vlink属性

title

当前文档标题对象

body

当前文档主体对象

readyState

获取某个对象的当前状态

URL

获取或设置URL

文档对象的常用方法:

方法

说明

close

关闭文档的输出流

open

打开一个文档的输出流并接收write和writeln方法创建页面内容

write

向文档写入HTML或JavaScript语句

writeln

向文档写入HTML或JavaScript语句,并以换行结束

createElement

创建一个HTML标记

//只有获取了该元素的元素节点才可以对其进行操作

方法

说明

document.getElementByld("id")

通过id来选择元素节点(不需要在id前加#)

document.getElementsByTagName("标签名")

通过标签名来选择元素节点

document.getElementsByClassName("类名")

通过类名来选择元素节点

querySelector()和querySelectorAll()

document.getElementsByName()

document.title和document.body

6.表单对象

原理:

HTML文档中可能会包含多个<form>标签,JavaScript会为每一个<form>标签创建一个Form对象,并将这些对象存放于forms[]数组中,所以JavaScript总共有三种方式访问表单

方式:

  1. 通过编号进行访问,如document.forms[0] 访问第一个表单
  2. 通过document.formname(名称)访问,如document.formname1
  3. 通过定位(DOM)访问,如:document.getElementById("id名") 通过id名访问表单

访问表单元素:

  1. 通过编号进行访问,如document.form1.elements[0] 访问第一个表单元素
  2. 通过document.form1.textname(名称)访问 访问form1中的名称为textname的
  3. 通过定位(DOM)访问,如:document.getElementById("id名") 通过id名访问表单

表单对象的属性:

属性

说明

name

返回或设置表单的名称

action

返回或设置表单提交的URL

method

返回或设置表单提交的方式,可取值为get或post

encoding

返回或设置表单信息提交的编码方式

id

返回或设置表单的id

length

返回表单对象中元素的个数

target

返回或设置提交表单时目标窗口的打开方式

elements

返回表单对象中的元素构成的表单数组,数组中的元素也是对象

表单对象的方法:

reset() 将所有的表单元素重置为初始值,相当于单击了重置按钮

submit() 提交表单数据,相当于单击了提交按钮

表单元素:

文本框:

属性

说明

id

返回或设置文本框的id属性值

name

返回文本框的名称

type

返回文本框的类型

value

返回或设置文本框内的文本,即文本框的值

rows

返回或设置多行文本框的高度

cols

返回或设置多行文本框的宽度

disabled

返回或设置文本框是否被禁用,该属性值为true时禁用文本框,为false时启用文本框

方法

说明

blur()

该方法用于将焦点从文本框中移开

focus()

该焦点用于将焦点赋给文本框

click()

该方法可以模拟文本框被鼠标单击

select()

该方法可以选中文本框中的文字

按钮:

属性

说明

id

返回或设置按钮的id属性值

name

返回按钮的名称

type

返回按钮的类型

value

返回或设置显示在按钮上的值

disabled

返回或设置按钮是否被禁用,该属性值为true时禁用按钮,为false时启用按钮

方法

说明

blur()

该方法用于将焦点从按钮中移开

focus()

该焦点用于将焦点赋给按钮

click()

该方法可以模拟按钮被鼠标单击

单选按钮和复选框:

属性

说明

id

返回或设置单选按钮或复选框的id属性值

name

返回单选按钮或复选框的名称

type

返回单选按钮或复选框的类型

value

返回或设置单选按钮或复选框的值

length

返回一组单选按钮或复选框中包含元素的个数

checked

返回或设置一个单选按钮或复选框是否处于被选中状态,该属性值为true时,单选按钮或复选框处于被选中状态,该属性值为false时,单选按钮或复选框处于未被选中状态

disabled

返回或设置单选按钮或复选框是否被禁用,该属性值为true时禁用单选按钮或复选框,为false时启用单选按钮或复选框

方法

说明

blur()

该方法用于将焦点从单选按钮或复选框中移开

focus()

该焦点用于将焦点赋给单选按钮或复选框

click()

该方法可以模拟单选按钮或复选框被鼠标单击

下拉菜单:

属性

说明

id

返回或设置下拉菜单的id属性值

name

返回下拉菜单的名称

type

返回下拉菜单的类型

value

返回或设置下拉菜单的值

multiple

该值设置为true时,下拉菜单中的选项会以列表的方式显示,此时可以进行多选,该值设置为false时,只能进行单选

length

返回下拉菜单中的选项个数

options

返回一个数组,数组中的元素为下拉菜单中的选项

selectedIndex

返回或设置下拉菜单中当前选中的选项在options[]数组中的下标

disabled

返回或设置下拉菜单是否被禁用,该属性值为true时禁用下拉菜单,为false时启用下拉菜单

方法

说明

blur()

该方法用于将焦点从下拉菜单移开

focus()

该焦点用于将焦点赋给下拉菜单

click()

该方法可以模拟下拉菜单被鼠标单击

remove(i)

该方法可以删除下拉菜单中的选项,其中,参数i为options[]数组的下标

Option对象

属性

说明

defaultSelected

该属性值为一个布尔值,用于声明在创建Option对象时,该选项是否为默认选项

index

返回当前Option对象在options[]数组中的下标

selected

返回或设置当前Option对象是否被选中,返回值true时被选中,返回值为false时为未被选中状态

text

返回或设置选项中的文字

value

返回或设置选项中的值

图像对象:

介绍:

HTML文档中可能会包含多个<img>标签,JavaScript会为每一个<img>标签创建一个Image对象,并将这些对象存放于images[]数组中,所以JavaScript总共有三种方式访问图像

方式:

  1. 通过编号进行访问,如document.images[0] 访问第一个图像
  2. 通过document.images["name"]访问 访问名称为name的图像
  3. 通过定位(DOM)访问,如:document.getElementById("id名") 通过id名访问表单

属性:

属性

说明

border

返回或设置图片的边框宽度,以像素为单位

heigeht

返回或设置图像高度,以像素为单位

hspace

返回或设置图片左边和右边的文字与图片之间的距离,以像素为单位

lowsrc

返回或设置替代图片的低分辨率图片的URL

name

返回或设置图片的名称

src

返回或设置图片的URL

vspace

返回或设置图片上面和下面的文字与图片之间的距离,以像素为单位

width

返回或设置图片的宽度,以像素为单位

alt

返回或设置鼠标经过图片时显示的文字

complete

判断图像是否完全被加载,如果完全被加载,返回true值

图片对象的事件:

事件

说明

abort

当用户放弃加载图片时触发该事件

load

成功加载图片时触发该事件

error

在加载图片过程中产生错误时触发该事件

click

在图片上单击鼠标时触发该事件

dblclick

在图片上双击鼠标时触发该事件

mouseover

当鼠标移动到图片上时触发该事件

mouseout

当鼠标从图片上离开时触发该事件

mousedown

在图片上按下鼠标键时触发该事件(还未松开时)

mouseup

在图片上释放鼠标键时触发该事件

mousemove

在图片上移动鼠标时触发该事件

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值