目录
JavaScript的概述
历史:javaScript是由美国网景公司开发的,运行在网页中的语言,是一种脚本语言。
JavaScript(js)可以让网页产生事件,从而让网页动起来。js是一种直译式脚本语言,嵌入在网页中,为网页添加各种动态效果(效果动态,数据动态)。
脚本语言:不需要编译(sql,html,css,js,Python),有某种特定的引擎(数据可,浏览器)解释执行。
作用:
- 响应鼠标和键盘事件。
- 客户端表单验证(表单就是有各种输入选择组件,可以让用户输入信息,最终将数据可提交到后端,凡是有输入的地方都会有表单验证)。
- 动态操作网页内容。
基本语法
注:js是一种弱类型语言
- 声明变量:使用var关键字声明,可以表示任何类型数据。
var a=10;
a="abc";
- 数据类型:虽然js声明变量时,不需要数据类型,但是它的值仍然是有类型的,因为数据也会参与运算。
- 数值型(number):整数和浮点数都是数值型;
- 布尔型(boolean):true,false;
- 字符串:可以使用''或者""表示;
- undefined类型(不明确):声明了但没有赋值,则undefined类型;
- Object类型:对象类型。
var a=10;
a="abc";
/* typeof(a)会显示其数据类型 */
alert(typeof(a));
/* 数据类型:
虽然JavaScript声明时,不需要数据类型,但是他的值,仍然是有类型的
因为数据也参与运算
*/
/* 1.数值型 number 整数和浮点数都是数值型 */
var a = 10;
var b = 10.5;
/* 2.布尔型 boolean true false*/
var c = true;
var d = a>b;//false
/* 3.字符串 "" '' 双引号和单引号都表示字符串 */
var e = "abc";
var f = 'abc';
/* 4.undefined类型(表示不明确) 变量没有赋值,值不明确*/
var g;
alert(g);//就是undefined类型
/* 5.Object 对象类型 JavaScript是一种面向对象的语言,但对于我们而言,可以把
他理解为一个半面向对象,半面向过程*/
运算符
算术运算符
算数运算:+,-,*,/,%,++,--;
使用方法与Java中不一样的:
/* 算数运算 + - * / % ++ -- */
/* 与Java中不一样的 */
var a=5;
var b=10;
var c="5";
var d = "a";
alert(b-a);//5 减法运算 数值与数值之间 是减法运算
alert(b-c);//5 数值与字符串的数字,此处会进行一个隐式数据类型转换
alert(b-d);//NaN(Not a Number)类似与Java中数字格式化异常,试图将字符串转换成数字,但是没有转换成功
比较运算符
- =表示:赋值
- ==表示:比较内容是否相等
- ===表示:全等,即比较内容和类型是否相等
/* 比较运算 =(赋值) ==(比较内容是否相等) ===(全等 比较类型和内容) */
var a=5;
var b=10;
var c="5";
var d = "a";
alert(a==c);//true
alert(a===c);//false
函数
使用方法:
function 函数名(参数){
函数体
返回值
}
函数调用的时候可以传递任意个数的参数。
对象
Array对象
/*var 变量名 = [元素列表]*/
var arr = [1,2,3,4];
特点:js中数组长度可变,类型可变(在数组中可以存储不同类型的数据 )
常用的属性:length,作用:获取数组中元素的个数
常用的方法:
-
forEach(),作用:遍历数组中有值的元素,那它与for循环的区别就是for循环遍历所有的元素无论有值还是无值。
-
push(),作用:添加元素到数组的尾部
-
splice(从哪里开始删(删除索引的位置,删几个元素)),作用:删除元素
String对象
/*var 变量名 = ""*/
var str = "hello";
常用的属性:length,作用:获取字符串的长度
常用的方法:
-
charAt(index),作用:获取指定位置的字符
-
indexOf("lo"),作用:检索字符串的位置
-
trim(),作用:用来去除字符串左右两端的空格
-
substring(1,4) ,作用:截取字符串,开始位置,到结束位置(不包含)
-
substr(1,4),作用:截取字符串,开始位置,到截取的长度
json对象
概念:JavaScript Object Notation,JavaScript对象标记法
json是通过JavaScrip对象标记法书写的文本
作用:现在多用于数据载体,在网络中进行数据传输
var 变量名 = '{"key" : value1,"key" : value1}'
var user = '{"name":"tom","age":18,"address":["北京","上海"]}'
注意:json中的key必须带""
将json字符串转换为js对象:
var obj = JSON.parse(user);
alert(obj.name);
将js对象转换为json字符串:
JSON.stringify(obj);
BOM
概念:浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装为对象
组成:
-
Window:浏览器窗口对象
获取:window.(可以省略)
方法:confirm("你确认删除吗?"):显示带有一段消息以及确认按钮和取消按钮的对话框。
setInerval(function(){},2000):按照指定的周期(以毫秒计算)来调用函数或计算表达式
setTimeout(function(){},3000):在指定的毫秒数后调用函数或计算表达式,只执行依次
-
Navigator:浏览器对象
-
Screen:屏幕对象
-
History:历史记录对象
-
Location:地址栏对象
获取:location.属性
属性:href,作用:获取或设置地址栏中完整的URL
DOM
概念:文档对象模型
将标记语言的各个组成部分封装为对应的对象:
-
Document:整个文档对象
-
Element:元素对象
-
Attribute:属性对象
-
Text:文本对象
-
Comment:注释对象
JavaScript通过DOM,就能够对HTML进行操作(要操作,先获取 ):
-
改变HTML元素的内容
-
改变HTML元素的样式
-
对HTML DOM事件作出反应
-
添加和删除HTML元素
Document对象中提供了以下获取Element元素对象的函数:
-
根据id属性值,返回的单个Element对象;(最常使用的)
var h1 = document.getElementById('h1');
-
根据标签名称获取,返回Element对象数组;
var div = document.getElementsByTagName('div');
-
根据name属性值获取,返回Element对象数组;
var hobbys = document.getElementsByName('hobby');
-
根据class属性值获取,返回Element对象数组
var clss = document.getElementsByClassName('class');
js事件
事件:HTML事件是发生在HTML元素上的”事情“。比如:
-
按钮被点击
-
鼠标移动到元素上
-
按下键盘按键
事件监听:JavaScript可以在事件被检测到时执行代码
事件绑定:
-
onclick()鼠标点击标签时;
-
onblur()标签失去焦点;
-
onfocus()标签获得焦点;
-
onmouseover()鼠标被移到某标签之上;
-
onmouseout鼠标从某标签移开;
-
onload()是在网页加载完毕后触发相应的的事件处理程序;
-
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
-
onsubmit:提交表单