Java Script基础
JavaScript只是一种运行于客户端，可以被客户端浏览器解析的一段代码。它和java没有任何关系。JavaScript简称JS。jQuery是对JS的一个封装。
一.网页引入Java Script的三种方式：
1.引入外部js文件
2.在当前HTML页面中使用script标签中书写
3.直接在当前HTML标签中书写
二.变量的声明和赋值
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div {
color:red;
}
</style>
<script src="MyJS.js"></script>
<script type="text/javascript">
var num = 0;
var num1, num2, num3 = 0;
</script>
</head>
<body>
<div>哪里来的JS？</div>
<input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>
注意点：
1.在JS中定义任何变量的类型都是var开头。
2.JavaScript的关键字是保留的，不能作为变量名或者函数名。
3.JavaScript区分大小写，大小写不同的变量名表示不同的变量。
4.JavaScript是一种弱类型语言，所以允许不声明变量而直接使用，系统会自动声明该变量。
5.JavaScript中的变量命名与Java变量的命名规则相同（可以由数字，字母，下划线和$符号组成，但首字母不能使数字）。
三.数据类型：
JavaScript中有6种数据类型 如下：
Number(数值类型)
String(字符串类型)
Boolean(布尔类型)
Null(空类型)
Undefined(未定义类型)
解释：
在声明变量时不需要声明变量的数据类型，而是由赋给变量的值决定。
可以用typeof（）来获取变量的类型。
四.数组：
JavaScript中的数组和Java中的数组一样，数组的下标从0开始。
JavaScript中定义数组的方式：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div {
color:red;
}
</style>
<script src="MyJS.js"></script>
<script type="text/javascript">
//var num = 0;
//var num1, num2, num3 = 0;
var array = new Array(3);
array[0] = "哈哈";
array[1] = 1;
array[2] = "JavaScript";
var array1 = ['哈哈', 'JavaScript', '1', '2'];
</script>
</head>
<body>
<div>哪里来的JS？</div>
<input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>
五.运算符号：
算数运算符：+，-，*，/，%，++，--
比较运算符：>,<,>=,<=,==,!=
逻辑运算符：&&,||，！
赋值运算符：=
六.逻辑控制语句：
1.条件结构：
if选择结构和switch选择结构：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div {
color:red;
}
</style>
<script src="MyJS.js"></script>
<script type="text/javascript">
////var num = 0;
////var num1, num2, num3 = 0;
//var array = new Array(3);
//array[0] = "哈哈";
//array[1] = 1;
//array[2] = "JavaScript";
//var array1 = ['哈哈', 'JavaScript', '1', '2'];
var num=0;
if (num == 0) {
alert(11111);
}
</script>
</head>
<body>
<div>哪里来的JS？</div>
<input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div {
color:red;
}
</style>
<script src="MyJS.js"></script>
<script type="text/javascript">
////var num = 0;
////var num1, num2, num3 = 0;
//var array = new Array(3);
//array[0] = "哈哈";
//array[1] = 1;
//array[2] = "JavaScript";
//var array1 = ['哈哈', 'JavaScript', '1', '2'];
//var num=0;
//if (num == 0) {
// alert(11111);
//}
var num = 1;
switch (num) {
case 1:
alert('我是1');
break;
case 2:
alert('我是2');
break;
default:
break;
}
</script>
</head>
<body>
<div>哪里来的JS？</div>
<input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>
2.循环结构：
for循环：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div {
color:red;
}
</style>
<script src="MyJS.js"></script>
<script type="text/javascript">
var num = [1, 2, 3, 4, 5];
for (var i = 0; i <num.length; i++) {
document.write(num[i]);
}
</script>
</head>
<body>
<div>哪里来的JS？</div>
<input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>
3.循环中断：
break:可以立即退出整个循环
continue:只是退出当前循环，根据判断条件决定是否进行下一次循环
七.函数：
1.自定义函数：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div {
color:red;
}
</style>
<script src="MyJS.js"></script>
<script type="text/javascript">
function Myfunc(参数1，参数2，参数3) {
//code
//返回值可有可无，根据自身需求
};
</script>
</head>
<body>
<div>哪里来的JS？</div>
<input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>
2.调用函数：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div {
color:red;
}
</style>
<script src="MyJS.js"></script>
<script type="text/javascript">
window.onload() = function () {
function Myfunc(参数1，参数2，参数3) {
//code
//返回值可有可无，根据自身需求
};
};
</script>
</head>
<body>
<div>哪里来的JS？</div>
<input type="button" onclick="Myfunc" value="点我"/>
</body>
</html>
3.匿名函数：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div {
color:red;
}
</style>
<script src="MyJS.js"></script>
<script type="text/javascript">
window.onload() = function () {
var Myfunc=function(参数1，参数2，参数3) {
//code
//返回值可有可无，根据自身需求
};
};
</script>
</head>
<body>
<div>哪里来的JS？</div>
<input type="button" onclick="Myfunc" value="点我"/>
</body>
</html>
解释：匿名函数就是没有函数名的函数，可以用一个变量来接受，然后再调用即可。
注意点：
1.JavaScript中的函数和Java里的方法差不多，只是没有类与类之间的调用，返回值类型，访问修饰符。
2.JavaScript中的函数可以没有返回值，参数。
3.定义函数之前必须在<script>标签里面添加window对象的onload方法，不然结果会和理想的不一样。
八.window对象：
1.window对象常用属性：
//window对象方法练习 //window是全局对象，使用其方法时可以不用window.方法名，直接用方法名即可 var haha = history;//有关客户之前访问过的url信息 alert(haha); var xixi = location;//当前url信息 alert(xixi); var say = confirm('你开心吗');//带提示信息 带返回值 带确定和取消的提示窗口 多数用于if判断 if (say) { alert('开心'); } else { alert('不开心'); close();//关闭浏览窗口 } open('www.baidu.com','我的浏览器','height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0');
2.window对象常用方法：
//window对象方法练习 //window是全局对象，使用其方法时可以不用window.方法名，直接用方法名即可 var haha = history;//有关客户之前访问过的url信息 alert(haha); var xixi = location;//当前url信息 alert(xixi); var say = confirm('你开心吗');//带提示信息 带返回值 带确定和取消的提示窗口 多数用于if判断 if (say) { alert('开心');//带有提示信息的警告窗口 } else { alert('不开心');//带有提示信息的警告窗口 close();//关闭浏览窗口 } open('www.baidu.com','我的浏览器','height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0');//打开新的页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
var t1;
window.onload = function () {
var docref = document.referrer;
if (docref) {
var div = document.getElementById('mydiv');//获取id为‘mydiv’的对象
div.style.display = "none";
} else {
t1=setInterval(stop,1000);//定时器
}
}
function stop() {
var doc = document.getElementById('myspan');//获取id为‘myspan’的对象
var txt = doc.innerText;//获取这个myspan对象的文本
if (txt > 1) {
txt--;
} else {
clearInterval(t1);//关闭定时器
location.href = "页面1.html";
}
doc.innerText = txt;
};
</script>
</head>
<body>
<div id="mydiv">
<span id="myspan">5</span>
秒后调转到登入页面
</div>
我是抽奖页面
</body>
</html>
3.window对象常用的事件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onclick = function () {
document.getElementById('mybtn').onclick = function () {
alert('点我干嘛');
};
};
</script>
</head>
<body>
<input type="button" id="mybtn" value="快点我"/>
</body>
</html>
(function () { $('li').mouseover(function () { this.style.cssText = "background:pink"; }).mouseout(function () { this.style.cssText = "background:"; }); });
九.document对象：
1.document对象常用属性：
referrer:返回载入当前文档的URL
URL:返回当前文档的URL
2.document对象常用方法：
getElementById() 返回单个元素对象
getElementsByName() 返回对象集合
getElementsByTagName() 返回对象集合
write() 向文档写入文本，HTML表达式或JavaScript代码
十.Math对象：
1.Math的常用方法：
ceil() 对数进行上舍入
floor() 对数进行下舍入
round() 把四舍五入为最接近的数
random() 返回0~1中的随机数
十一.定时函数：
1.setTimeout()定时函数:
语法:
setTimeout('调用的函数名称',等待的毫秒);
2.setInterval()函数：
语法：
setInterval('调用的函数名称',周期性调用函数之间间隔的毫秒数)；
3.clearTimeout()和clearInterval():
clearTimeout(）函数用来清除由setTimeout()函数设置的timeout
clearInterval()函数用来清除由setInterval()函数设置的timeout
4.区别：
setTimeout()函数是过多少毫秒调用一次给定的函数，只调用一遍。
setInterval()函数是每隔多少毫秒调用一次给定的函数，调用多次。
setInterval()函数可以被clearInterval()和clearTimeout()函数清除。
setTimeout()函数只能被clearTimeout()函数清除。
长得帅的已经订阅，长得丑的还在犹豫，你还在等什么？？？
浙公网安备 33010602011771号