简介
- 基于对象
- 提供好了对象,可以直接拿来使用
- 事件驱动
- HTML做静态效果,做网站的动态效果
- 用于客户端(浏览器)
特点
- 交互性
- 信息的动态交互
- 安全性
- js不能访问本地磁盘的文件
- 跨平台性
- java通过jvm虚拟机实现跨平台,而js只需要支持js的浏览器就可以运行
与java的不同
- Java是强类型的语言,js是弱类型的语言
- java中:int i=10;
- js中:var i =10;var m=“10”;
- Java需要先编译成class字节码文件再执行,JavaScript只需要解析就可以执行
JavaScript组成的三部分
- ECMAScript
- ECMA: 欧洲计算机协会
- 其中包含ECMA组织制定的js语法语句
- BOM
- broswer object model:浏览器对象模型(控制地址栏,浏览器的关闭等等)
- DOM
- document object model:文档浏览器模型(操作网页中的内容)
数据类型和变量声明
- 定义变量 都是用关键字 var
- string:字符串
- var str = “abc”
- number:数字类型
- var m = 123;
- boolean:true和false
- var flag = true;
- null
- var date = new Data();
- 获取对象的引用,null表示对象引用为空,所有对象的引用也是object;
- typeof(null)返回的是object,这是设计时就这么设计的,可以理解成对象引用的一个占位符。
- undifined
- 定义一个没有赋值的变量
- typeof(); 查看当前变量的数据类型
js语句
- if判断
- switch语句
- 循环语句
- for(var i = 0;i <=2;i++){}
js运算符
-
算术运算符
-
赋值运算符
-
js里不区分整数和小数
var j =123;
alert(j/10001000);
//java中得到的结果为0
//js里不区分整数和小数,123/1000=0.1231000 = 123 -
字符串的相加和相减的操作
var str = “123”
//如果相加的时候,做的是字符串链接
//如果相减,做的是相减的运算
//如果字符串是字母,相减会提示NaN,表示不是一个数字 -
boolean类型也可以操作
true相当于值为1
false相当于值为0 -
和=区别
- 都是做判断
- ==判断的是值
- ===判断的是值和类型
- 注:java里只能int和int相比
js数组
- 定义方式(三种)
- var arr = [1,2,3]
var arr = [1,“a”,true] - 使用内置对象Array对象
var arr1 = new Array(5); //定义一个数组,数组长度是5
arr[0] = “1”; - 使用内置对象Array
var arr = new Array(3,4,5); //定义一个数组,数组里元素是3 4 5
- Array有属性length,可以用.调用;
js函数
- 三种定义方式,函数的参数列表里不需要写var,直接写参数名称;
- 使用关键字function
function 方法名(参数列表) {
方法体;
返回值可有可无(根据实际需要决定);
} - 匿名函数
var 方法名称 = function (参数列表) {
方法体和返回值;
} - (了解)动态函数
使用js中的一个内置对象Function
var 方法名称 Function(“参数列表”,“方法体和返回值”)
全局变量和局部变量
- 全局变量:在script标签里定义一个变量,这个变量在页面中所有js部分都可以使用。
- 局部变量:在方法内部定义一个标签,只能在方法内部使用。
script标签位置
- 原则上放在当前页面哪里都可以运行,但是有时js需要获取某些值(如input标签内的值),需要考虑语句的先后顺序,所以约定一般放在之后。
- tips:HTML解析是从上到下解析的。
js的String对象
- 创建String对象
- var str = “abc”;
- 方法与属性
- w3cschool-String方法
- 与HTML相关的方法
- bold(); //加粗
- fontcolor(“颜色名称”); //更换颜色
- fontsize();//更换字体大小
- link(变量名.网址.html);//超链接
- sub();sup(); //下标与上标
- 与java相似的方法
- concat();//连接字符串
- charAt();//获取指定位置的字符串
- indexOf();//返回字符串的位置,字符不存在返回-1
- split();//切分字符串
- replace();//替换字符串
- substr(a,b);//从a位开始,向后截取b个字符
- substring(a,b);//从a位开始到b位结束,不包含第5位
- 与HTML相关的方法
js的Array对象
- 创建数组(三种)
- var arr1 = {1,2,3};
- var arr2 = new Array(3);
- var arr3 = new Array(1,2,3);
- 属性
- length
- 方法
- concat();//连接数组
- join("-");//根据指定的字符分隔数组。{1,2,3,}–>{1-2-3}
- push();//向数组末尾添加元素,返回数组的新的长度,这个时候把数组当做一个整体字符串添加进去(即如数组原来长度为3,添加一个数组后,长度是变为4)
- pop();//删除并返回数组的第一个元素
- reverse();//颠倒数组中元素的顺序
js的Date对象
- 获取当前时间
- var date = new Date();//获取当前时间
- date.toLocaleString();//转化成国人习惯的时间格式
- getFullYear();//得到当前的年
- getMonth()+1;//返回值默认是0-11;
- getDay();//得到当前的星期,0-6,0代表周日
- getHours();//获取当前的小时
- getMinutes();//当前的分钟
- getSeconds();//当前的秒
js的Math对象
-
数学运算
-
Math里都是静态方法,可以直接Math.方法();
-
常用的:
- ceil();//向上取整
- round();//四舍五入
- floor();//向下取整
- random();//得到随机数(伪随机数,0.0-1.0,如果要0-9,可以random()*10;,然后floor()接收取整)
- max();
- min();
- power(x,y);//x的y次幂
-
属性
- PI //圆周率
全局函数
- 不属于任何一个对象,直接写名称使用
- eval(): //执行js代码(如果字符串是一个js代码,使用方法直接执行)
- encodeURI(); //表示对字符进行编码
- decodeURI();//对字符进行编码
- encodeURIComponent() 和 decodeURIComponent() (和上面两功能一样,但是字符编码的范围不一样,具体百度)
- isNaN(); //判断是不是数字,返回true(不是数字)和false(是数字)
- parseInt(); //类型转换,字符串的数字转换为可加的数字
js函数重载
- 和Java不同,js函数重载不存在
- 会自动调用最后一个方法(就近原则)
- 但是js可以通过别的办法模拟重载
- js函数中的参数会保存在默认的arguments数组里,可以通过判断arguments中的参数个数来ifelse选择函数。
js的bom对象
- 浏览器对象模型
- 有以下对象:
- navigator(获取浏览器的信息)
- navigator.appname;(得到浏览器名称)
- screen(获取屏幕的信息)
- screen.width;
- screen.height;
- location(请求URL地址)
- href属性
- 获取到请求的URL地址
- location.href
- 设置URL地址
- location.href = “XXX.html”(一般和js一起使用,作为鼠标点击事件跳转地址)
- 获取到请求的URL地址
- href属性
- history (请求的URL的历史记录)
- history.back(); history.go(-1); //访问上一个界面
- history.next(); history.go(1);//访问下一个界面
- window(重点)
- 窗口对象
- 顶层对象(所有的BOM对象都在window里操作)
- 方法
- .alert() 弹出一个框
- .confirm() 确认框(有返回值true/false)
- .prompt(“框里显示内容”,“输入框里的默认值”)输入对话框 (很少使用)
- .open(“打开新窗口的地址”,“窗口特征(宽高度)”)
- close()
- setInterval(“函数”,毫秒数) 在指定的周期内(毫秒基计数)来调用或计算表达式 1s=1000ms
- setTimeout() 在指定的毫秒数后调用函数
- navigator(获取浏览器的信息)
js的DOM对象
- 文档对象模型
- 文档:超文本标记文档:html、xml
- 对象:属性、方法
- 模型:使用了属性和方法操作超文本标记型文档
- 小结:可以使用js里的dom提供对象,使用这些方法的属性和方法,对标记型文档进行操作
- 使用
- 对标记型文档里所有内容封装成对象,形成树形结构(dom的解析html过程):
- document对象:整个HTML对象
- element对象:标签对象
- 属性对象
- 文本对象
- Node节点对象:这些对象的父对象。
- 对标记型文档里所有内容封装成对象,形成树形结构(dom的解析html过程):
DHTML
- 很多技术的简称:HTML、css、dom(操作HTML-标记型文档)、JavaScript
document对象
- 表示整个的文档
- 常用方法:
- write(); //向页面输出变量或HTML代码
- getElementById(); //通过id得到标签,返回的是对象
- getElementsByName(); //通过标签的name属性得到标签,返回的是一个对象集合(可以理解成数组)
- getElementByTagName(); //通过标签名称得到对象集合
element对象
- 要操作element对象,必须先获取element
- 方法
- getAttribute(""); //获取属性的值
- setAttribute("",""); //设置属性的值
- removeAttribute(""); //删除属性(不能删除value的值)
- 获取标签下面的子标签
- 使用属性childNodes,但是这个属性兼容性很差,不建议使用
- 获得标签下面子标签的唯一有效方法,使用getElementByTagName方法
Node对象属性
-
nodeName //
-
nodeType //
-
nodeValue //
* 标签节点对应的值
nodeType: 1
nodeName: 大写标签名称 比如SPAN
nodeValue: null
* 属性节点对应的值
nodeType: 2
nodeName: 属性名称
nodeValue: 属性的值
* 文本节点对应的值
nodeType: 3
nodeName: #text
nodeValue: 文本内容 -
父节点
- ul是li的父节点
- parentNode //返回永远是第一个元素节点
-
子节点
- li是ul的子节点
- childNodes //获取指定节点的所有子节点集合
- firstChild //获取指定节点的第一个子节点
- lastChild //获取指定节点的最后一个子节点
-
同辈节点
- li和li是同辈节点
- nextChild //返回一个给定节点的下一个兄弟节点
- previousSibling //返回一个给定节点的上一个兄弟节点
操作DOM树
- 插入节点
-
appendChild方法
- 可添加子节点到末尾
- 特点:类似于剪切粘贴的效果
-
insertBefore(newNode,oldNode)方法
- 创建newNode节点:
- 创建标签
- 创建文本
- 把文本添加到标签下面
- 创建newNode节点:
-
注:没有insertAfter()方法
-
- 删除节点
- removeChild(); //删除节点
- 通过父节点删除,不能自己删除自己(先获取父节点,通过父节点调用此方法)
- 替换节点
- replaceChild(newNode,oldNode);
- 通过父节点调用
- replaceChild(newNode,oldNode);
- 复制节点
- cloneNode(blooean); //用法:用var xx接收某个某个node.cloneNode(true)传回的拷贝
表单提交方式
- 使用submit提交
<form>
...
<input type="submit" />
</form>
- 使用button提交表单
function form1() {
//获取form
var form1 = document.getElementById("form1");
//设置action
form1.action = "xxx.html";
//提交form表单
form1.submit();
}
- 使用超链接提交
<a href="hello.html?username=123456">使用超链接提交</a>
- onclick:鼠标点击事件
- onchange:改变内容(一般和select一起使用)
- onfocus:得到焦点
- onblur:失去焦点