前言
学会这个语言,可以让你写出“有意思”的代码。
为什么学习JavaScrit?
.HTML定义了网页的内容
.CSS描述了网页的布局
.JavaScrit网页的行为
JavaScrit概述
.JavaScrit还是一们基于对象和时间驱动的脚本语言,它主应用于客户端。
.JavaScrit是Web的编程语言。
.所有现代的HTML页面都使用JavaScrit。
1.特点
.解释运行,不需要编译
.基于对象
.弱类型
2.优点
.交互性
.安全性
.跨平台–基于浏览器
JavaScrit与HTML?
1.直接在html中书写js代码
通过<scrittye="textjavascrit"><scrit>标签,
在这个标签的内部可以书写js代码2.引入外部的js文件
通过<scrittye="textjavascrit"src="do1.js"><scrit>
来引入外部的js文件
注意:这个标签不能够合并成自闭标签,否则会引入失败.JavaScrit格式关键字
.JavaScrit的内容是在HTML中的head中定义的。
scrit标签
<scrit>JavaScrit<scrit>:正如我之前所述,JavaScrit的内容定义在HTML的head中,而在head中,我们规定使用scrit标签来记录JavaScrit的开始和结束。输出关键字(alert):定义的是你点击我们定义的按钮之后,弹出的页面所显示的内容。JavaScrit数据类型
:JavaScrit数据类型分为基本数据类型和复杂数据类型
1.基本数据类型
1.1number
.代表数字的基本类型;
.在JavaScrit中并不区分整形和浮点型,
.JavaScrit中所有数字类型底层实现都是浮点型;
数值类型中有几个特殊值:Infinity:正无穷大-infinity:负无穷大;
NaN:非数字型,该类型十分特殊,和任何值都不相等,包括本身;
即:NaN==NaN返回的结果是false。可以使用isNaN()判断某值是否为NaN;.数字类型虽然是基本数据类型,
.但是JavaScrit本身提供了对应的包装对象Number,具有和数值处理相关的属性
.和方法;
Number提供的属性:
Number.MAX_VALUE:可表示的最大数字
Number.MIN_VALUE:可表示最小的数字
Number.NaN:非数字值
Number.POSITIVE_INFINITY:正无穷大
Number.NEGATIVE_INFINITY:负无穷大1.2string
.代表字符串的基本数据类型;
.字符串常量使用双引号引起来;
.和数据基本类型number一样,JavaScrit中提供了包装对象String;
.在包装对象String中我们提供字符串处理相关的属性和方法;
String对象提供的属性:
length:字符串中字符数;1.3:boean
.对于boean类型,就是true和false的关系;
1.4:undefined
.undefined类型只有一个值,就是他本身(undefined);
.该类型表示变量未定义,当一个变量为初始化是,返回值为undefined;
1.5null
.null只有一个值就是null;
.null用来表示尚未存在的对象;
.null常用来表示函数企图返回一个不存在的对象;
2.复杂数据类型
:复杂的数据类型实际指的就是对象,该概念我们日后会详细解释;
JavaScrit变量
1.变量的定义
:JavaScrit中有数据类型,但是引用是不区分类型;
.以上语句也可以解释为什么JavaScrit有个特点叫弱类型了;
.需要注意的是:JavaScrit中的变量名区分大小写;
2.定义变量关键字
:var变量名
JavaScrit运算符
算术运算符:+,-,,,%,++,–
赋值运算符:=,+=,-=,=,=,%=
比较运算符:,!=,=,!==,>,>=,<,<=
位运算符:&am;,|
逻辑运算符:&am;&am;,||
前置逻辑运算符:!(not)
三元运算符:?:
其他运算符:tyeof,delete
比较运算符:==,!=,===,!==
==和===的区别:
==:如果2个变量是不同的类型,会先尝试将它们转成相同的类型,再进行比较;
如果2个变量是相同的类型,则直接进行比较;
===:如果2个变量是不同的类型,直接返回false;
如果2个变量是相同的类型,再进行比较
其他运算符:tyeOf,delete
tyeof:判断变量或值的类型
是一个运算符而不是方法
delete:从数组或对象中删除对应的值或属性
可以从数组中删除元素,该元素的位置会保留,类型变为undefinedJavaScrit判断
1.if
if条件语句
语法和Java中大致相同,但是判断条件没有类型的限制2.switch
switch选择语句
语法和Java中大致相同,并且也支持字符串类型JavaScrit循环
1.while
2.do…while
3.for
JavaScrit函数
:JavaScrit函数就是包裹在花括号中的代码块,前面使用了关键词function:
.当调用该函数时,会执行函数内的代码。(通俗点讲就相当于Java中的方法)
注意:
.JavaScrit对大小写敏感。
.关键词function必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
1.普通方法定义函数
function函数名(形式参数...)
{
执行语句;
turn返回值;
}
2.匿名函数
var匿名(自定义名字)=function(){...}
匿名(自定义名字)();
3.动态函数
var自定义名字=newFunction(“x”,”y”,”alert(x+y);”);
自定义名字(4,6);
如同:
function自定义名字(x,y)
{
alert(x+y);
}
自定义名字(4,6);JavaScrit数组
1.JavaScrit中的数组特点
可以存任意元素,长度是可变的。js中的数组的长度是可以被任意改变的 如果数组中某一位置没有赋值,那么该处的值为undefined js中的数组的内容可以是不同类型的 js中的数组就是用[]括起来并用逗号分割开的一组内容,本质上就是一段字符串.2.定义JavaScrit数组
2.1:创建一个数组
vararrayObj=newArray();
2.2:创建一个数组并指定长度,注意不是上限,是长度
vararrayObj=newArray([size]);
2.3:创建一个数组并赋值
vararrayObj=newArray([elent0[,elent1[,…[,elentN]]]]);
2.4:数组直接量定义数组
vararrayObj=[1,2,5,6,3];
3.JS数组的包装对象
JS中提供了数组的包装对象Array,提供了数组处理相关的属性和方法。
Array对象提供的属性:
length:数组长度对象
1.JS内置对象
RegEx对象
创建正则对象的两种方式
varg1=newRegEx("","");
varg2=xxxig;常用方法:
rgex.test(str)
检索字符串是否符合该正则表达式规则。返回true或false。修饰符用于执行不区分大小写和全文的搜索。
i-修饰符是用来执行不区分大小写的匹配。
g-修饰符是用于执行全文的搜索
(而不是在找到第一个就停止查找,而是找到所有的匹配)。String对象
varstr1=newString("xxx");
varstr2="xxx";常用方法:
strVariable.length
返回String对象的长度。
strObj.charAt(index)
返回指定索引位置处的字符。
strObj.indexOf(subString[,startIndex])
返回String对象内第一次出现子字符串的字符位置。
strObj.lastIndexOf(substring[,startindex])
返回String对象中子字符串最后出现的位置。Array对象
vararr1=newArray();
vararr2=[];
numVar=arrayObj.length
返回一个整数值,这个整数比数组中所定义的最高位元素的下标大1。
array1.concat([it1[,it2[,...[,itN]]]])
返回一个新数组,这个新数组是由两个或更多数组组合而成的。
arrayObj.join([searator])
返回字符串值,其中包含了连接到一起的数组的所有元素,
元素由指定的分隔符分隔开来。
arrayObj.o()
移除数组中的最后一个元素并返回该元素。自定义对象
:除了js内置的对象,也可以自己定义对象。
1.构造函数定义对象
很像java中的构造函数。P不一定要大写。
functionPerson(){}
var=newPerson();
.name=“zhangsan”;定义成员变量。
.age=20;定义成员函数。
.run=function(){
alert(“run”);
}
.run();2.对象直接量:
varobj={
name:”wangwu”,
age:29,
run:function(){
alert(“run”)
}
};DOM编程1.DHTML概述所谓的DHTML就是将浏览器中常用的对象和HTML中的常用标签用JS对象表示,
.并在这些对象上提供属性和方法,从而实现通过操作这些JS对象来操作
浏览器及浏览器中展示的页面内容的技术,从而将原来静态的HTML变为了可以通过JS操作能动的页面,即动态HTML,DHTML。
现代的主流浏览器都支持DHTML,所以我们只要学习DHTML相关的技术,
就可以在任意主流浏览器中通过JS技术操作HTML页面了。
2.BOM和DOMDHTML分为BOM和DOM。
.其中BOM是BrowseObjectMoe即浏览器对象模型,
.其中封装了浏览器操作相关对象。
.DOM是DocumentObjectMoe即文档对象模型,
.将整个HTML文档按照文档结构组织成了树形结构。
2.1.BOM2.1.1Window对象代表当前浏览器窗口的对象。
.是这个浏览器运行环境,所以调用其属性和方法时,
.可以省略window.
子对象
document
history
navigator
location
方法
alert
confirm
romt
close
setInterval
clearInterval
事件
onload
2.2.2.history对象代表浏览器的浏览历史记录。
属性
Length
方法
Back
Forward
Go
2.2.3.location代表当前浏览器地址栏
属性
Hf
方法
Reload2.2.4.navigator
属性
aName3.3.DOM
3.3.1.获取对象
根据id获取页面中的元素
document.getElentById(“xxx”);根据name获取页面中的元素
document.getElentsByName(“xxx”);根据标签名获取页面中的元素
document.getElentsByTagName(“xxx”);3.3.2.进行增删改查
在父节点上增加子节点
antNode.aendNode(childNode);
在父节点上删除子节点
antNode.roveChild(childNode)直接移除自己,但是只是移除自己,子孙不移除,
也可以在此方法中传入一个true表明在删除自己的同时,子孙也被移除
childNode.roveNode();
childNode.roveNode(true);凭空创建节点
vartag=document.cateElent("tagName");
varattr=document.cateAttribute("hf");设置属性
tag.setAttributeNode(attr);替换子节点
antNode.laceChild(newChild,dChild);克隆节点
varele2=ele.cloneNode();只克隆当前元素
varele2=ele.cloneNode(true);克隆当前元素包括子元素3.3.3.修改样式
方式一:通过class属性修改样式
document.getElentById("tagName").className=”newClzName”;
方式二:直接修改css样式
tagEle.style.stylename=“stylevalue”