JavaScript基础:
概念:一门客户端脚本语言
运行在客户端浏览器中,每一个浏览器都有JavaScript的解析器
脚本语言:不需要编辑,直接就可以被浏览器解析执行
功能:
可以来增强用户和HTML页面的交互过程,可以来控制HTML元素,让页面有一些动态的效果,增强用户的体验
ECMAscript:客户端脚本语言的标准
1、基本语法
1、与HTML结合方式
内部js: 定义 <script>,标签体内容就是js代码
外部js:定义<script> 通过src属性引入外部的js文件
注意: <script>可以定义在HTML的任何地方,但是定义的位置会影响执行的顺序 <script>可以定义多个
2、注释:单行注释 //: 注释内容 多行注释 :/***/
3、数据类型
原始数据类型(基本数据类型)
number:数字。整数、小数、NaN(not a number 一个不是数字的数字类型
boolean: true和false
string :字符串。
null:一个对象为空的占位符
undefined:未定义,如果一个变量没有给初始化值,则会被默认赋值为undefined
引用数据类型:对象
4、变量: 输出到页面上document.write() typeof(变量名):得知是什么数据类型
变量:一小块存储数据的内存空间
Java语言是强类型语言,而JavaScript是弱类型的语言
强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据
弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据
语法: var 变量名 = 初始化值
5、运算符
1、一元运算符 注意:在JS中,如果运算数不是运算符所要求的类型,那么JS引擎会自动的将运算数经行类型的转换
其他类型转number:
string转number:按字面值转换,如果字面值不是数字,则转为NaN(不是数字的数字)
boolean转number:true转为1,false转为2
2、算术运算符
3、赋值运算符
4、比较运算符 ===(全等于)
比较方式:
1、类型相同:直接比较
字符串:按照字典顺序比较。按位逐一比较,直到得出大小为之
类型不同:先进性类型转换,再比较
===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
5、逻辑运算符
其他类型转boolean:
number:0或NaN为假,其他为真
string:除了空字符串(""),其他都是true
null&undefined:都是false
对象:所有对象都为true 防止空指针异常也可简化代码
6、三元运算符:表达式?值1:值2 判断表达式的值如果为true取值为1,false取值为2
6、流程控制
switch:在Java中,switch语句可以接受的数据类型:byte int shor char 枚举 Sring
在JS中:switch语句可以接受任意的原始数据类型
7、JS的特殊语法
1、语句以 ; 结尾,如果一行只有一条语句则 ; 可以省略(不建议)
2、变量的定义使用var关键字,也可以不使用
用:定义的变量是局部变量
不用:定义的是全局变量
基本对象:
Function:函数(方法)对象
1、创建
function 方法名称(形式参数列表){
方法体
}
var 方法名 = function(形式参数列表){
方法体
}
2、方法
3、属性
length代表形参的个数
4、特点
方法的定义是,形参的类型不用写,返回值类型也可以不写
方法是一个对象,如果定义一个相同名称的方法,会被覆盖
在JS中,方法的调用只与方法的名称有关,和参数列表无关
在方法声明中有一个隐藏的内置对象(数组),argument封装所有的实际参数
5、调用
方法名称(实际参数列表)
Array:数组对象
1、创建:
var arr = new Arrary(元素列表);
var arr = new Arrary(默认长度);如果只有一个数字则为默认的长度
var arr = [元素列表]
2、方法:
concat() | 连接两个或更多的数组,并返回结果。 |
join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
pop() | 删除并返回数组的最后一个元素 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
reverse() | 颠倒数组中元素的顺序。 |
shift() | 删除并返回数组的第一个元素 |
slice() | 从某个已有的数组返回选定的元素 |
sort() | 对数组的元素进行排序 |
splice() | 删除元素,并向数组添加新元素。 |
toSource() | 返回该对象的源代码。 |
toString() | 把数组转换为字符串,并返回结果。 |
toLocaleString() | 把数组转换为本地数组,并返回结果。 |
unshift() | 向数组的开头添加一个或更多元素,并返回新的长度。 |
valueOf() | 返回数组对象的原始值 |
3、属性:length :数组的长度
4、特点:
在JS中,数组的元素类型是可变的
在JS中,数组的长度是可变的
Boolean:
Date:日期对象
1、创建 var date=new Date();
2、对象
toLocaleString();返回当前date对象对应的时间本地字符串格式
getTime();获取毫秒值,返回当前日期对象描述的时间到1970年1月1日零点毫秒值差
Date() | 返回当日的日期和时间。 |
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
getFullYear() | 从 Date 对象以四位数字返回年份。 |
getYear() | 请使用 getFullYear() 方法代替。 |
getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
parse() | 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。 |
setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
setFullYear() | 设置 Date 对象中的年份(四位数字)。 |
setYear() | 请使用 setFullYear() 方法代替。 |
setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
setTime() | 以毫秒设置 Date 对象。 |
setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
setUTCFullYear() | 根据世界时设置 Date 对象中的年份(四位数字)。 |
setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
setUTCSeconds() | 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。 |
setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
toSource() | 返回该对象的源代码。 |
toString() | 把 Date 对象转换为字符串。 |
toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
toDateString() | 把 Date 对象的日期部分转换为字符串。 |
toGMTString() | 请使用 toUTCString() 方法代替。 |
toUTCString() | 根据世界时,把 Date 对象转换为字符串。 |
toLocaleString() | 根据本地时间格式,把 Date 对象转换为字符串。 |
toLocaleTimeString() | 根据本地时间格式,把 Date 对象的时间部分转换为字符串。 |
toLocaleDateString() | 根据本地时间格式,把 Date 对象的日期部分转换为字符串。 |
UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
valueOf() | 返回 Date 对象的原始值。 |
Math:数学对象
1、创建 :特点:Math对象不用创建,直接使用 Math.方法名()
2、方法
random()返回0到1之间的随机数(包含0不包含1)
取一到一百的随机数 Math.floor((Math.random()*100)+1
ceil(x) 对数进行上舍入
floor(x)对数进行下舍入
round(x) 把数四舍五入为最接近的整数
abs(x) | 返回数的绝对值。 |
acos(x) | 返回数的反余弦值。 |
asin(x) | 返回数的反正弦值。 |
atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 |
ceil(x) | 对数进行上舍入。 |
cos(x) | 返回数的余弦。 |
exp(x) | 返回 e 的指数。 |
floor(x) | 对数进行下舍入。 |
log(x) | 返回数的自然对数(底为e)。 |
max(x,y) | 返回 x 和 y 中的最高值。 |
min(x,y) | 返回 x 和 y 中的最低值。 |
pow(x,y) | 返回 x 的 y 次幂。 |
random() | 返回 0 ~ 1 之间的随机数。 |
round(x) | 把数四舍五入为最接近的整数。 |
sin(x) | 返回数的正弦。 |
sqrt(x) | 返回数的平方根。 |
tan(x) | 返回角的正切。 |
toSource() | 返回该对象的源代码。 |
valueOf() | 返回 Math 对象的原始值。 |
3、 属性
E | 返回算术常量 e,即自然对数的底数(约等于2.718)。 |
LN2 | 返回 2 的自然对数(约等于0.693)。 |
LN10 | 返回 10 的自然对数(约等于2.302)。 |
LOG2E | 返回以 2 为底的 e 的对数(约等于 1.414)。 |
LOG10E | 返回以 10 为底的 e 的对数(约等于0.434)。 |
PI | 返回圆周率(约等于3.14159)。 |
SQRT1_2 | 返回返回 2 的平方根的倒数(约等于 0.707)。 |
SQRT2 | 返回 2 的平方根(约等于 1.414)。 |
Number
String
RegExp:正则表达式对象:
1、正则表达式:定义字符串的组成规则
1、单个字符:[ ] 如[a] [ab] [a-zA-Z0-9_] 特殊符号代表特殊含义的单个字符·: \d:单个数字字符 [0-9] \w:单个单词字符 [ a-zA-Z0-9_]
2、量词符号:
?:表示出现0次或1次
*:表示出现0次或多次
+:表示出现1次或多次
{m,n}:表示 m<=数量<=n m如果缺省:{,n}最多n此 n如果缺省{m,}最少m次
3、开始结束符号
^:开始 $:结束
2、正则表达式对象:
1、创建
var reg =new RegExp("正则表达式")
var reg = /正则表达式/;
2、方法: test();验证指定的字符串是否符合正则定义的规范
Global :
创建:
1、特点:全局对象,这个Global中封装的方法不需要对象就可直接调用 方法名()
2、方法
encodeURI():url编码
decodeURI():url解码
encodeURIComponent():url编码 编码的字符更多
decodeURIComponent():url解码
parseInt();将字符串转为数字
逐一判断每一个字符是否为数字,直到不是数字为止,将前边数字部分转换为number
isNaN():判断一个值是否为NaN NaN六亲不认,连自己都不认,NaN参与的==比较全部为false
eval():将JavaScript字符串转化为脚本代码来执行
3、URL:编码
DOM简单学习:
功能:控制HTML文档的内容
获取页面标签元素对象:Element
document.getElementById("id值"):通过元素的id获取元素对象
操作Element 对象
修改属性值
明确获取的对象是哪一个
查看API文档,找其中有哪些属性可以设置
修改标签体内容
属性innerHTML
获取元素对象
使用innerHTML属性修改标签体内容
事件的简单学习
功能:某些组件被执行了某些操作后,触发了某些代码的执行
如何绑定事件
1、直接在HTML标签上,指定事件的属性(操作),属性值就是js代码
1、事件:onclik--点击事件
2、通过js获取元素对象,指定事件属性,设置一个函数
BOM:
概念:Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
Window:窗口对象
1、创建
2、方法
1、与弹出框有关的方法
alert()显示带有一段信息和一个确认按钮的警告框
confirm()显示带有一段信息以及确认按钮和取消按钮的对话框 如果用户点击确定按钮,则方法返回true 否则点击取消返回false
prompt()显示可提示用户输入的对话框
返回值获取:用户输入的值
2、与开关有关的方法:
close()关闭浏览器窗口 谁调用关谁
open()打开一个新的浏览器窗口 返回一个新的window对象
3、 与定时器有关的对象
setTimeout() 在指定的毫秒值后调用函数或计算表达式
参数:
1、js代码或者方法对象
2、毫秒值
返回值是:唯一标识,用于取消定时器
clearTimout()取消由setTimeout()方法设置的timeout
setInterval() 按照指定的周期(以毫秒计算)来调用函数或者计算表达式
clearInterval()取消由setInterval()设置的timeout
3、属性
1、获取其他BOM对象
history
location
navigator
screen
2、获取DOM对象
document
4、特点
Window对象不需要创建可以直接使用 window使用 ,window.方法名
window引用可以省略 方法名();
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
1、创建 (获取):
1、window.history
2、history
2、方法
back() 加载history 列表中的前一个URL
forward()加载history列表中的下一个URL
go(参数):正数 :前进几个历史记录 负数:后退几个历史记录
3、属性
length()返回当前窗口历史记录中的URL数量
Location:地址栏对象
1、创建(获取):
1window.Location
2、location
2、方法
reload() 重新加载当前文档,刷新
属性
href 设置或返回完整的URL
DOM
概念:Document Object Model 文档对象模型
将标记语言的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
W3C DOM标准被分为 3 个不同的组成部分
核心 DOM 针对任何结构化文档的标准模型
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment: 注释对象
Node:节点对象。其他五个的父对象
XML DOM 针对 XML文档的标准模型
HTML DOM针对HTML的标准模型
核心DOM模型
Document:文档对象
1、创建(获取):在HTML dom模型中可以使用window对象来获取
1、window.document
2、document
2、方法
1、获取Element对象
1、getElementById():根据id属性值获取元素对象,id属性值一般唯一
2、getElementsByTagName():根据元素名称获取元素对象,返回值是一个数组
3、getElemensByClassName():根据class属性值获取元素对象,返回值是一个数组
4、getElementsByName():根据name属性值获取元素对象,返回值是一个数组
2、创建其他DOM对象
createAttribute(name)
createComment()
createElement()
createTextNode()
3、属性
Element:元素对象
1、获取/创建:通过document来获取和创建
2、方法:
removeAttribute():删除属性
setAttribute():设置属性
Node:节点对象其他五个的父对象
超链接功能:可以被点击:样式 点击后跳转到href指定的url需求:保留点击功能去掉跳转功能 实现 href="javascript:void(0);"
特点:所有dom对象都可以被认为是一个节点
方法:CRUD dom :
appendChild() :向节点的子节点列表的结尾添加新的子节点
removeChild();删除(并返回)当前节点的指定子节点
replaceChild():用新节点替换一个子节点
属性:parentNode返回节点的父节点
HTML DOM:
1、标签体的设置和获取:innnerHTML
2、使用HTML元素对象的属性
3、控制样式
1、使用元素的style属性来设置
2、提前控制好类选择器的样式,通过元素的className属性来设置class属性值