JavaScript小白基础学习教程

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：重置按钮被点击