简介
- Java Script 简称JS,是一种基于对象Object和事件驱动Event Driver的解释型脚本语言,用于增强HTML页面的动态交互性。
特点
- 嵌套在HTML中;
- 环境支持,js在运行中需要浏览器环境的支持,如果使用的浏览器不支持js脚本,那么浏览器在运行时将忽略js代码;
- 解释执行,无需经过专门编译器的编译,在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行;
- 弱类型语言,js中不需要指定变量的类型;
- 基于对象,js提供了很多内建对象,也允许定义新的对象,还提供对DOM(文档对象模型)的支持;
- 事件驱动,HTML中控件(如文本框、按钮)的相关事件触发时可以自动执行js代码;
- 跨平台,js是依赖浏览器运行的,与具体的操作系统无关。
基本语法
JS脚本的引入
- 内部引入
<script type="text/javascript">
//js脚本代码
</script>
- 外部引入
<head>
<script type="text/javascript" src="../js/div.js"></script>
</head>
声明变量
- JS中的任何数据类型的变量都可以用var关键字声明;
var no = 1;
var str = "abc";
var obj = {
name: "张三",
age: 12
};
数据类型
原始数据类型
引用数据类型
数据类型转换
- parseInt()转成数字类型
- 示例:
var no = "1";
console.info(no+1);//打印结果 11
var no2 = parseInt(no);
console.info(no2+1);//打印结果 2
- 注意当转换失败时,会报NaN(Not a Number),指不是一个数字,所以导致转换失败;
- 可以用isNaN()方法验证,将要类型转换的值是否是数字;
示例:
var no = “1”;
var tar = isNaN(no);
- parseFloat()转成小数
运算符
算术
赋值
比较
逻辑
三元运算符
var text = (a > b) ? "yes" : "no";
分支循环
分支语句
if语句
if(condition){
} else if(condition){
} else {
}
switch语句
switch(){
case v1:
break;
case v2:
break;//跳出分支
default:
//当所有的case值都不匹配时,执行default分支
}
循环语句
for循环
var arr = [1,2,3,4];
for(var i = 0; i < arr.length; i++){
console.info(arr[i]);
}
//创建对象
var user = {
name:"张三",
age: 12,
sex: "男"
}
for(key in user){
//获取对象的属性值
var value = user[key];
console.info(key + ":"+ value);
}
while循环
while(condition){
//...
}
do{
//...
}while(condition);
- break、continue同Java
函数
- 函数用function关键字声明
function [函数名](参数列表){
return [返回值];
}
//无参无返回值函数
function f1(){
}
//有参无返回值函数
function f2(a, b){
//参数列表中的形参,不需要用var声明
}
//有参有返回值函数
function f3(a, b){
return a+b;
}
//调用函数
f1();
f2(1, 2);
var c = f3(1, 2);
对象
创建对象
var user = {
//对象属性
name:"张三",
age: 12,
sex: "男",
//对象方法
move: function(){
console.info("user is moving");
}
}
对象属性操作
//获取对象属性值
var property = user.name;
var property = user["age"];
//修改属性值
user.name = "李四";
user["age"] = 20;
//添加属性
user.addr = "青岛";
//删除属性
delete user.addr;
DOM文档对象模型
- DOM(Document Object Model) 文档对象模型
当页面被加载时,浏览器会创建页面的DOM,可以把DOM理解为当前被加载的HTML页面的对象;
document对象
- 根据标签的id,返回一个标签对象(element)
var ele = document.getElementById("user_name");
console.info(ele.value);
- 根据标签名称(name属性),返回一个标签对象的集合
var ele = [];
ele = document.getElementsByName("p2");
console.info(ele[0].innerHTML);
- 根据标签名,返回一个标签对象的集合
document.getElementsByTagName("input");
element对象
- innerHTML和innerHtml是两个属性!!!!!!
DOM事件
- 示例
<input type="button" value="获取属性值" onclick="getElementAttribute();" />
BOM浏览器对象模型
window对象
- 所有浏览器都支持window对象,它表示浏览器窗口
Location对象
- URL示例:
http://192.168.1.156:8080/mvc/def/i2?content=淘宝&[protocol]://[pathname]:[prot]?[search]
History对象
- history对象相当于浏览器中的历史记录,可以通过history跳转到我们之前访问过得指定页面
- 示例
//页面跳转方式1
//跳转到指定路径的页面
window.location.href='https://www.baidu.com';
//页面跳转方式2
//history 页面访问历史记录
//back() 加载history列表中的前一个url
window.history.back();
//页面跳转方式3
//go()加载history列表中的某一个具体页面
window.history.go(-1);//-1表示当前页面的前一个页面
navigator对象
- 示例
//appName属性 返回浏览器的名称
var browser_name = window.navigator.appName;
alert(browser_name);
//返回浏览器的平台和版本信息
var app_version = window.navigator.appVersion;
alert(app_version);
//判断浏览器是否启用cookie,返回一个布尔值
var useCookie = window.navigator.cookieEnabled;
alert(useCookie);
弹窗
警告框
alert("警告框");
确认框
- 会返回一个布尔值
var tar = confirm("请确认");
if(tar){
//...
}
输入框
prompt("标题","输入提示信息");
定时事件
setInterval(function, time);
- 设置间隔多长时间执行一次function代码,代码可以被多次执行,时间单位是毫秒ms.
//设置1000ms执行一次,打印当前系统时间
var id = setInterval(function(){
console.info("定时任务:::"+new Date().toString());
},1000);
clearInterval(id);
- 可取消由 setInterval() 设置的time间隔时间,即让setInterval失效。
- clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
//可以通过触发事件调用该方法
function stop(){
clearInterval(a);
}
setTimeout(function,time);
- 设置延迟多长时间执行代码,代码执行一次,时间单位为毫秒ms.
//调用该方法后,延迟2s执行弹框
function run(){
setTimeout(function(){
alert("延迟执行,只执行一次");
}, 2000);
}
Cookie
- Cookie是页面之间的共享数据,被保存在浏览器中,有失效时间。
创建、修改
//方式1 会话状态,关闭浏览器cookie消失
document.cookie="username=张三;"
//方式2 创建cookie设置有效期,到期cookie消失
document.cookie="username=张三; expires=Fri Jul 23 2021 15:24:48 GMT";
删除
//修改cookie有效期让cookie失效
document.cookie="username=张三; expires=Fri Jul 23 1970 15:24:48 GMT";
查询
var cookies = [];
cookies = document.cookie.split(',');
for(ck in cookies){
var kv = ck.trim().split('=');
console.info(kv[0]+':'+kv[1]);
}