JS(JavaScript)
是一门嵌入式编程语言,主要是嵌入到html中,而且这个语言不需要编译,直接用浏览器就可以运行
JS的分类
ECMAScript:JS的核心语法
BOM:浏览器对象
DOM:Document Object Model.操作文档中的元素和内容.
JS的使用
a.内嵌式:
必须在一个标签<script>的开始和结束标签之间写
格式:在HTML写一个标签
<script type="text/javascript">
写js代码
</script>
b.外联式:
写在另外一个文件,但是文件的后缀必须.js
在HTML中通过 <script>标签引入刚刚写的js文件
格式: 假设我们已经写了一个 aa.js的外部js文件
<script type="text/javascript" src="外部js的路径" charset="utf-8">
//不能再次写代码
</script>
JS的基本语法
变量的声明:
var 变量; //注意: 在js中变量如果没有赋值 默认值 undefined
赋值:
a.定义变量同时赋值 var a = 10;
b.先定义后赋值: var a; a=10;a="abc";
数据类型:
基本类型:
a.Undefined 只有一个值 undefined,当定义变量并且不赋值的时候,默认值就是undefined
b.Null 只有一个值 null,空值,但是在ECMAScript中把他们定义成了相等
c.Boolean,有两个值 true 和 false
d.Number,表示任意数字 1 10000000000 3.13 3.13456732345678
e.string,表示字符串,在js中字符串必须用""或者''引起来
引用类型:
也是一种叫做类(class),但是我们一般不会自己创建对象,而是直接使用, js已经给我们准备好的对象,
所以说JS是基于对象 ,而不是面向对象
数组的定义:
new Array();
new Array(size); // size 数组元素个数,数组成员默认值undefined
new Array(element0, element0, ..., elementn); //参数列表,为数组初始化数据
运算符:
算术运算符和java一模一样
比较运算符:
"==":称为值等,只比较两个数据的值,不考虑类型 比如 var a = "10" a==10,这是true,因为值一样
"===":称为全等,即比较类型 也比较数值, 比如 var a = "10" a===10 这是false,因为类型不一样
逻辑运算符: 与 &&
或 ||
非 !
boolean类型的转换:
其他数据类型转成boolean类型:
undifined和null 转成了false
+0,-0和NaN 转成了false,其他数值转成了true
"" 空字符串转成了false
"abc" 有内容字符串 转成了true
boolean类型如果参与运算,那么true转成1 false 转成0
JS中的函数:
格式:
function 函数名(参数列表){
函数体;
}
调用的格式:
函数名(实际参数);
注意:
1.参数列表中 只需要写参数名,如果多个参数用","相隔
2.函数和java中的方法一样,不调用不运行
3.函数调用的时候,可以传递任意个实际参数,
如果实际参数的个数 < 形式参数个数 那么多出来的形式参数默认值undefined
如果实际参数的个数 > 形式参数个数 那么自动忽略多余的实际参数
4.js中没有重载这个概念,如果函数名一样,后面定义的函数会覆盖前面定义的函数
也就说在前面定义的函数相当于没写
JS中的事件:
onsubmit:点击提交按钮后,触发的表单提交事件
onblur:失去焦点事件,本来鼠标选中该标签,然后选中了其他标签的时候
onfocus:获取焦点事件,本来鼠标是选中别的标签,然后选中了该标签
onload:页面加载完毕事件,绑定函数的写法如window.onload = function(){};<body οnlοad="init()">
onmouseover:鼠标移入事件
onmouseout:鼠标移事件
onchange:改变时间,如select框,input输入框
事件与函数的绑定:
事件名称=函数名称();//当这个时间被触发时,会立即执行这个函数
事件名称=函数名称;//表示将这个函数赋值给这个事件,或者说绑定,但是不会立即执行
如:
a.<input type="text" 事件名="函数1();函数2()"> //这里会依次触发函数1,函数2
b.var input对象 = document.getElementById("对应的id");
input对象.事件名 = 函数1;
input对象.事件名 = 函数2;//只会触发函数2
JS中的this关键字:
js中的this表示当前元素,谁调用的函数,在函数中this就表示谁
正则表达式:
js规定,/^正则表达式$/
var b = "需要判断规则的字符串".matches(/^正则表达式$/);
var b = /^正则表达式$/.test("需要判断规则的字符串");
如果b是true 满足规则 如果b是false 不满足规则
定时器:
window对象是BOM中的内置对象,这个对象又称为全局对象
第一种定时器:window.setInterval(code,millisec);//返回一个id值
code:代码段
a. "正常js代码"
b. 函数名
millisec:时间间隔,单位是毫秒
代表:设置一个定时器,这个定时器每隔millisec毫秒会触发一次,每次都会执行code代码。
window对象可以不写,直接调用setInterval方法也可以,但是不建议不写
第二种定时器:setTimeout(code,毫秒值);//一次性定时器,只会执行一次,返回一个id值
定时器的取消:
clearInterval(你要取消的定时器的id);//取消周期定时器
clearTimeout(你要取消的定时器的id);//取消一次写定时器
页面加载事件:
window.onload事件,当页面加载完毕之后才会触发,给页面加载事件绑定函数:
方式一:
window.onload = 函数名;
function 函数名(){
设置定时器
}
方式二:
window.onload = function(){
设置定时器
}
修改标签样式属性值:
obj.style.属性 ,获得指定“属性”的值。
obj.style.属性=值 ,给指定“属性”设置内容。
或当该属性不在style中时,
obj.属性=值
获取某个标签的内容:
标签对象.innerHTML :获取该标签的内容,从开始标签到结束标签都是内容
修改某个标签的内容
标签对象.innerHTML="内容";
BOM:浏览器对象
a、window对象:
全局函数:setInterval,setTimeout,onload
alert();//弹出信息框
confirm();//提示信息框,当点击确定时,返回true,当点击取消时返回true
promot();//可以输入信息的提示框,当点击确定时,返回输入的信息,当点击返回时,返回NULL
b、navigator:导航
c、screen:屏幕对象
d、history:浏览记录对象
e、location:当前浏览器的网页地址
DOM对象的常用操作:调用方式统一为document.xxx
获取元素:
getElementById() 通过id属性值获得元素(整个HTML文档id位置)
<xxx id=””>
getElementsByName() 通过name属性值获得所有元素(整个HTML文档中name可能相同)
<xxx name=””>
getElementsByClassName() 通过 class属性值获得所有元素
<xxx class=””>
getElementsByTagName() 通过标签名获得所有的元素
<xxx>
创建:
document.createElement(”标签名”) 创建元素节点。
document.createTextNode((”文本内容”) 创建指定内容的文本节点
setAttribute(name,value); 给元素设置属性名和属性值
appendChild(子元素) 向标签体末尾添加新的子节点。
获取一些属性:
childNodes,获得所有的子节点
nodeName, 返回节点名称。(标签名)
nodeType, 返回节点类型。(元素、属性、文本 等)
nodeValue, 节点的值。(只有文本节点才有该属性)\
全局函数:都是在window下 可以直接调用
parseFloat();把字符串解析成小数
parseInt();把字符串解析成整数//他们的返回值都是number
eval(): 执行js代码
其他:
appendChild(子元素);
insertBefore(子元素,兄弟元素) 给当前元素前追加兄弟元素
insertAfter(子元素,兄弟元素) 给当前元素后追加兄弟元素
setAttribute(k,v) 给元素设置属性