7_JavaScript_Math對象_字符串對象_瀏覽器對象BOM

Math對象

  1. Math 對象用于執(zhí)行數(shù)學(xué)任務(wù)乎折。
  • Math 對象并不像 Date 和 String 那樣是對象的類,因此沒有構(gòu)造函數(shù) Math()屑咳。

算數(shù)值

JavaScript 提供 8 種可被 Math 對象訪問的算數(shù)值:

  1. Math.PI 返回圓周率(約等于3.14159)呀枢。
  • Math.E 返回算術(shù)常量 e霉晕,即自然對數(shù)的底數(shù)(約等于2.718)缕减。
  • Math.SQRT2 返回 2 的平方根(約等于 1.414)雷客。
  • Math.SQRT1_2 返回返回 1/2 的平方根(約等于 0.707)芒珠。
  • Math.LN2 返回 2 的自然對數(shù)(約等于0.693)桥狡。
  • Math.LN10 返回 10 的自然對數(shù)(約等于2.302)。
  • Math.LOG2E 返回以 2 為底的 e 的對數(shù)(約等于 1.443)皱卓。
  • Math.LOG10E 返回以 10 為底的 e 的對數(shù)(約等于0.434)裹芝。

document.write(Math.PI);

數(shù)值取整

  1. ceil(x) 對數(shù)進行上舍入。
  • floor(x) 對數(shù)進行下舍入娜汁。
  • round(x) 把數(shù)四舍五入為最接近的整數(shù)嫂易。

document.write(Math.floor(3.6));

隨機數(shù)

  1. random() 返回 0 ~ 1 之間的隨機數(shù)。
  • 注意并不包括0和1

document.write(Math.random());

三角函數(shù)

  1. cos(x) 返回數(shù)的余弦掐禁。
  • acos(x) 返回 x 的反余弦值怜械。
  • sin(x) 返回數(shù)的正弦。
  • asin(x) 返回 x 的反正弦值傅事。
  • tan(x) 返回角的正切缕允。
  • atan(x) 以介于 -PI/2 與 PI/2 弧度之間的數(shù)值來返回 x 的反正切值。

document.write(Math.cos(Math.PI/2));

其他方法

  1. max(x,y) 返回 x 和 y 中的最高值蹭越。
  • min(x,y) 返回 x 和 y 中的最低值障本。
  • abs(x) 返回 x 的絕對值。
  • atan2(y,x) 返回從 x 軸到點 (x,y) 的角度(介于 -PI/2 與 PI/2 弧度之間)响鹃。
  • exp(x) 返回 e 的指數(shù)驾霜。
  • log(x) 返回數(shù)的自然對數(shù)(底為e)。
  • pow(x,y) 返回 x 的 y 次冪买置。
  • valueOf() 返回 Math 對象的原始值

document.write(Math.max(5,10));

字符串對象

  1. 字符串是非常重要的數(shù)據(jù)類型粪糙,除了基本字符串外,JavaScript還提供了字符串的引用類型--字符串對象忿项。
  • 字符串對象提供了字符串檢索蓉冈、替換、連接等方法...
  • 可以通過new 關(guān)鍵字創(chuàng)建字符串對象
  • var str=new String()
  • length 屬性返回字符串的長度(字符數(shù))倦卖。
var str1 = "hello";
var str2 = new String()
document.write(typeof str1);
document.write(typeof str2);
document.write(str1.length);
document.write(str2.length);

字符串與數(shù)字的轉(zhuǎn)換

  1. toString() 返回字符串洒擦。可以將數(shù)值轉(zhuǎn)換成字符串怕膛。
  • 如果需要獲取數(shù)值的二進制熟嫩、八進制、十六進制的字符串表示褐捻,則可以給toString()傳遞一個表示進制的的整數(shù)
  • parseInt()函數(shù)可以將字符串轉(zhuǎn)換成整數(shù)
  • parseFloat()函數(shù)可以將字符串轉(zhuǎn)換浮點數(shù)
  • Number()函數(shù)可以將任意類型的值轉(zhuǎn)換數(shù)值掸茅。
var str2 = num.toString();
var str2 = num.toString(2);
var str2 = parseInt(num);

字符串對象的常用方法

  1. charAt() 返回在指定位置的字符椅邓。
  • charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。
  • concat() 連接字符串昧狮。
  • slice(n,m) 提取字符串n到m之間的片斷(不包括m位置的字符串)景馁,并在新的字符串中返回被提取的部分。
  • substring() 提取字符串中兩個指定的索引號之間的字符逗鸣。大多數(shù)情況和上一個作用相同合住,當參數(shù)為負值時會有不同,但這種情況較少用
  • substr(n,m) 從起始索引號提取字符串中指定數(shù)目的字符撒璧。
  • split() 把字符串分割為字符串數(shù)組透葛。
  • indexOf() 檢索字符串,返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。注意卿樱,如果查找不到會返回 -1
  • lastIndexOf() 從后向前搜索字符串僚害。
  • toLowerCase() 把字符串轉(zhuǎn)換為小寫。
  • toUpperCase() 把字符串轉(zhuǎn)換為大寫繁调。
  • match() 找到一個或多個正則表達式的匹配萨蚕。(正則表達式后續(xù)課程會講)
    該方法會返回一個數(shù)組树叽,數(shù)組中包含了所有符合條件的文本兴想。
  • replace() 替換與正則表達式匹配的子串,并返回替換后的字符串毁习,注意原字符串不會改變
  • search() 檢索與正則表達式相匹配的值烤送。查找與參數(shù)模式相匹配的文本寒随,并返回該文本的位置。若無則返回null(indexOf()會返回-1).與indexOf()相似帮坚。
  • ......
    需要注意的是妻往,JavaScript 的字符串是不可變的(immutable),String 類定義的方法都不能改變字符串的內(nèi)容试和。像 String.toUpperCase() 這樣的方法讯泣,返回的是全新的字符串,而不是修改原始字符串阅悍。
var str1 = "hello";
var str2 = new String("javascript");
document.write(str2.charAt(1)+'<br>');
document.write(str2.charCodeAt(1)+'<br>');
document.write(str2.concat('a')+'<br>');

瀏覽器對象BOM

基本概念

  1. BOM是Browser Object Model的縮寫好渠,簡稱瀏覽器對象模型
  • BOM由一系列相關(guān)的對象構(gòu)成,并且每個對象都提供了很多方法與屬性
  • 基本的BOM體系結(jié)構(gòu)圖
  • 能利用BOM做什么节视?
    BOM提供了一些訪問窗口對象的一些方法拳锚,我們可以用它來移動窗口位置,改變窗口大小寻行,打開新窗口和關(guān)閉窗口霍掺,彈出對話框,進行導(dǎo)航以及獲取客戶的一些信息如:瀏覽器品牌版本,屏幕分辨率杆烁。但BOM最強大的功能是它提供了一個訪問HTML頁面的一入口——document對象牙丽,以使得我們可以通過這個入口來使用DOM的強大功能!M没辍烤芦!

window對象的方法和屬性

window對象是瀏覽器窗口對文檔提供的一個現(xiàn)實的容器,代表打開的瀏覽器窗口析校,是每一個加載文檔的父對象

window的屬性和方法調(diào)用方法:window.屬性构罗,window.方法 也可以直接調(diào)用省略 window.

  1. 對話框

    • alert() 顯示帶有一段消息和一個確認按鈕的警告框。
    • confirm() 顯示可提示用戶輸入的對話框勺良。返回值為布爾值
    • prompt() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框绰播。
      第一個參數(shù)是提示,第二個參數(shù)是默認值;
      返回值為輸入的值骄噪,取消返回null
  2. 窗體控制

    • open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口尚困。
      • URL:聲明了要在新窗口中顯示的文檔的 URL。
      • name:聲明了新窗口的名稱或者窗口目標链蕊。
      • features:聲明了新窗口要顯示的標準瀏覽器的特征事甜。
      • 窗口的屬性:
        • 常用:
          • width:新建窗口寬度
          • heigth:新建窗口高度
          • top:左上角垂直坐標
          • left:左上角水平坐標
        • 其他不太常用的屬性:
          • toolbar:指定窗口是否有標準工具欄。當該選項的值為1或yes時滔韵,表示有標準工具欄逻谦,當該選項的值為0或no時,表示沒有標準工具欄陪蜻;
          • resizable:指定窗口是否可改變大小邦马,選項的值及含義與toolbar相同;
          • ocation:指定窗口是否有地址工具欄宴卖,選項的值及含義與toolbar相同滋将;
          • directories:指定窗口是否有鏈接工具欄,選項的值及含義與toolbar相同症昏;
          • status:指定窗口是否有狀態(tài)欄随闽,選項的值及含義與toolbar相同;
          • menubar:指定窗口是否有菜單肝谭,選項的值及含義與toolbar相同掘宪;
          • scrollbar:指定當前窗口文檔大于窗口時是否有滾動條,選項的值及含義與 toolbar相同攘烛;
          • ........
    • close() 關(guān)閉瀏覽器窗口魏滚。
  3. 定時器

    • setInterval() 按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達式。
    • setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式坟漱。
    • clearInterval() 取消由 setInterval() 設(shè)置的 timeout鼠次。
    • clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。
    var timeId = setTimeout(test,10);
    clearTimeout(timeId);
    
  4. 其他方法

    • print() 打印當前窗口的內(nèi)容。
    • blur() 把鍵盤焦點從頂層窗口移開须眷。
    • createPopup() 創(chuàng)建一個 pop-up 窗口竖瘾。
    • focus() 把鍵盤焦點給予一個窗口。
    • moveBy() 可相對窗口的當前坐標把它移動指定的像素花颗。
    • moveTo() 把窗口的左上角移動到一個指定的坐標捕传。
    • resizeBy() 按照指定的像素調(diào)整窗口的大小。
    • resizeTo() 把窗口的大小調(diào)整到指定的寬度和高度扩劝。
    • scrollBy() 按照指定的像素值來滾動內(nèi)容庸论。
    • scrollTo() 把內(nèi)容滾動到指定的坐標。
  5. Window 對象屬性

    • 掌握部分
      • innerWidth 返回窗口的文檔顯示區(qū)的寬度棒呛。
      • innerHeight 返回窗口的文檔顯示區(qū)的高度聂示。
    • 了解部分
      • name 設(shè)置或返回窗口的名稱。
      • opener 返回對創(chuàng)建此窗口的窗口的引用簇秒。
      • closed 返回窗口是否已被關(guān)閉鱼喉。
      • self 返回對當前窗口的引用。
      • top 返回最頂層的先輩窗口趋观。
      • outerheight 返回窗口的外部高度扛禽。
      • outerwidth 返回窗口的外部寬度。
      • status 設(shè)置窗口狀態(tài)欄的文本皱坛。
      • ......

History對象的常用方法

history對象有back和forward兩個方法编曼,它可以跳轉(zhuǎn)到當前頁的上一頁和下一頁,可以用length屬性查看客戶端瀏覽器的歷史列表中訪問的網(wǎng)頁個數(shù)

  1. back() 加載 history 列表中的前一個 URL剩辟。
  • forward() 加載 history 列表中的下一個 URL掐场。
  • go() 加載 history 列表中的某個具體頁面。

Location 對象

  1. Location 對象的屬性
    • href 設(shè)置或返回完整的 URL贩猎。
    • host 設(shè)置或返回主機名和當前 URL 的端口號熊户。
    • hash 設(shè)置或返回從井號 (#) 開始的 URL(錨)。
    • hostname 設(shè)置或返回當前 URL 的主機名融欧。
    • pathname 設(shè)置或返回當前 URL 的路徑部分敏弃。
    • port 設(shè)置或返回當前 URL 的端口號。
    • protocol 設(shè)置或返回當前 URL 的協(xié)議噪馏。
    • search 設(shè)置或返回從問號 (?) 開始的 URL(查詢部分)麦到。
  2. Location 對象的方法
    • assign() 加載新的文檔。
    • reload() 重新加載當前文檔欠肾。
      如果該方法沒有規(guī)定參數(shù)瓶颠,或者參數(shù)是 false,它就會用 HTTP 頭 If-Modified-Since 來檢測服務(wù)器上的文檔是否已改變刺桃。如果文檔已改變粹淋,reload() 會再次下載該文檔。如果文檔未改變,則該方法將從緩存中裝載文檔桃移。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的屋匕。 如果把該方法的參數(shù)設(shè)置為 true,那么無論文檔的最后修改日期是什么借杰,它都會繞過緩存过吻,從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時按住 Shift 健的效果是完全一樣蔗衡。
    • replace() 用新的文檔替換當前文檔纤虽。
      replace() 方法不會在 History 對象中生成一個新的記錄。當使用該方法時绞惦,新的 URL 將覆蓋 History 對象中的當前記錄逼纸。

Screen 對象

  1. availHeight 返回顯示屏幕的高度 (除 Windows 任務(wù)欄之外)。
  • availWidth 返回顯示屏幕的寬度 (除 Windows 任務(wù)欄之外)济蝉。
  • height 返回顯示屏幕的高度杰刽。
  • width 返回顯示器屏幕的寬度。
  • bufferDepth 設(shè)置或返回調(diào)色板的比特深度堆生。
  • ......

Navigator 對象屬性

  1. appCodeName 返回瀏覽器的代碼名专缠。
  • appMinorVersion 返回瀏覽器的次級版本。
  • appName 返回瀏覽器的名稱淑仆。
  • appVersion 返回瀏覽器的平臺和版本信息。
  • cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值哥力。
  • userAgent 返回由客戶機發(fā)送服務(wù)器的 user-agent 頭部的值
  • onLine 返回指明系統(tǒng)是否處于脫機模式的布爾值蔗怠。
  • ......
// 動態(tài)顯示時間
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    function clock() {
        var today = new Date();
        var hours = today.getHours();
        var minutes = today.getMinutes();
        var seconds = today.getSeconds();
        var str = "現(xiàn)在時間:"
        if (hours < 12) {
            str+='上午';
        }else {
            str+='下午';
        }
        str+=hours+'時'+minutes+'分'+seconds+'秒';
        // document.write(str+'<br>')
        var clock=document.getElementById('clock')
        clock.value=str

    }
    setInterval('clock()',1000);
    </script>
    <input type="text" id="clock" size="40">
    <input type="button" id="clock" size="40"  value="停止時間" onclick="clearInterval(timeId) ">
</body>
</html>
// 比賽
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var guojing=new Object();
            guojing.name="郭靖"
            guojing.HP=500;
            guojing.gj=90;
            guojing.sd=60;
            guojing.skill=new Array('亢龍有悔','飛龍在天','見龍在田','鴻漸于陸','潛龍勿用')

        var ouyang=new Object();
            ouyang.name='歐陽鋒';
            ouyang.HP=800;
            ouyang.gj=100;
            ouyang.sd=40;
            ouyang.skill=new Array('靈蛇棍法','鳳凰神力','顛倒陰陽','逆轉(zhuǎn)靜脈','天蟾神功')

        function whoGjwho(a,b) {
            return a.sd*Math.random()>b.sd*Math.random()?[a,b]:[b,a];
        }

        function game() {
            var skillIndex=Math.floor(Math.random()*5)
            var fight = whoGjwho(guojing,ouyang);
            var attacker = fight[0];
            var defender = fight[1];
            var damage=attacker.gj*Math.random()-defender.gj*Math.random();
                if(damage<=0){
                    damage=0
                }else{
                    damage=Math.ceil(damage);
                }
            defender.HP-=damage;

            document.write(attacker.name+"使用了一招"+attacker.skill[skillIndex]+'<br>')
            document.write(defender.name+"損失了"+damage+'點HP'+'<br>')

            if (defender.HP>0) {
                document.write(defender.name+"的HP:"+defender.HP+'<br>'+attacker.name+'的HP:'+attacker.HP+'<hr>')
            }else{
                document.write(defender.name+'戰(zhàn)敗了'+'<br>'+attacker.name+'取得了勝利!'+'<br>')
                alert(attacker.name+'取得了勝利吩跋!'+'Gmame Over!')
                clearInterval(zd)
            }
        }
        var zd=setInterval('game()',50)
    </script>

</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末寞射,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子锌钮,更是在濱河造成了極大的恐慌桥温,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件梁丘,死亡現(xiàn)場離奇詭異侵浸,居然都是意外死亡,警方通過查閱死者的電腦和手機氛谜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門掏觉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人值漫,你說我怎么就攤上這事澳腹。” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵酱塔,是天一觀的道長沥邻。 經(jīng)常有香客問我,道長羊娃,這世上最難降的妖魔是什么谋国? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮迁沫,結(jié)果婚禮上芦瘾,老公的妹妹穿的比我還像新娘。我一直安慰自己集畅,他們只是感情好近弟,可當我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挺智,像睡著了一般祷愉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上赦颇,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天二鳄,我揣著相機與錄音,去河邊找鬼媒怯。 笑死订讼,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的扇苞。 我是一名探鬼主播欺殿,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鳖敷!你這毒婦竟也來了脖苏?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤定踱,失蹤者是張志新(化名)和其女友劉穎棍潘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體崖媚,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡亦歉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了至扰。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鳍徽。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖敢课,靈堂內(nèi)的尸體忽然破棺而出阶祭,到底是詐尸還是另有隱情绷杜,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布濒募,位于F島的核電站鞭盟,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏瑰剃。R本人自食惡果不足惜齿诉,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望晌姚。 院中可真熱鬧粤剧,春花似錦、人聲如沸挥唠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宝磨。三九已至弧关,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間唤锉,已是汗流浹背世囊。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留窿祥,地道東北人株憾。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像壁肋,于是被迫代替她去往敵國和親号胚。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 在JavaScript中對象通常包括兩種類型:內(nèi)置對象和瀏覽器對象浸遗,此外,用戶還可以自定義對象箱亿。 對象包含兩個要素...
    老夫撩發(fā)少年狂閱讀 1,016評論 0 1
  • 一跛锌、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示)届惋,會使用HT...
    凜0_0閱讀 2,777評論 0 8
  • 第1章 認識JS JavaScript能做什么髓帽?1.增強頁面動態(tài)效果(如:下拉菜單、圖片輪播脑豹、信息滾動等)2.實現(xiàn)...
    mo默22閱讀 1,306評論 0 5
  • 今天心情超級不好郑藏。 記得在微博上看過一句話,喜歡上一個人以后就變得不酷了瘩欺。因此在我遇到的很多男生必盖,很多段感情中...
    FIONA_小fish閱讀 219評論 0 1
  • 蔡小賤手把手親手撕開你們引以為傲的生活
    阿毒i閱讀 629評論 2 1