前言
學習web,當然不能少了萬能的javaScript,由於之前接觸過javaScript基礎語法,那麼這次剛好派上用場了,就是感嘆 “書到用時方恨少”,腳踏實地慢慢學咯,這裏簡單總結記錄下這幾天複習的js語法和demo,時時記,才能不至於忘得太快~~~
Ⅰ.簡述
1.javaScript的特點:
- 安全性(不允許直接訪問本地硬盤),它可以做的就是信息的動態交互。
- 跨平臺性。(只要是可以解釋Js的瀏覽器都可以執行,和平臺無關。)
2.js(javaScript的簡稱)和java的不同點:
- JS是Netscape公司的產品,Java是Sun公司的產品
- JS是基於對象,Java是面向對象。
- JS只需解釋就可以執行,Java需要先編譯成字節碼文件,再執行。
- JS是弱類型,Java是強類型。
3.js由3部分組成:
- ECMAScript
- Bom(全稱Browser Object Model瀏覽器對象模型)
- Dom(全稱Document Object Model文檔對象模型)
4.ECMASCRIPT 中有5種基本數據類型::
- Undefined
- null
- Boolean
- Number
- String
5.類型總結:
5種基本數據類型:Undefined, null,Boolean,Number和String
所有的數值都是number類型,字符和字符串都是string類型
布爾是boolean類型,如果一個變量未定義,那麼類型是undefined
6.js引入方式和位置:
向HTML頁面插入JavaScript的主要方法
- JS代碼存放在標籤對中。
- 使用script標籤的src屬性引入一個js文件。(方便後期維護,擴展)例:
7.區分大小寫:
與 Java 一樣,變量、函數名、運算符以及其他一切東西都是區分大小寫的
8.變量:
變量是弱類型的,與 Java不同,ECMAScript 中的變量無特定的類型,定義變量時只用 var 運算符,可以將它初始化爲任意值。
9.變量使用細節:
- var關鍵字在定義變量的時候可以省略不寫
- 變量名可以重複,後面的將覆蓋前面的變量
- 變量的類型取決於值的類型
10.運算符:
加法運算符的注意點
- ECMAScript 中的加法也有一些特殊行爲:某個運算數是 NaN,那麼結果爲 NaN;
- 如果兩個運算數都是字符串,把第二個字符串連接到第一個上。如果只有一個運算數是字符串,把另一個運算數轉換成字符串,結果是兩個字符串連接成的字符串。
乘/除法運算符基本和java語言中的相同
比較運算符的注意點
- 兩個字符串進行比較,會轉化爲字符之後進行比較;
- 一個數字和一個字符串進行比較,字符串會轉換成數字,再比較。
邏輯運算符基本和java語言中的相同
賦值運算符基本和java語言中的相同
乘法/賦值(*=) 除法/賦值(/=) 取模/賦值(%=) 加法/賦值(+=) 減法/賦值(-=)
三目運算符基本和java語言中的相同
Ⅱ.練習
註釋:下面的每個demo都可以拷貝在文本然後運行,運行方式也是很簡單的,那麼效果圖就懶得貼了,下面的註釋說明也非常詳細.
1.先來個for練習,同樣的需求,C和java都實現過了,那麼用js來實現下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javaScript for 練習</title>
</head>
<body>
<script type="text/javascript">
//輸出一個6行6列的的 *正方形
for(var i=0 ;i<6 ;i++){
for(var j=0 ; j<6 ;j++){
document.write(" * ");
}
document.write("<br/>");
}
document.write("<hr/>");
//輸出 *三角錢
for(var i=1 ; i<6 ; i++){
for(var j=0 ; j<i ; j++){
document.write(" * ");
}
document.write("<br/>");
}
document.write("<hr/>");
//輸出九九乘法表
for(var i=1 ; i<=9 ; i++){
for(var j=1 ; j<=i ; j++){
document.write(j + "*" + i + "=" + j*i + " ");
}
window.document.write("<br/>");
}
</script>
</body>
</html>
2.需求:移動到小圖片區域內,旁邊出現大圖片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 事件監聽</title>
</head>
<body>
<!--小圖片-->
<img src="img/small.png" width="80" id="wlh"/>
<br/>
<!--大圖片,默認距離左邊80px,默認不顯示的-->
<img src="img/big.png" width="400" style="margin-left: 80px;display: none;" id="big"/>
</body>
<script type="text/javascript">
function myPic(){
var small = document.getElementById("wlh"); //查找小圖片
var big = document.getElementById("big"); //查找大圖片
small.onmouseenter = display; //鼠標進入圖片區域的事件
// small.onmousemove = display; //鼠標在圖片區域內移動的事件
small.onmouseleave = nodisplay; //鼠標離開圖片區域的事件
}
function display(){ //函數功能:讓圖片顯示
big.style.display = "block";
}
function nodisplay(){ //函數功能:讓圖片隱藏
big.style.display = "none";
}
//窗體加載完畢後執行該函數
window.onload = myPic();
</script>
</html>
3.引用類型String:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 引用類型String體驗</title>
</head>
<body>
<script type="text/javascript">
/* var a = "abc";
document.write(typeof a + "<br/>"); //string
var b = new String("abc");
document.write(typeof b + "<br/>"); //object*/
//-------------------------------------------------------------------------------------------------------
//獲取構造函數
var a = "wyk";
document.write(a.constructor + "<br/>"); //輸出:function String() { [native code] }
document.write(typeof a.constructor); //輸出:function
document.write("<hr/>");
//-------------------------------------------------------------------------------------------------------
//通過構造函數創建String對象
var a = new String("jack");
var b = new String("jack");
document.write(a + "," + b + "<br/>"); //jack,jack
document.write(a==b); //false
document.write("<br/>");
document.write(a.valueOf() == b.valueOf()); //true
document.write("<br/>");
document.write("<hr/>");
//-------------------------------------------------------------------------------------------------------
//練習屬性
var c = "Hello World";
document.write(c.length + "<br/>"); //輸出: 11
document.write("第五章".anchor("ch1") + "<br/>"); // 第五章
document.write("第五章".blink() + "<br/>"); //第五章
// 返回在指定位置的字符。
document.write("第五章".charAt(0) + "<br/>"); //第
document.write("abc".charCodeAt(0) + "<br/>") //97
document.write("第五章".concat("abcde") + "<br/>"); //第五章abcde
document.write("第五章".fontcolor("#ff0000") + "<br/>"); //字體變爲紅色
document.write("第五章".indexOf("五") + "<br/>"); // 1
document.write("第五章".italics() + "<br/>"); //斜體
document.write("第五章".link("http://www.baidu.com") + "<br/>"); //下劃線,點擊可以鏈接到其他網頁
document.write("helloworld".replace(/l/g,"L") + "<br/>"); //將l 換位L ,木有寫g,表示第一個換而已
//-------------------------------------------------------------------------------------------------------
document.write("<hr/>");
var names = "jack - lin - zhong".split("-");
for(var temp in names) {
document.write(names[temp] + "<br/>"); //這裏的temp 應該是索引
}
document.write("helloworld".substr(1,2) + "<br/>"); //el
document.write("helloworld".substring(1,2) + "<br/>"); //e
document.write("helloworld".toUpperCase() + "<br/>"); //HELLOWORLD
document.write(new String("java").toString() + "<br/>"); //java
document.write(new String("java").toString() == new String("java").toString()); //true
document.write("<br/>")
document.write(new String("java") == new String("java")); //false
document.write("<br/>")
document.write("abc" == "abc"); //true
</script>
</body>
</html>
4.引用類型Number:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 引用類型Number體驗</title>
</head>
<body>
<script type="text/javascript">
var a = 12;
var b = new Number(12);
document.write(a +"," + b + "<br/>"); //12,12
document.write(a == b); //true
document.write("<br/>");
document.write(a === b ); //false
document.write("<br/>");
document.write(new Number(12) == new Number(12)); //false
document.write("<br/>");
document.write(new Number(12) === new Number(12)); //false
document.write("<br/>");
document.write(new Number(12).valueOf() == new Number(12).valueOf()); //true
document.write("<br/>");
document.write(new Number(12).valueOf() === new Number(12).valueOf()); //true
document.write("<hr/>");
//-------------------------------------------------------------------------------------------------------
document.write("Number的最大值:" + Number.MAX_VALUE + "<br/>");
document.write("Number的最小值:" + Number.MIN_VALUE + "<br/>");
document.write(new Number(12).toString(10) + "<br/>"); //12 ,10進制
document.write(new Number(12).toString(2) + "<br/>"); //1100 ,2進制
document.write(new Number(12).toString(8) + "<br/>"); //14 ,8進制
document.write(new Number(12).toString(16) + "<br/>"); //c ,16進制
document.write("<br/>");
document.write(new Number(12.12345) + "<br/>");
document.write(new Number(12.12345).toFixed() + "<br/>"); //默認沒有小數,即= 12
document.write(new Number(12.12345).toFixed(2)+ "<br/>"); //留下兩個小數位
document.write(new Number(12.12345).toFixed(3) + "<br/>"); //留下三個小數位
</script>
</body>
</html>
5.引用類型Boolean:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 引用類型Boolean體驗</title>
</head>
<body>
<script>
var a = new Boolean(false);
document.write("a.constructor===== " + a.constructor + "<br/>"); //輸出: function Boolean() { [native code] }
document.write("a.toString ====" + a.toString() + "<br/>"); //輸出 : a.toString ====false
document.write("a.valueOf ====" + a.valueOf() + "<br/>"); //輸入: a.valueOf ====false
if(a.valueOf()){
document.write("條件成立<br/>");
}else{
document.write("條件不成立<br/>");
}
</script>
</body>
</html>
6.Math類:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js Math類體驗</title>
</head>
<body>
<script type="text/javascript">
document.write(Math.ceil(12.34) + "<br/>"); //13 最大的整數
document.write(Math.ceil(12.01) + "<br/>"); //13 最大的整數
document.write(Math.floor(12.34) + "<br/>"); //12 最小的整數
document.write(Math.floor(12.01) + "<br/>"); //12 最小的整數
document.write(Math.round(12.54) + "<br/>"); //13 四捨五入
document.write(Math.round(12.35) + "<br/>"); //12 四捨五入
document.write(Math.random() + "<br/>"); //0~1 隨機數
document.write(Math.max(12, 100, -1, 200, 320, 500) + "</br>"); //500 求最大數
document.write(Math.min(12, 100, -1, 200, 320, 500) + "</br>"); //-1 求最小數
</script>
</body>
</html>
7.Date類體驗:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js Date類體驗</title>
</head>
<body>
<span id="myDate"></span>
</body>
<script type="text/javascript">
//---------------------------------- window.setTimeout() 的練習--------------------------------------
/* function showDate(){
var date = new Date();
var str = date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日,星期" + date.getDay() + " "+
date.getHours() + "時" + date.getMinutes() + "分" + date.getSeconds() + "秒" ;
var span = document.getElementById("myDate"); //找尋span標籤
span.innerHTML = str.fontcolor("red"); //給Span標籤設置標籤體內容
window.setTimeout("showDate()",1000); //延時一秒鐘之後執行
}
showDate(); //調用函數*/
//---------------------------------- window.setInterval() 的練習---------------------------------------
var span1 = document.getElementById("myDate");
function showDate01(){
var nowDate = new Date(); //獲取系統時間,即本機時間
var str1 = nowDate.getFullYear() + "年" + (nowDate.getMonth()+1) + "月" + nowDate.getDate()
+ "日,星期" + nowDate.getDay() + " "+
nowDate.getHours() + "時" + nowDate.getMinutes() + "分" + nowDate.getSeconds() + "秒" ;
span1.innerHTML = str1.fontcolor("blue");
}
function startDate(){
//之所以在這裏先調用showDate01,是因爲剛開始時setInterval會延長一秒,導致界面出現一秒鐘的空白
showDate01();
window.setInterval("showDate01()",1000); //每經過指定毫秒值執行指定的代碼
}
startDate();
</script>
</html>
8.數組體驗:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 數組體驗</title>
</head>
<body>
</body>
<script type="text/javascript">
var arrs = ["aa","bb","ccc"];
document.write(arrs + "<br/>"); //aa,bb,ccc
for(var i in arrs){
document.write(arrs[i] + "<br/>"); //aa bb ccc
}
document.write("<hr/>");
for(var j=0;j<arrs.length;j++){
document.write(arrs[j] + "<br/>"); //aa bb ccc
}
document.write("<hr/>");
arrs[0] = "www";
arrs[2] = "kkkkkk";
arrs[5] = "111111"; //可變長的,會將數組裏的元素有三個變爲6個
for(var j=0;j<arrs.length;j++){
document.write(arrs[j] + "<br/>"); //aa bb ccc
}
document.write("<hr/>");
var arrss = new Array(20);
for(var a=0;a<arrss.length;a++){
document.write(arrss[a] + "<br/>"); //都是 undefined
}
document.write("<hr/>");
var arrsss = new Array("Hello World");
document.write("----arr length---->" + arrsss.length + "<br/>");
for(var s=0;s<arrsss.length;s++){
document.write(arrsss[s] + "<br/>"); //都是 undefined
}
document.write("<hr/>");
var arr = new Array();
arr[0] = "aa";
arr[1] = "bb";
arr[6] = 'xx';
document.write(arr + "<br/>");
//遍歷數組
for (var i = 0; i < arr.length; i++) {
document.write(arr[i]+"<br/>");
}
//下標越界時:
var arr = ["aa", "bb"];
document.write(arr[200]);
// 顯示undefined
/**
* 上面輸出結果:
* aa,bb,,,,,xx
*
aa
bb
undefined
undefined
undefined
undefined
xx
undefined
*/
document.write("<hr/>");
var sortArr = new Array("hello","b","world","none","a");
document.write("sort toString ====" + sortArr + "<br/>");
sortArr.sort();
document.write("sort toString ====" + sortArr + "<br/>"); // a,b,hello,none,world
document.write("<hr/>");
var a =["a","b","c"];
document.write(a + "<br/>"); //a,b,c
document.write(typeof a + "<br/>"); //object
document.write(a.concat([100,200]) + "<br/>"); //a,b,c,100,200
var strings = a.concat([100,200],[500,5]);
document.write(typeof strings + "<br/>"); //object
var b = a.join("$");
document.write(b + "<br/>"); //a$b$c
document.write(typeof b + "<br/>"); //string
// document.write(a.pop() + "<br/>"); //c,將最後一個元素c 從數組中刪除
document.write(a.push(100,154) + "<br/>"); //5,返回添加之後的數組的長度
document.write(a + "<br/>"); // a,b,c,100,154
document.write(a.toString() + "<br/>"); //a,b,c,100,154
document.write(typeof a + "<br/>"); //object
var c = a.valueOf();
document.write(typeof c + "<br/>"); //object
var sortaaaa = ["d","da","a","c","1"];
/* sortaaaa.sort(); 輸出: 1,a,c,d,da
document.write(sortaaaa + "<br/>");*/
sortaaaa.sort(compareTo);
document.write(sortaaaa + "<br/>");
function compareTo(a, b){
return a - b;
}
</script>
</html>
9.自定義對象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 自定義對象體驗</title>
</head>
<body>
</body>
<script type="text/javascript">
/*
//-----------------------------Object 方式-------------------------------------------------
var person = new Object();
person.name = "wyk";
person.age = 18;
person.sayHello = function () {
document.write(this.name + "," + this.age + "<br/>");
}
person.sayHello();
//-----------------------------------------------------------------------
document.write("<br/>");
var student = new Object();
student.name = "lxf";
student.age = 16;
student.gan = "girl";
// document.write(student.toString() + "<br/>"); //[object Object]
student.sayDetail = function () {
document.write(this.name + "," + this.age + "," + this.gan);
}
student.sayDetail();
*/
//--------------------------------------自定義無參構造函數對象---------------------------
function Person(){
//window.document.write("constructor<br/>");
}
var person = new Person();
person.name = "gg";
person.age = 17;
person.gan = "super man";
person.work = function () {
window.document.write(this.name +","+ this.age +"," + this.gan);
}
window.document.write(person.constructor + "<br/>");
window.document.write(person.name +","+ person.age +"," + person.gan + "<br/>");
person.work();
//--------------------------------------自定義有參構造函數對象------------------------------
document.write("<hr/>");
function Student(name,age){
this.name = name;
this.age = age;
this.study = function () {
window.document.write(this.name + ":" + this.age);
}
}
var student = new Student("yyyyy",78);
student.study();
//--------------------------------------json方式定義對象----------------------------------
document.write("<hr/>");
var teacher = {
name:"小王",
age:28,
classtify:"數學",
teach: function () {
window.document.write(this.name + "," + this.age + "," + this.classtify);
},
play:function(){
window.document.write("play play....<br/>");
}
};
document.write(teacher.constructor + "<br/>"); //function Object() { [native code] }
teacher.play();
teacher.teach(); //小王,28,數學
</script>
</html>