JavaScript基础
JavaScript 基础
javaScript 基于对象与驱事件动的具有安全性的脚本语言
基于对象
可以使用JS提供的对象的属性方法,也可以自己创建对象。
面向对象:封装 继承 多态
基于对象:封装
事件驱动:
事件:针对浏览器页面的所有操作统称为事件 如:点击,页面加载,鼠上移标
事件驱动:对应每个事件执行的应用程序称之为事件驱动
脚本语言:弱类型语言
它采用小程序段的方式实现编程。它作为一种解释性语言,不需要进行编译,而是在程序运行过程中逐行地被解释。
与Java的区别:
1.基于对象和面向对象
面向对象:封装 继承 多态
基于对象 封装
可以使用JS提供的对象的属性方法,也可以自己创建对象。
2.解释和编译
Java 需要先编译再执行 JS 不需要编译通过浏览器直接执行
3.强变量和弱变量
Java 变量使用前必须先声明 规定他的数据类型
JS 使用前不需要规定数据类型,再代码运行中JS会判断他的数据类型
4.应用方面
JS 多应用与客户端 Java多应用于服务器
服务器 & 客户端?
B/S 与 C/S
Browser(浏览器) / Server(服务器)
淘宝 京东 贴吧 等
Client (客户端) / Server(服务器)
LOL CF 360 各种APP
Js作用:
嵌入动态文本于HTML页面
对浏览器事件做出响应
读写HTML元素
在数据被提交到服务器之前验证数据 表单验证
游戏 等
特点:
脚本语言
JavaScript是一种脚本语言,它采用小程序段的方式实现编程。它作为一种解释性语言,不需要
进行编译,而是在程序运行过程中逐行地被解释。
基于对象
JavaScript是一种基于对象的语言,这意味着它能运用自己已经创建的对象。
简单性
JavaScript的简单性首先主要体现在它基于Java的基本语句和控制流程,是一种简单而紧凑的 语言;其次,它的变量类型是采用“弱类型”,
并未使用严格的数据类型。
动态性
JavaScript是动态的,它可以直接对用户或客户输入做出响应而无需经过服务程序。它对 用户的响应是采用以事件驱动的
安全性方式进行的。
JavaScript是一种安全性语言,它不允许访问本地的硬盘,而且不能将数据存入到服务器上;
不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据
的丢失。
跨平台
JavaScript仅依赖于浏览器本身,与操作系统无关,只要是能运行浏览器的计算机,并支持 JavaScript的浏览器就可以正确执行。从而实
现“编写一下,走遍天下” 的梦想。
Js使用方法
- 页面写入 js文件中不需要写
- 特殊运算符:
. 用于属性和方法的调用
[] 用于数组下标
, 多个变量或参数的间隔
new 创建新的对象
? : 条件运算符
typeof 用于返回数据类型 - 算数运算符
+,-,*,/,%,++,– - 比较运算符:
=,<=,>,<,==,!=
- 4.逻辑运算符:
!,&&,|| - 赋值运算符
=,+=,-=,*=,/=,%=, - 字符串运算符
控制语句
- if else
- switch case
- for
- while
- do while
- for( in ) 针对于数组的一个遍历
- break 跳出循环
- continue 跳出本次循环执行下一次循环
变量
1、命名规则
以字母开头可以由数字_组成不能使用汉字 空格 + # 等符号
不能是JS关键字
首字母小写 多个单词链接开头字母大写 驼峰规则
区分大小写
2、声明变量的关键字 var
3、变量名必须保持唯一,不能重复
全局变量 :定义在函数外 使用VAR 定义在函数内 必须不使用VAR
局部变量: 使用Var定义在函数内 只能在函数内使用。
函数:
使用 function 函数名(【参数列表】){函数体} 【】可有可无
参数 可以为任意个,调用函数传参数可以传任意个,
如果函数有返回值直接使用return
onclick 鼠标点击事件 onblur 失去焦点事件
document.getElementById(“id”) 根据HTML id属性获取元素对象 使用.可以调用对象的所有属性
1、计算1加到100的和
2、使用while语句计算1加到100的和
3、打印100以内的偶数序列 :02468。。。
4、循环1-100,单数次输出“好好学习!”,偶数次输出“天天向上!”
5、在死循环中用if和break实现连续打印20个*就结束循环。
6、将a,b,c三个整数按它们数值的大小,从小到大的顺序打印显示。
(练习if else语句)
数组
数组对象类型 Array
数组可以存放很多的数据。有数组名代表所有这些数据,而用
数组名[下标]表示其中某个元素(下标从0开始)。
- 数组的定义方式
<1> 使用new操作符,创建数组的同时赋初值
var 数组名 = new Array(””,””)
<2>先创建指定长度的数组,内容后面再赋值
var 数组名 = new Array(数组的长度);
<3> 使用方括号,创建数组的同时赋初值
var 数组名 = [元素1,元素2,,,,];
注意:如果()中写的是一个正整数的情况下,那么代表的是数组的长度 - 数组的遍历:
<1>普通for循环,
<2> for in的使用
for (var 一个下标变量 in 数组名){
alert(数组名[下标变量]);
} - 数组的属性:
js只有length属性 没有length()
java 数组 有length属性 和 Strign length(); - 数组的常用方法:
concat([数组1]) 拼接数组,将一个数组和一个或多个数组拼接返回新的数组
join() 将数组转化为字符串 并使用参数的字符分隔 ,没有参数默认是逗号
pop() 移除数组的最后一个元素 并返回该元素
push() 向数组中添加新元素,并返回数组的最新长度
reverse() 返回一个数组元素被反转的数组
toString() 返回一个字符串
sort() 返回一个排序后的数组
二维数组
var 数组名 = new Array(arr1,arr2,·····);
var 数组名 = new Array(数组长度);
var 数组名 = [[值1,值2···],[值1,值2··],[],[]]
二维数组横坐标越界 报错 纵坐标越界返回undefined 一维数组下标越界返回undefined
常用事件
内建函数
isNaN(is not a number) 判断参数是不是 不是数字 ,参数是数字返回false,不是数字返回true ,
数值类型字符串
parseInt()
剖析字符串 从左往右,返回数值类型字符,如果找到非数值类型,停止剖析,立刻返回剖析结果,如果一开
始就是非数值类型,返回NaN not a number,不识别小数点
parseFloat() 可以识别小数点
number() 将数值类型字符串转化为number类型 非数值类型字符串返回NaN 空字符串,空格返回0
eval() 把字符串当做表达式 JS代码执行
如果字符串不是合法的表达式JS代码将报错
eval()可以使用 变量, 函数, 前提是变量 函数上下文是可用的
常用事件
1 鼠标事件
onclick 鼠标单击事件
ondblclick 鼠标双击事件
onmouseover 鼠标上移事件
onmouseout 鼠标移开事件
onmousemove 鼠标移动事件
onmouseup 鼠标抬起事件
onmousedown 鼠标按下事件
2 键盘事件
onkeydown 键按下事件
onkeyup 键抬起事件
onkeypress 键按下并抬起事件
3 一般事件
onFocus() 获得焦点事件
onBlur() 失去焦点事件
onChange() 内容改变事件(仅用于下拉列表框)
4 表单事件
onsubmit 写在标签里面 通过提交按钮调用函数 必须有返回值 onsubmit=”return 函数名()” 如果
函数返回false 不进行提交。
onreset写在标签里面 通过重置按钮调用函数
5 页面事件
onLoad() 页面加载事件作用于标签
onUnload() 页面关闭事件作用于标签
正则表达式
正则表达式
作用 提供一个模板 对搜索输入的字符串进行匹配或者验证 (多用于表单验证)
定义使用方式
var reg = /表达式/ ;
reg.test(字符串);
1 预定义字符
- . 匹配除了换行以外所有字符
- \w 匹配字母数字下划线 相当于 [0-9a-zA-Z_]
- \s 匹配任意的空白符 空格 tab
- \d 匹配数字 [0-9]
- ^ 表示字符串开始
- $ 表示字符串的结束
2 反义字符
1 \W 匹配除了字母数字下划线以外的任意字符
2 \S 匹配任意非空白符
3 \D 匹配任意非数字的字符
5 ^ 取反 用法[^abc] 用来匹配除了abc之外任意字符
3 限定字符(重复)
1 * 重复0 次或者多次 相当于{0,}
2 + 重复1次到多次 相当于{1,}
3 ? 重复0次或者1次 相当于{0,1}
4 {n} 重复N次
5 {n,} 至少重复n次
6 {n,m} 至少重复N次 最多M次
4 转义字符
\ . \ \w
5 匹配汉字
[\u4e00-\u9fa5] [0-9a-zA-Z\u4e00-\u9fa5]
6拓展
g 全局匹配
I 大小写全部匹配
replace(/正则/g,”替换字符”)替换全部
优先级
相同优先级的从左到右进行运算,不同优先级的运算先高后低。各种操作符的优先级从高到低如下:
操作符 描述
\ 转义符
(), (??, (?=), [] 圆括号和方括号
*, +,?, {n}, {n,}, {n,m} 限定符
^, $, \元字符,任意元字符 位置和顺序
| “或”操作
Window对象
Window对象
代表浏览器开启的视窗 他是js的默认对象 使用它的属性方法 可以省略window前缀
1常用属性
- status 浏览器状态栏信息
- document window中的文档属性,每个载入浏览器的HTML文档都会成为document对象,它使我们在
脚本中可以对页面的所有元素进行访问 - location window中的location对象
- history window中的history对象
2 window常用方法 - alert() 提示警告信息 用法:alert(“信息”)
- confirm() 提示确认信息 用法:confirm(“信息”),
根据返回值来判断点击的是确定还是取消,确定返回true,取消返回false
3 prompt() 显示可提示用户进行输入的对话框 用法:prompt(“信息”,[输入框默认值]),当点击确定时返回的是输入的值,点击
取消时。返回的是null
4 open() 打开一个新的浏览器窗口 用法:视窗对象名称 =open (‘url‘ , ‘新视窗名’ , ‘规格‘ )
被open的打开的浏览视窗中 通过opener调用父窗口的功能和信息也可以调用父窗口的函数 - close() 关闭已开启的浏览视窗 用法:视窗对象名称.close( )
- setInterval() 按照指定的周期(毫秒)来调用函数或者计算表达式 用法:temp = setInterval( “函数( )”,毫秒)
- clearInterval( ) 取消某setInterval ( )的设置 用法:clearInterval(temp )
- setTimeout( ) 在指定的毫秒数后调用函数或计算表达式(记住,次数是一次) 用法:timer =setTimeout( “函数( )”,毫秒)
- clearTimeout( ) 取消某setTimeout ( )的设置 用法:clearTimeout(timer)
3窗口对话框类型
1 模态窗口 showModalDialog
如果不关闭当前窗口,就无法操作其他窗口
showModalDialog([, vArsURL gs],[vArgs] [,sFeatures])
参数说明:
sURL用来指定对话框要显示的文档的URL(;路径必须是相对路径)
vArgs用来向对话框传递参数。
sFeatures用来描述对话框的外观等信息。
使用window.dialogArguments;//获得父级传的参数
2非模态窗口 showModelessDialog
即使不关闭当前页面,也可以操作其他窗口
3模态对话框规格参数
dialogHeight 对话框高度
dialogWidth 对话框宽度
dialogLeft 设定视窗左边界
dialogTop 设定视窗上边界
center 窗口是否居中,默认yes。
help 是否显示帮助按钮,默认yes
resizable 是否可被改变大小,默认no
status 是否显示状态栏。默认为yes
scroll 是否显示滚动条。默认为yes
JS中打开新页面的方法
location.href =
open()
showModalDialog()
showModelessDialog()
location.relace();
JS刷新页面方法:
location.reload()
location.href = location
history.go(0)
4 浏览器对象 - location对象
Location 对象包含有关当前 URL 的信息
常用属性:href location.href=”Url”; 在同一窗口跳转到新的页面
能返回上级页面
常用方法:
location.reload() 重新location.href=location加载当前文档(刷新);
等同于 localtion.href = location
location.replace(“新页面”) 以新的文档取代之前文档
无法返回上级页面 与 location.href 效果相同 - history对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
常用方法:
history.back() 加载 history 列表中的前一个 URL 。相当于浏览器后退按钮
history.forward()加载 history 列表中的下一个 URL。等同于按浏览器的前进按钮
作用:阻止本页面的前进和后退
history.go(索引)
history.go(1) 等同于history.forward() 前进
history.go(-1) 等同于history.back() 后退
history.go(0)
等同于location.reload(),location.href=location;刷新