JavaScript学习
- javaScript基础
- 概念:
- 功能:
- javaScript发展史
- 基本语法
- 与html的结合方式
- 注释
- 数据类型
- 变量
- 运算符
- 1.一元运算符
- 2.二元运算符
- 3.赋值运算符
- 4.比较运算符
- 5.逻辑运算符
- 6.三元运算符
- 基本对象
- 1.fuction对象
- 2.Array对象
- 3.Date对象
- 4.Math对象
- 5.RegExp对象
- 6.Global对象
- 弹出窗口
- 显示页面
- Java特定对象的获取
- BOM
- 概念
- 组成
- Window窗口对象
- 方法
- 属性
- Location对象
- 方法
- 属性
- History对象
- 方法
- 属性
- DOM简单学习
- DOM对象
- Document对象
- Element元素对象
- 方法
- Node节点对象
- 方法
- 属性
- 事件
- 绑定事件方式
- 常见的事件
- 点击事件
- 焦点事件
- 加载事件
- 鼠标事件
- 键盘事件
- 选择和改变
- 表单事件
javaScript基础
概念:
一门客户端脚本语言
*运行在客户端浏览器中,每一个浏览器都有一个JavScript的解析引擎
*脚本语言:不需要编译,直接被浏览器解析执行
功能:
可以增强用户与html页面的交互过程,可以控制HTML元素,让页面有一些动态效果,增强用户体验
javaScript发展史
- 1992年,Nombase公司开发了第一门客户端脚本语言,命名为C–(为了蹭C++的热度),后来更名为:scriptEase
- 1995年,Netscape(网景)基于C–开发了一门LiveScript,后来请SUN公司的专家修改变成了JavaScript
- 1996年,微软抄袭JavaScript开发了Jscript
- 1997年,ECMA(欧洲计算机制造协会)规定了ECMA为所有客户端脚本语言的标准。
所以说,JavaScript = ECMAScript+JavaScript特有的对象
基本语法
与html的结合方式
- 1.内部js,定义<script>标签体,标签体里的内容就是js代码,可以定义在html页面的任何位置,但会影响执行顺序
- 2.外部js,定义<script>,通过src属性引入外部js
注释
- 单行://注释内容
- 多行:/ *注释内容 * /
数据类型
- 原始数据类型(5种)
- number:整数,小数,NAN
- string:字符串,不分单引号和双引号,没有字符的概念
- boolean:布尔值,true&false
- null:一个对象为空的占位符
- undefined:未定义,如果一个变量没有初始化,默认为undefined
- 引用数据类型:对象
变量
变量其实就是一小块数据存储的空间,JavaScript是属于弱类型语言,不定义空间存储的数据类型,可以存放任意数据,也就是说当空间内存放了number类型的数据时,你可以把它更改成string类型的数据,
var 变量名=初始化值
document.write(typeof(变量名))//null的类型是object
运算符
1.一元运算符
++ -- +(正号)
2.二元运算符
+ - * / %
3.赋值运算符
+= -= *= /=
4.比较运算符
< <= > >= == 类型相同直接比较,类型不同转换成相同类型后比较
=== 类型不同直接返回false
5.逻辑运算符
&&(与) ||()或 !(非) 具有短路效果
6.三元运算符
a>b ?a:b
基本对象
1.fuction对象
重点:function对象中实际传入的参数会被放在arguements数组中,只要调用arguments数组就能得到所有的参数
//创建方式1
function fun1(a,b){
alert(a+b);
}
//创建方式2
var fun2=function(a,b){
alert()a+b);
}
//调用方式
fun1(3,4);
alert(fun1.length);//显示形参的个数
2.Array对象
Array对象长度可变,内容的类型也可变,非常的灵活
//创建方式1
var arr=new Array(元素列表:1,2,3);
//创建方式2
var arr=new Array(元素长度:2);//注意括号中只有一个元素时代表数组长度
//创建方式3
var arr=[元素列表:1,2,3,4];
3.Date对象
var date =new Date();
document.write((data.toLocalString()+"<br>")//转换成本地时间格式
document.write((data.getTime()+"<br>")//转换成从1970年0时0分至今的毫秒数
4.Math对象
document.write((Math.PI+"<br>")//π
document.write((Math.random()+"<br>")//随机数
document.write((Math.round(3.14)+"<br>")//四舍五入
document.write((Math.floor(3.14)+"<br>")//向上取整
document.write((Math.ceil(3.14)+"<br>")//向下取整
5.RegExp对象
正则表达式
-
单个字符:[]
[a] [abc] [a-f] /d :单个数字字符 /w:单个单词字符[a-zA-Z0-9]
-
量词符号
?:出现0或1次 *:出现0或多次 +:出现至少一次 {m,n}:出现次数在m与n之间,缺省表示至多或至少的意思
-
结束和开始标记
^:开始标记 $:结束标记
//创建方式1
var reg=new RegExp("正则表达式:\\w{6,12}")//注意需要\\来表达\
//创建方式2
var reg=/正则表达式/
通过test方法判断对象是否满足正则表达式
6.Global对象
Global对象封装的方法不需要对象就能调用
encodeURI(str) //url编码
decodeURI(str)//uri解码
encodeURIComponent(str) //url编码,编码的字符更多
decodeURIComponent(str)//uri解码
parseInt(str) //逐一判断每一个字符是否为数字,如果不是数字则停止判断,并将前面部分转化成number
isNaN() //只有这个可以判断NaN,因为NaN参与的==均返回false;
eval() //将字符串代码作为脚本代码执行
弹出窗口
alert("欢迎光临")
显示页面
document.write("你好")
Java特定对象的获取
window对象不用创建就能调用,其他的BOM对象和Document对象可以通过window的方法创建,而DOM的其他对象可以通过Document的方法创建。
BOM
概念
Brower Object Model (浏览器对象模型)
组成
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
Window窗口对象
Window对象不需要创建可以直接使用window实例对象,并且调用方法时可以省略对象名
alert("hello world")
window.alert("hello world")
方法
1.与弹出框有关的方法
alert() //显示带有一段消息和确认按钮的警告框
confirm() //显示带有一段消息和确认和取消按钮的对话框,方法返回一个布尔值
prompt() //显示可提示用户输入的对话框,返回值为输入内容
2.与打开关闭有关的方法
open(“http:/ /www.baidu.com”) //打开新窗口,返回值为一个窗口对象
close() // 关闭当前窗口,如果传入窗口对象,则关闭对应窗口
3.与定时器有关的方法
setTimeout(js,time) //经过time毫秒后执行js代码,返回值为var id
clearTimeout(var id) //取消
setInterval(js,time) //周期执行,返回唯一标识var id
clearInterval(var id)//取消
属性
1.调用其他BOM对象:history,screen,location,navigator
2.获取DOM对象:Document
Location对象
创建通过window.location调用
方法
window.history.reload()
history.reload() //重新加载页面
属性
属性名 | 描述 |
---|---|
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
href | 设置或返回完整的 URL。 |
pathname | 设置或返回当前 URL 的路径部分。 |
port | 设置或返回当前 URL 的端口号。 |
protocol | 设置或返回当前 URL 的协议。 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
History对象
方法
history.back() // 等同于在浏览器点击后退按钮
history.forward()// 等同于在浏览器中点击前进按钮
history.go(参数); //正数向前跳转,负数向后跳转
属性
length 返回当前页面的 URL的历史数量
DOM简单学习
概念:Docunment Object Model(文档对象语言),将标记语言文档的各个部分封装成对象,对标记对象文档进行CRUD操作
功能:控制html文档内容
DOM对象
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
Document对象
1.获取Element对象
document.getElementById()//返回一个唯一对象
document.getElementByName()//返回一个数组
document.getElementByTagName()//返回一个数组
2.创建DOM对象
document.createElement("id")
document.createAttribute(name)
document.createComment("id")
document.createTextNode("id")
2 .改变元素的属性值
element.src="img/lighton.gif"
3.修改标签体内容
element.innerHTML="悔创阿里杰克马"
Element元素对象
方法
removeAttribute(属性名)
setAttribute(属性名,属性值)
Node节点对象
方法
appendChild(元素id)//增加子节点
removeChild(元素id)//删除子节点
replaceChild(元素id)//替换子节点
属性
parentNode :返回节点的父节点
事件
功能:某些组件被执行了某些操作后,触发某些代码的执行
绑定事件方式
- 直接在html标签上指定事件(例如onclick)的属性,属性值即为js代码
- 通过js获取对象元素,改变元素属性值,属性值用function方法,(低耦合)
常见的事件
点击事件
- onclick:单击事件
- ondblclick:双击事件
焦点事件
- onblur:失去焦点,一般用于表单校验
- onfocus:获得焦点
加载事件
- onload:一个页面或一张图片加载完成
鼠标事件
- onmousedown:鼠标按钮被按下
- onmouseup:鼠标按钮被松开
- onmousemove:鼠标按钮被移动
- onmouseover:鼠标移到某元素之上
- onmouseout:鼠标从某元素移开
键盘事件
-onkeydown:某个键盘按键被按下
-onkeyup:某个键盘按键被松开
-onkeypress:某个键盘按键被按下后松开
选择和改变
- onchange:域的内容被改变
- onselect:文本被选中
表单事件
- onsubmit :确认按钮被点击
- onreset:重置按钮被点击
更多推荐
JavaScript小白基础学习教程
发布评论