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.