简介
- 基于对象
- 提供好了对象,可以直接拿来使用
- 事件驱动
- 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(); //通过标签名称得到对象集合