Js的歷史
1994年的時候,國外的網速7kb/10kb左右
網景公司---liveScript (領航者瀏覽器)
90年Java語言誕生
jdk1.0 --將”java”--網景公司和sun公司-javaScript
javaScript
微軟公司-jsScript (將瀏覽器免費了…),壟斷市場
JavaScript和jscript
ECMA:歐洲製造商者聯盟 組織將這兩個語言的語法統一
基礎語法一樣
BOM編程:Browser Object Model:基於瀏覽器對象模型編程
DOM編程:Document Object Model:基於文檔對象模型編程
XML解析
DOM解析
SAX解析
JavaScript的基礎語法:
-
javascript的使用
分爲兩種方式:
1) 內部方式
在html的head標籤體寫script標籤![JavaScript基礎(一)]()
2) 外部方式:導入外部的js文件
- javascript的變量問題以及數據類型
![JavaScript基礎(一)]()
- 類型轉換函數
- Javascript的運算符
-
JavaScript流程控制語句
大體和Java語言的語法相似!
4.函數概念
5.Js中的內置對象
String
Number
Boolean
Math
Date
6.在JavaScript中常用的兩個函數
alert("彈出一個提示框") ;
document.write("向瀏覽器輸出內容")
7.witch語句:格式 witch(document){....}
將document對象當做witch語句參數,然後直接使用它裏面的write() ;
8.or-in:針對數組或者對象進行遍歷
for(var 遍歷的變量名 in 數組名稱/對象名稱)//{
輸出變量名
}
如果是對象(js中的對象是一個重點)進行操作,那麼這裏變量名就是當前對象的屬性
9.函數
函數的定義:
function 函數名稱(形式參數列表)//{
//語句}函數的調用
函數名稱(實際參數列表) ;函數中的注意事項:
1)函數的形式參數不能有var關鍵字定義,否則報錯
2)在js中函數是可以有return語句的,直接return,但是沒有返回值
3)在js中,函數是不存在的重載概念,後面定義的函數回覆蓋掉前面定義的函數
4)當實際參數的數量小於形式參數的數量,就會出現一個值肯定是NaN;如果實際參數大於形式參數,那麼最終會計算前面的值,然後將後面的數據丟棄掉!
5)在js的每一個函數中,裏面存在默認的數組:arguments,它的作用就是將實際參數從左到右依次賦值給形式參數(從左到右)
10.String對象
js中String對象 的常用方法
chatAt() :返回指定索引位置處的字符
indexOf():表示某個子字符串在當前字符串中第一次出現的索引
lastindexOf();
fontColor():給當前字符串設置一個顏色標記
substrint(start,end):截取功能
11.Math對象
向上取整 //在整數位置+1
var num = 4.30 ;
document.write(Math.ceil(num)+"<br/>");
向下取整 :如果有小數部分,將小數部分去除掉,保留整數位
document.write(Math.floor(num)+"<br/>");
四捨五入
document.write(Math.round(num)+"<br/>");
獲隨機數 random():包含0,但是不包含1
document.write(Math.random()*100+"<br/>") ;
max/min
document.write(Math.max(num,100)) ;12.定時器
1)setInterval("任務",毫秒值) ; 每經過多少毫秒重複執行這個任務(函數)
2)timeout("任務",毫秒值) ;經過多少毫秒後執行一次這個任務
13.Data對象
如何創建一個Date對象
var date = new Date() ;
alert(date) ; //Sun Jun 17 2018 16:05:35 GMT+0800 (中國標準時間)獲取系統時間: 2018年6月17日 XXX時:xx分:xx秒 --->Java中存在一個類:SimpleDateFormat getFullYear :獲取年份 document.write(date.getFullYear()+"年") ; 獲取月份:getMonth 方法返回一個處於 0 到 11 之間的整數， document.write((date.getMonth()+1)+"月") ; 獲取月份中的日期 document.write(date.getDate()+"日"+" ") ; 獲取一天當中的小時 document.write(date.getHours()+":") ; 獲取分 document.write(date.getSeconds()+":") ; 獲取分鐘的秒 document.write(date.getMinutes()) ;
14Array對象的創建方式
1)方式1:相當於動態初始化
var arr = new Array(3) ;
2)var arr = new Array() ; 表示0個長度
3) 直接指定數組中 具體元素
var arr = new Array("hello",100,true,'a') ;
注意事項:
1)在js中,數組可以存儲任意類型的元素!
2)在js中,不存在數組角標越界一說,數組中的元素數量是可以不斷的增加..不會出現異常!
** (二)自定義對象**
(1)js中的自定義對象
定義對象
1)相當於有參構造 的形式
2)無參構造的形式
function 自定義對象(Person) (參數名){
定義屬性
定義方法
}
創建對象
var p = new Preson(實際參數) ;
//輸出對象p中的屬性值
//調用對象p中的方法
方式1:自定義對象方式1 :有參構造的形式
定義一個對象
function Person(name,age){ //this:代表當前對象
定義屬性
this.name = name ;
this.age = age ;
定義方法
this.speak = function (){
alert("這是說話的功能...")
}
}創建對象
var p = new Person("張三",28);
方式2:無參構造的形式
定義一個對象
function Person(){
}
創建對象
var p = new Person() ;
追加屬性
p.name = "李四" ;
p.age = 38 ;
//追加方法
p.speak = function(){
alert("這是李四說話的功能...")
}
//自定義對象方式3: 利用Object對象 ,Object對象在js中代表任意對象的一個模板
定義對象
function Person(){
}
創建對象
var p = new Object() ;
追加屬性
p.name = "厄齊爾" ;
p.age = 29 ;
追加方法
p.play = function (){
alert("全場隱形...") ;
}
自定義對象方式4 json解析 (全國的省市區三級聯動)
"標題1":"內容","名稱2":"內容2"
"屬性名1":值1,
"屬性名2":值2,
"方法名":function(){
}
var p = {
//就是json格式的寫法
//追加屬性
"name":"王五",
"age":28,
"play":function(){
alert("王五會踢球...")
}
};
要麼使用for-in語句將對象的屬性遍歷出來,或者直接輸出
document.write(p.name+"<br/>") ;
document.write(p.age+"<br/>") ;
調用方法
p.play(); (三)原型
(1)設計一個數組工具對象，例如ArrayUtil對象，該對象提供以下兩個方法：
search(array,target): 傳入指定的數組和指定的字符串，返回指定字符串所在的位置
max(array): 傳入指定的數組，返回該數組中的最大值
<html>
<head>
<meta charset="UTF-8">
<title>自定義對象練習</title>
<script src="js/ArrayUtil.js"></script>
<script type="text/javascript">
//創建一個數組,靜態初始化
var arr = [43,65,13,87,3,19] ;
//創建ArrayUtil對象
var arrayUtil = new ArrayUtil();
//查詢3這個元素對應的索引
var index = arrayUtil.search(arr,300) ;
document.write("你要查找的元素的位置是:"+index) ;
document.write("<hr/>") ;
//獲取arr中的最大值
var max = arrayUtil.max(arr) ;
document.write("當前數組中的最大值是:"+max);</script>
</head>
<body>
</body>
</html>
(2問題:剛纔使用的是自定義了一個對象ArrayUtil對象,完成剛纔查詢和最值操作;
在不提供任何工具類的情況下,怎麼將search()和max()追加到Array(js的內置對象)對象中)
Array對象有的方法
function Array(){
this.join = function() {
}
this.reverse = function(){
}
追加
this.search() = function(){
}
這樣寫就不行了,因爲Array對象是內置對象,不能直接這做,獲取不到源碼!
}
原型(prototype)
作用:就是給js中的內置對象追加方法使用的
1)每一個js內置對象都有一個原型屬性(prototype)
2)如果往原型對象中追加一個方法,那麼這個方法會自動追加到內置對象中
3)原型屬性是可以直接被內置對象調用然後追加方法(四)其他的對象
(1)Windows對象
window對象:它代表瀏覽器的一個窗口對象
注意:
由於window對象中的方法頻繁調用,所以爲了簡化書寫方式,有時候window可以去掉
裏面涉及的方法:
open("打開資源文件url","以什麼什麼方式打開(_blank)/_self","指定新打開的窗口和高度")
和定時器相關的方法:
setInterval("任務",時間毫秒值); 沒經過多少毫秒後重復執行這個任務
clearInterval():取消和setInterval相關的任務
window.clearInterval(iIntervalID) :這個要插入一個Id
setTimeout("任務",時間毫秒值); 經過多少毫秒後只執行一次
clearTimeout():取消和setTimeout相關的超時事件
和彈框相關的方法
window.alert("提示框") ; //window可以省略
window.confirm("消息對話框");有確認框,取消框
prompt:提示對話框，其中帶有一條消息和一個輸入框
(2)location對象:
href屬性:可以修改頁面的href屬性來實現頁面跳轉 更改的href屬性:--- URL(統一資源定位符)
URI
方法:
定時刷新:reload()
(3)history對象
history對象中的方法
forward:裝入歷史列表中下一個url
back:裝入歷史列表中前一個url
go(正整數或者負整數)
(4)screen對象
屬性 描述
availHeight 獲取系統屏幕的工作區域高度，排除 Microsoft® Windows® 任務欄。
availWidth
(5)js中的監聽器
<html>
<head>
<meta charset="UTF-8">
<title>js中的事件監聽器</title>