JavaWeb 學習內容

一:
1.在JavaScript中常用的兩個函數
alert("彈出一個提示框") ;
document.write("向瀏覽器輸出內容")

alert("今天德國大勝嗎?") ;
向瀏覽器輸出內容
document.write("今天天氣不錯!!") ;
2.關于JavaScript的變量的定義
        var 變量名= 值;

        注意:
            1)在js中,var可以用來定義任何數據類型的變量,var 可以省略,但是不建議省略
            2)var是可以重復定義變量的(后面的值會覆蓋掉前面的值),是因為JavaScript弱類型語言,而Java是一種強類型語言
            3)如果定義一個變量,但是變量沒有值,那么值(undefind),沒有定義的變量不能直接使用!

            查看一個變量的數據類型,使用一個函數:typeOf(變量名)

            Javascript數據類型:
                    在javascript,數據類型變量名的值來決定的!  
                1)不管是整數還是小數都是number類型!
                2)不管是字符還是字符串,都是string類型         String:在js中表示字符串對象
                3)boolean類型
                4)object   :對象類型

3.!--
類型轉換函數

        string----number類型的整數           parseInt(變量)

        stirng----number類型的小數           parseFloat(變量)
-->

<script type="text/javascript">
    //定義一個變量
    var a = "10" ; //string :里面的值10

    document.write("轉換前a的數據類型是:"+typeof(a)+"<br/>") ;

    //轉換
    a = parseInt(a) ;
    document.write("轉換后a的數據類型是:"+typeof(a)+",值是:"+a) ;

    document.write("<hr/>") ;

    var b = "3.14" ;
    document.write("轉換前b的數據類型是:"+typeof(b)+"<br/>");

    //轉換
    b = parseFloat(b) ;
    document.write("轉換后b的數據類型是:"+typeof(b)+",值是:"+b+"<br/") ;

        4./**
         * 算術運算符:+,-,* ,/.
         * 比較運算符:>= ,<= ,<,>..
         * 邏輯運算符:邏輯雙與&&.邏輯雙或||,邏輯非!
         * 三元運算符:表達式? true的結果:false的結果;
         * 
         * 
         * 注意:js中,true代表1,false代表0
         */

        /*var a = 10;
        var b = 20 ;
        document.write((a+true)+"<br/>") ;
        document.write(a-b) ;*/

        /*var a = 10;
        var b = 20 ;

        document.write(a<=b) ;*/

        /*document.write((false && true)+"<br/>") ;
        document.write((ftrue && true+)"<br/>") ;*/

        /*document.write("<hr/>") ;
        var age = 12 ;

        document.write((age >= 18 ? "成年人": "未成年人")) ;*/

        //流程語句
        //if語句  
        /**
         * if(表達式){
         *  語句1;
         * }else{
         *  語句2;
         * }
         */
        /**
         * 表達式的值:
         *  如果是numbler類型,(整數類型,小數),0表示條件不成立
         *  如果是string類型,要么字符要么字符串,必須有數據,如果是空串,條件不成立
         *  如果是boolean類型,true成立,false不成立
         * 如果是object類型,必須有對象,否則如果是null
         */ 

        //針對兩個結果判斷
        if(null){
            alert("條件成立") ;
        }else{
            alert("條件不成立")
        }

        //js中的switch語句和 Java中的switch語句的區別

        //js中的case后面也可以跟常量,還可以跟變量,還可以跟表達式
        //java中case后面只能跟常量!         
        /**
         * switch(表達式){
         *  case 值1:
         *      語句;
         * break ;
         * 
         * ...
         * default:
         *      語句;
         * break ;
         * }

         5.//witch語句:格式 witch(document){....}
    //將document對象當做witch語句參數,然后直接使用它里面的write() ;

    /**
     *  //顯示"*"形,第一行有一個...
        for(var i = 0 ; i<5; i++){//外層循環控制行數
            for(var j= 0 ; j<=i; j ++){//內層循環控制列數
                document.write("*&nbsp;") ; //&nbsp; 空格 轉義字符

            }
            document.write("<br/>") ;
        }

        document.write("<hr/>") ;

        //table標簽:  使用js里面嵌套表格標簽

// document.write("<table align='center'>") ;
for(var i = 1 ; i <=9 ; i++){
//
for(var j = 1 ; j<=i ;j++){
document.write(i+""+j+"="+(ij)+" ") ;
}
document.write("<br/>") ;
}

// document.write("</table>") ;
*/

    //with語句
    with(document){
        for(var i = 0 ; i < 5 ; i ++){
            for(var j = 0 ; j <=i ; j++){
                write("*&nbsp;");
            }
            write("<br/>") ;
        }

        write("<hr/>") ;
        for(var i = 1 ; i <=9 ; i++){
            for(var j = 1 ; j <= i ;j++){
                write(i+"*"+j+"="+(i*j)+"&nbsp;") ;
            }
            write("<br/>") ;
        }
    }

    6.//for-in:針對數組或者對象進行遍歷
    /**
     * for(var 遍歷的變量名 in 數組名稱/對象名稱)//{
     *          輸出變量名
     * }
     * 
     * 如果是對象(js中的對象是一個重點)進行操作,那么這里變量名就是當前對象的屬性

7.函數的定義:

• function 函數名稱(形式參數列表)//{
• //語句
• }
• 函數的調用
• 函數名稱(實際參數列表) ;
• 函數中的注意事項:
• 1)函數的形式參數不能有var關鍵字定義,否則報錯
• 2)在js中函數是可以有return語句的,直接return,但是沒有返回值
• 3)在js中,函數是不存在的重載概念,后面定義的函數回覆蓋掉前面定義的函數
• 4)當實際參數的數量小于形式參數的數量,就會出現一個值肯定是NaN;如果實際參數大于形式參數,那么最終會計算前面的值,然后將后面的數據丟棄掉!
  5)在js的每一個函數中,里面存在默認的數組:arguments,它的作用就是將實際參數從左到右依次賦值給形式參數(從左到右)
  • */

8.
//方式1
// String str = new String() ;
//var str1 = new String("hello") ;
/*var str2 = new String("hello") ;
document.write((str1==str2)+"<br/>") ;

//在js中valueOf() 默認比較的是他們 的內容是否相同

document.write(str1.valueOf()==str2.valueOf()+"<br/>") ;*/

//創建方式2
//直接賦值的形式
/*var s1 = "hello" ;
var s2 = "hello" ;
document.write(s1==s2+"<br/>") ;
document.write(s1.valueOf()==s2.valueOf()) ;*/

//js中String對象 的常用方法
//chatAt() :返回指定索引位置處的字符
//indexOf():表示某個子字符串在當前字符串中第一次出現的索引
//lastindexOf();
//fontColor():給當前字符串設置一個顏色標記
//substrint(start,end):截取功能

9.  
        //向上取整  //在整數位置+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)) ;

        10.function newDate(){
    //生成一個系統時間的格式:2018-6-17 時:分:秒
    //創建Date對象
    var date = new Date() ;

    //dateStr就是系統時間
    var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&nbsp;&nbsp;"+
                date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;

    //獲取span標簽對象,通過id獲取
    var dateTip = document.getElementById("dateTip") ; //dateTip is null 
    //設置span標簽的innerHTML屬性:文本屬性
    dateTip.innerHTML = dateStr;
}

//定時器
//1)setInterval("任務",毫秒值) ; 每經過多少毫秒重復執行這個任務(函數)
//2)timeout("任務",毫秒值) ;經過多少毫秒后執行一次這個任務

window.setInterval("newDate()",1000) ;

11.//如何創建一個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()+"日"+"&nbsp;&nbsp;") ;

    //獲取一天當中的小時
    document.write(date.getHours()+":") ;

    //獲取分
    document.write(date.getSeconds()+":") ;

    //獲取分鐘的秒
    document.write(date.getMinutes()) ;

_____________________________________________________
一:
1. Array對象的創建方式
     *  
     * 注意事項:
     *      1)在js中,數組可以存儲任意類型的元素!
     *      2)在js中,不存在數組角標越界一說,數組中的元素數量是可以不斷的增加..不會出現異常!
     *  
     */
    //方式1:相當于動態初始化
    //1.1

// var arr = new Array(3) ;

    //1.2 

// var arr = new Array() ; //表示0個長度

    /*alert(arr.length) ;

    //給元素賦值
    arr[0] = "hello" ;
    arr[1] = 100;
    arr[2] = true ;
    arr[3] = "world" ;

    alert(arr.length) ;*/

    //1.3  直接指定數組中 具體元素

// var arr = new Array("hello",100,true,'a') ;

    //方式2 :直接指定數組的元素,不需要new Array() ;類似于Java中數組的靜態初始化;
    /*var arr = [10,"hello","world",true] ;

    //遍歷數組
    for(var i = 0 ; i < arr.length ;i++){
        document.write(arr[i]+"&nbsp;") ;
    }*/

    /**
     * 兩個方法
     *  join():將數組中的所有元素以一個符號進行拼接,返回一個新的字符串
     * reverse 方法:將數組中的元素進行反轉

2.     js中的自定義對象
   
       定義對象
           1)相當于有參構造 的形式
           2)無參構造的形式
   
           function 自定義對象(Person) (參數名){
               //定義屬性
               //定義方法
   
           }
   
           創建對象
           var p = new Preson(實際參數) ;
   
           //輸出對象p中的屬性值
           //調用對象p中的方法
       3.  設計一個數組工具對象，例如ArrayUtil對象，該對象提供以下兩個方法：
       search(array,target): 傳入指定的數組和指定的字符串，返回指定字符串所在的位置
       max(array): 傳入指定的數組，返回該數組中的最大值
   -->
   
   //創建一個數組,靜態初始化

   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);

3. 問題:剛才使用的是自定義了一個對象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)原型屬性是可以直接被內置對象調用然后追加方法

   //原理
   
   /定義了原型對象
   function Prototype(){
   
       this.search = function(){
   
       }
   }
   
   function Array(){
   
       //創建原型對象
       var prototype = new Prototype() ;
   
       //自動追加
       this.search = function(){
   
       }
   }
   
   -->

<script type="text/javascript">
//使用內置對象的原型改進
//給Array對象追加search
Array.prototype.search = function(target){
//遍歷Array對象中的數組
for(var i = 0 ; i< this.length ; i++){
//判斷
if(this[i] == target){
return i ;
}
}
//找不到,返回-1
return -1 ;
}

//內置對象的原型屬性追加max() 
Array.prototype.max = function(){
    //定義參照物
    var max = this[0] ;
    //遍歷其他元素
    for(var i = 1 ; i < this.length; i++){
        //判斷
        if(this[i] > max){
            max = this[i] ;
        }
    }
    return max ;
}

////創建一個數組,靜態初始化
var arr = [43,65,13,87,3,19] ; //var arr = new Array(43,65,13//) ;
var index = arr.search(3) ;
document.write("你要查找的元素的位置是:"+index+"<br/>") ;

var max = arr.max() ;
document.write("該數組中的最大值是:"+max) ;

5.  window對象:它代表瀏覽器的一個窗口對象

        注意:
                由于window對象中的方法頻繁調用,所以為了簡化書寫方式,有時候window可以去掉

            里面涉及的方法:
                    open("打開資源文件url","以什么什么方式打開(_blank)/_self","指定新打開的窗口和高度")

            和定時器相關的方法:
            setInterval("任務",時間毫秒值); 沒經過多少毫秒后重復執行這個任務
            clearInterval():取消和setInterval相關的任務
                window.clearInterval(iIntervalID)  :這個要插入一個Id
            setTimeout("任務",時間毫秒值);   經過多少毫秒后只執行一次
                clearTimeout():取消和setTimeout相關的超時事件

            和彈框相關的方法
            window.alert("提示框") ;  //window可以省略
            window.confirm("消息對話框");有確認框,取消框
            prompt:提示對話框，其中帶有一條消息和一個輸入框

    -->

<script type="text/javascript">
//觸發open單擊事件

    function testOpen(){

        //調用open 方法
        window.open("06.廣告頁面.html","_blank") ;
    }

    //和定時器相關的函數
    //定義一個任務id
    var taskId ;  
    function testSetInterval(){

        //每經過2秒重復執行testOpen
        taskId = window.setInterval("testOpen()",2000) ;

    }

    //清除和setInterval相關的定時器
    function testClearInterval(){

        //調用功能
        window.clearInterval(taskId) ;
    }

    //定位任務id
    var timeoutId ;
    //setTimeOut定時器
    function testSetTimeout(){

        //經過3秒后執行testOpen函數
          timeoutId = window.setTimeout("testOpen()",3000) ;
    }

    function testClearTimeout(){

        window.clearTimeout(timeoutId)
    }

    //alert的方法
    function testAlert(){

// window.alert("今天天氣不錯....");
alert("今天天氣不錯....");
}

    function testConfirm(){

        //調用
        var flag = window.confirm("確認刪除嗎?一旦刪除,數據不可恢復!!") ;
        if(flag){
            alert("數據已刪除")
        }else{
            alert("您取消了刪除") ;
        }
    }

    //和確認提示框,有一條消息
    function testPrompt(){

        var flag = window.prompt("請您輸入u頓密碼!") ;
        if(flag){
            alert("輸入正確");
        }else{
            alert("請重新輸入");
        }
    }

6.  
    location對象:
        href屬性:可以修改頁面的href屬性來實現頁面跳轉     更改的href屬性:--- URL(統一資源定位符)
                                                                 URI
        方法:
            定時刷新:reload()
    -->

<script type="text/javascript">

    //loaction:地址欄對象
    function testHref(){

// alert(window.location.href) ;

        //修改location的href屬性
        window.location.href="06.廣告頁面.html" ;  //location的 href屬性
    }

    function testRelod(){

        //調用reload定時刷新
        window.location.reload() ;
    }
    //定時刷新:reload()

// function testRefresh(){

        //定時器
        window.setTimeout("testRelod()" ,1000) ;

// }

7.  history對象中的方法
            forward:裝入歷史列表中下一個url
            back:裝入歷史列表中前一個url
            go(正整數或者負整數)

-->
<script type="text/javascript">

function testForward(){

    //調用功能

// window.history.forward() ;

    window.history.go(1) ;
}

8.事件編程的分類:
    1)和點擊相關的事件
        單擊點擊事件: onclick
        雙擊點擊事件: obdbclick

    2)和焦點相關的事件
        獲取焦點事件:onfocus
        失去焦點事件:onblur

    3)和選項卡發生變化

-->
<script type="text/javascript">

    //和單擊點擊相關的函數
    function testClick(){
        alert("點了...") ;
    }

    //雙擊
    function testDbClick(){
        alert("你得雙擊...") ;
    }

    //獲取焦點(在js中,一般情況如果要獲取標簽對象,最好的使用方式就是給它給一個id,id是唯一的)
    function testFocus(){
        //通過id屬性
        var usrename = document.getElementById("username") ; //獲取標簽對象
        username.value =""   ;
    }

    //失去焦點(鼠標光標從文本輸入框中移出來)
    function testBlur(){
        //獲取用戶在文本輸入框中的內容
        var username = document.getElementById("username").value ;

        //獲取span標簽對象
        var nameTip = document.getElementById("nameTip") ;
        //如果輸入的值不是"eric",就是提示用戶名不符合規則
        if(username =="eric"){
            //給nameTip設置innerHTML屬性
            nameTip.innerHTML = "校驗成功,符合規則".fontcolor("#00ff00") ;
        }else {
            nameTip.innerHTML ="用戶名不符合規則".fontcolor("#ff0000");
        }
    }

    9.  <!--
    和選項卡發生變化相關的事件:onchange  (下拉菜單,select標簽)
    和鼠標相關的事件:
            onmouseover:鼠標經過的事件
            onmouseout:鼠標移出的事件

    和頁面加載相關的事件:onload
            一般用在body
                當body中的內容加載完畢之后就會觸發這個事件

                10.