[转] 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()函数清除。
长得帅的已经订阅，长得丑的还在犹豫，你还在等什么？？？
posted on 2016-10-16 03:57 mengxinxin 阅读(149) 评论(0) 收藏 举报
浙公网安备 33010602011771号