JavaScript基础:
概念:一门客户端脚本语言。
运行在客户端浏览器中的,每个浏览器都有JavaScript的解析引擎。
脚本语言:不需要编译,直接可以被浏览器解析执行。
功能:
可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态效果,增强用户体验。
JavaScript发展史:
1.1992年,Nombase公司,开发第一个客户端脚本语言,专门用于表单校验。命名为:C--,后来更名为:ScriptEase。
2.1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请sun公司专家,修改LiveScript,命名为JavaScript。
3.1996年,微软抄袭JavaScript开发出JScript语言。
4.1997年,ECMA(欧洲计算机制造商协会),ECMAScript,就是所有客户端脚本语言的标准。
JavaScript=ECMAScript + JavaScript 自己特有的东西(BOM+DOM)
ECMAScript
1.基本语法:
1.与html结合方式。两种
1.内部JS
<script>
alert("hello world");
</script>
2.外部JS
定义<script>,通过src属性引入外部js文件
注意:1.可以定义在html页面的任何地方,会影响执行顺序。2.<script>可以定义多个。
2.注释写法
//单行注释
/*
多行注释1
*/
3.数据类型:
1.原始数据类型(基本数据类型):
1.number:数字。整数/小数/NaN(not a number一个不是数字的数字类型)
2.string:字符串。字符/字符串 ‘a’ 'abc' “a” "abc"
3.boolean:true和false
4.null:一个对象为空的占位符
5.undefined:未定义。如果一个变量没有初始化值,则会被默认赋值为undefined.
2.引用数据类型:对象
4.变量
变量:一小块存储数据的内存空间。
JAVA语言是强类型语言,JavaScript是弱类型语言。
强类型:在开辟变量存储空间时,定义了空间存储的数据的数据类型。只能存储固定类型的数据。
弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
语法:var 变量名 = 初始化值; 可以定义和赋值分开。
5.运算符
1.一元运算符:只有一个运算数的运算符。 ++ -- +(正号)
注意:如果运算数不是运算符所要求的类型,那么js引擎会自动将运算数进行类型转换。
2.算数运算符: + - * / %
3.赋值运算符: = += -= .....
4.比较运算符: == > < >= <= ===(全等于)
1.类型相同,直接比较。
字符串:按照字典顺序比较,按位逐一比较,直到比较出大小
2.类型不同,先进性类型转换,再比较。
===全等于,先比较类型,如果类型不一样,直接返回false
5.逻辑运算符:&& || !
其他类型转boolean:
1.number转0为假,非0真; NaN为假
2.string转 除了空字符串“ ”,其他都是true
3.null&undefined转 都是false
4.对象:所有对象都是true
6.三元运算符: ?:
var a =2; var b=3; var c = a>b?a:b;
7.JS特殊语法:
1.如果一行只有一条语句,则语句末尾;可以省略。
2。变量定义使用var,也可以不使用: a=3;
用:定义的变量是局部变量。
不用:定义的变量是全局变量(不建议用)。
6.流程控制语句
1.if... else...
2.switch:java中可用byte,int,char,枚举,字符串。js中什么类型都可以。
3.while
4.do...while...
5.for
2.基本对象:Array,Boolean,Date,Math,Number,String,RegExp,Global
Function:描述一个函数对象。
1.创建:var fun = new Function(形式参数列表,方法体);
1.var fun1 = new Function("a","b","alert(a+b)");
fun1(5,6)
2.function fun2(a,b){
alert(a+b);
}
3.var fun3 = function (a, b, c) {
alert(a+b-c)
}
fun3(4,4,4)
2.方法可以覆盖,方法名一样的时候,后面的方法会覆盖前面的。方法的定义参数类型可以不写
3.在JS中,方法的调用与方法的名称有关,和参数列表无关。
4.在方法声明中,有一个隐藏的内置对象(数组),arguments,封装所有的实参。
Array:数组对象
1.创建:var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];
2.特点:
JS中,数组元素的类型可变的。
JS中,数据长度是可变的。
3.方法:join(参数);将数组中的元素拼接为字符串
push();往数组尾部添加一个或多个元素
pop();将数组尾部的元素取出。
Boolean,
Date,
1.创建: var date = new Date();
2.方法:见文档api
Math,数学
1.创建:该对象不用创建对象,直接使用。Math.方法名()
2.方法:参考文档。Math.random()
Number,
String,
RegExp:正则表达式
1.正则表达式:定义字符串的组成规则。
2.单个字符 [ ],如:[a],[ab],[a-zA-Z0-9_]
特殊符号代表特色含义的单个字符:
\d:单个数字字符[0-9]
\w:单个单词字符[a-zA-Z0-9_]
量词符号:
* 表示出现0次或多次
?表示出现0次或1次
+ 表示出现1次或多次
{m,n}:表示m<=数量<=n
m如果缺省:{,n},最多n次
n如果缺省:{m,},最少m次
开始结束符号:^开始,$结束
正则对象:
1.创建:var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
var reg = new RegExp("^\\d{11}$")
var reg2 = /^\d{11}$/
2.方法:test(参数);验证指定的字符串是否符合正则定义的规范。
Global:全局对象。这个Global中的方法不需要对象就可以直接使用。方法名();
方法:encodeURI(); url编码
decodeURI(); url解码
encodeURIComponet();url编码,编码的字符更多。
decodeURIComponet();url解码
parseInt();将字符串转为数字;逐一判断每个字符是否是数字,直到不是数字为止,将前边数字部分转为number.
isNaN();判断一个值是否是NaN.NaN六亲不认。==判断不出来。
eval():将JavaScript的字符串,转为脚本执行。
BOM:概念---Browser Object Model 浏览器对象模型
组成-----将浏览器的各个组成部分封装成对象。
Navigator浏览器对象:
Window浏览器窗口对象:
Location地址栏对象:
Hstory历史对象:
Screen显示器屏幕对象:
DOM对象,Document对象
---Window浏览器窗口对象:
1.Window对象不需要创建,可以直接使用, window.方法名();
2.window引用可以省略,可以直接使用 方法名();
1.与弹出框有关的方法。
alert(“”)
confim() 有确认按钮和取消按钮的对话框。确定按钮返回true,取消按钮返回false;
prompt() 显示可提示用户输入的对话框。返回值--用户输入的值。
2.与开关有关的方法
close();关闭当前窗口。谁调用,关谁。
open(url);打开一个新窗口。会返回一个新的window对象。
3.与定时器有关的方法
setTimeout()设置定时器
参数:1.js代码或者方法对象。2.毫秒值
clearTimeout()取消定时器
setInterval()指定循环周期的定时器
clearInterval()取消循环周期的定时器
属性:
1.获取其他BOM对象。
Navigator浏览器对象:
Location地址栏对象:
Hstory历史对象:
Screen显示器屏幕对象:
2.获取DOM对象。
document
特点:可以省略window.
4.Location
location.href = "www.baidu.com"
5.History历史记录对象
1.创建
2.方法
back();
forward()
go(参数) 参数是正数,前进几个历史记录。负数,后退几个历史记录
length 返回当前窗口历史列表中的URL数量。
DOM简单学习,为了满足案例要求
功能:控制html文档的内容。
代码:获取页面标签(元素)对象 Element
docment.getElementById("id值");
操作Element对象:
1.修改属性值。
1.明确获取的对象是哪一个?
2.查看文档,找那些属性可以修改。
2.修改标签体内容。
innerHTML
事件简单学习:
功能:某些组件被执行了某些操作后,触发某些代码的执行。
如何绑定事件:
1.直接在html标签上,指定事件的属性,属性值就是js代码。 onclick = fun;
2.通过js获取元素对象,指定事件属性,设置一个函数。
DOM概念:Document Object Model文档对象模型
将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作。
W3C DOM 标准被分为3部分:
核心DOM-针对任何结构化文档的标准模型。
Docment文档对象
Element 元素对象
Attribute 属性对象
Text 文本对象
Comment 注释对象
Node:节点对象,其他5个的父对象
XML DOM-针对XML文档的标准模型。
HTML DOM-针对HTML文档的标准模型。
核心DOM模型:
Document:文档对象
getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
创建其他DOM对象
createAttribut(name)
createComment()
createElement()
createTextNode()
Element:元素对象。
1.获取/创建:通过document来获取和创建
2.方法:
removeAttribute(): 删除属性
setAttribute(): 设置属性
Node:节点对象,其他5个的父对象
特点:所以dom对象都可以被认为是一个节点。
方法:
CRUDdom树的方法:
appendChild()向节点的子节点末尾添加新的子节点
removeChild()删除并返回当前节点的指定子节点
replaceChild()用新子节点代替原来的子节点。
属性:
parentNode返回节点的父节点。
*****超链接有两个功能:1.可以被点击,有样式。2.点击后跳转到href指定的url。通过:href="javacript:void(0);"。可以保留1功能,去掉2功能。
HTML DOM
1.标签体的设置和获取:innerHTML
2.使用html元素对象的属性
3.控制元素样式。
1.使用元素的style属性来设置
2.提前定义好类选择器的样式,通过元素的className属性来设置class属性值。 对象.className = "样式名"
事件:某些组件被执行了某些操作后,触发了某些代码的执行。
事件:某些操作,如:单击,双击,键盘按下了等。
事件源:组件,如:按钮,文本输入框。
监听器:代码
注册监听:将事件,事件源,监听器结合到一起,当事件源上发生某个事件,则触发执行某个监听器代码。
常见的事件:
1.点击事件:
1.onclick:单击事件
2.ondblclick:双击事件
2.焦点事件:
1.onblur:失去焦点
2.onfocus:元素获得焦点。
3.加载事件:
1.onload 一张页面或一副图片加载完成
4.鼠标事件:
1.onmousedown
2.onmousemove
3.onmouseup
4.onmouseout
5.onmouseover
5.键盘事件:
1.onkeyup
2.onkeydown
3.onkeypress
6.选择和改变
1.onchange 域的内容被改变
2.onselect 内容被选中
7.表单事件:
1.onsubmit 确认按钮被点击
可以阻止表单提交。---方法返回false,表单提交不了。
2.onreset 重置按钮被点击。