黑马程序员——JavaScript(上)

 ——- android培训java培训、期待与您交流! ———-

1.1,JavaScript
1,JavaScript被设计用来向HTML页面添加交互行为。
2,Javascript:动态的控制html的标签,表单的验证
3,Java是面向对象的语言,JavaScript(JS)是基于对象的语言(面向对象)。
4,Java是一门强类型的语言,JS是弱类型语言(在未使用变量之前,变量是没有类型的)。
5,Java语言需要编译,交给JVM运行。js语言书写的代码,不需要编译,直接交给浏览器解析运行。

1.2,JavaScript和html代码的结合方式
1,可以在html文件中使用script标签嵌入JS代码:通常把scipte标签写在html中head部分。
这里写图片描述

2,可以把JS代码单独的书写js文件中,在需要的html页面中引入:
通过scirpt标签中的src属性,引入外部的js文件。
两种方式不能够混合使用,在使用src属性引入外部文件之后。在script标签内部不能再书写js代码。
这里写图片描述

1.3,JS中的注释
JS中的注释:单行// 多行/* */
多行注释不能嵌套使用。

1.4,关键字、标识符
关键字:被JS这门赋予了特定的含义的单词或者字母的组合等。
var if for break continue 等
标识符:开发人员在书写代码的时候,根据自己的程序需求,定义的一些名称:
标识符尽可能不要与关键字冲突。
变量名、数组名、函数(java方法)名、对象名等
标识符只能以数字 字母 下划线 $ 组成,不能是以数字开始。

1.5,常量
JS中的常量分类:
数值number:不分整数和小数
字符串string:使用单引号或者双引号引用起来的都是字符串’a’
布尔值:true或false
null值:null
undefined:undefined—-未定义。

1.6,变量
1,变量:它表示的是一个内存空间。可以存放常量
JS中的数据类型:
数值数据:number
字符串:string
布尔类型:boolean
undefined:undefined
null:null —–值

2,JS中的定义变量格式:
无论什么类型的数据,都是用var去定义变量。
var 变量名;
var 变量名 = 值;

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>03js变量.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">

        var b ;
        //如果没有初始值,表示的是undefined --==未定义类型。
        //null 表示的是一个值,一个空值
        alert(b);

        var a = 10;
        alert(a);
        alert(typeof(a));
        /* 变量内可以存放任何类型的数据 */
        //如何指定当前变量所存放的数据类型。 通过typeof(a) 可以知道变量内所存放的数据类型。
        a = "abc";
        alert(a);
        alert(typeof(a));
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

2.1,算术运算
js运算符号:+ - * / % ++ –

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>04js的算数运算符.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        /* var a = 10;
        var b = 20;
        var c = a+b;

        alert(c);
        */      
        var a = 10;
        var b ="10";
        /*如果字符串和其他类型的数据进行加法运算的时候,实际上是字符串拼接。*/
        var c ;
    /*  var c = a+b;
        alert(c); */
        /*如果字符串和其他类型数据进行非加法运算的时候,会把字符串转换为number数值类型,然后进行运算
            如果字符串不能够转换为number类型的时候,那么计算结果会返回NaN (not a number)不是数字。
        */

/*      c = a-b;
        alert(c); */
        b = "a";
        c = a-b;
        alert(c);
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

2.2,赋值运算
Js复值运算符:= += -= *= /= %=

= 赋值号:把右侧的结果赋值给左侧的变量空间。
3 = 3;错误,左侧不是空间。右侧的值复值给左侧空间。
+=  -=  *=  /=   %=

2.3,关系(比较)运算
JS中的比较运算符号:> >= < <= != ==
===(恒等、绝对等.要求值形同的同时,还要数据类型也要相同。

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>05比较运算符l.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        var a = 10;
        var b = 4;
        alert(a > b);

        var c = "10";
        //==只是值比较。js会自动转换类型比较
        alert(a==c);
        //a number ,b string ===要求值相同同时还要数据类型也要相同。
        alert(a===c);
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

2.4,逻辑运算
Js逻辑运算符:&& || !,
&& 左边为false右侧不执行====短路
|| 左边为true右侧不执行。

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>06逻辑运算.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        var a = 3;
        var b = 4;
        var c = 5;
        /* 
        alert(a>b && b<c);

        alert(a>b || b <c); */
        /* 
            js中逻辑运算符的两侧不一定布尔类型。 如果不是布尔类型的。0,null,undefined,表示为false ,非0,非null,非undeinfed表示为真

            如果&& 前面的值为真,直接返回后的值。
             如果&&前面的值是假,直接返回前面的值。

            如果|| 前面的值为真,直接返回前面的值。
            如果|| 前面的值为假,直接返回后面的值。
        */
        //alert(a && b);
        alert(a||b);
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

2.5,位运算
? & 与:二进制比较,两个都是1返回1,否则是0;
?| 或:二进制比较:一个是1返回1,否则是0;
?^ 异或:两个都相同返回0,否则1;
?~ 取反: 1取0,0取1;
?>> 右移:高位补符号位” 这里右移一位表示除2
?<< 左移:左移一位表示乘2,二位就表示4,就是2的n次方
?>>> 无符号右移,高位补0”; 与>>类似

注:用的不多,通常都是有java处理完然后返回给页面

2.6,三元(三目)运算
Js:
格式:表达式1 ?表达式2 : 表达式3
当表达式1 为 true ,把表达式2的结果作为三目运算的结果
当表达式1 为 false ,把表达式3的结果作为三目运算的结果
var a = 3;
alert( a ? “aaa” : ”bbb” );

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>07三元运算符.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">

        var a = 3;
        /* 表达式1不要求一定是布尔类型的。0,null,undefined,false,非0,非null,非undefined表示为true */
        var c = a?"111":"222";

        alert(c);

    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

3.1,判断结构
If(条件){
执行语句
}else if(条件){
执行语句
}
else{ 执行语句}

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>08if语句.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        var index = 10;

        /* if(index%2==0){
            alert("偶数");
        }else{
            alert("奇数");
        } */


        //if中的条件可以不是布尔类型
        if(index%2){
            alert("奇数");
        }else{
            alert("偶数");
        }

    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

3.2,switch分支结构
格式:
switch( 常量值|表达式 ){

case 值1:
    语句;
    break;
case 值2:
    语句;
    break;
case 值3:
    语句;
    break;
。。。。。
default:
    语句;
    break;

}

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>09switch.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
                    /* 100    A     
                    90~99  A        
                    80~89  B           
                    70~79  C   
                    60~69  D   
                    0~59   E */

        /* int a=89 ; int b =a/10 ; b = 8 */            

        var index = 89;
        /* alert(index/10); 
            js中是不区分整数和小数的。
            所以89/10 结果是8.9

            通过parseInt()函数 去取整
        */
        switch(parseInt(index/10)){
            case 10:
                alert("A"); 
                break;
            case 9:
                alert("A"); 
                break;
            case 8:
                alert("B"); 
                break;
            case 7:
                alert("C"); 
                break;
            case 6:
                alert("D"); 
                break;
            default :
                alert("E");
        }


    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

3.3,while和do-while
1,while循环格式:
while( 循环的判断条件 ){
循环体
}

2,do-while格式:
do{
循环体
}while( 循环的条件 );
Do while的循环体至少执行一次

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>10while语句.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        /* 表示一个循环变量 */
        var i =1;
        /* 定义一个变量存放和 */
        var sum=0;
        while(i<=10){
            /* i++ 先赋值,再运算 */
            sum+=i++;
            /* i++; */
        }
        alert(sum);
        sum = 0;
        var i = 10;
        /* while中的条件可以不是布尔类型的 */
        while(i){
            sum+=i--;
        }
        alert(sum);
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>
示例2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>11dowhile.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">

        var i = 10;
        var sum = 0;
        do{
            sum+=i--;
        }while(i)
        alert(sum);
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

3.4,for循环
Js:
For(表达式1;条件表达式2;表达式3)
表达式1:初始化循环变量(可以省略)
表达式2:循环条件(必须的)
表达式3:循环变量的改变(可以省略)

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>12for 语句.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">

        for(var i=1;i<=100;i++){
            /* if( !(i%5 || i%6) ){
                alert(i);
            } */
            if( i%5==0 && i%6==0){
                alert(i);
            }
        }

    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

3.5,循环嵌套
循环嵌套的执行:外层循环执行一次,内层循环执行完毕。

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>13嵌套循环.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style type="text/css">
        td{
            width: 100px;
        }
    </style>

    <script type="text/javascript">

        /* document.write(sss)==想body标签中输出内容 */
        document.write("<table>");//输出一个table标签
        for(var i = 1 ; i <=9 ; i++){
            document.write("<tr>"); //输出一个行
            for(var j = 1 ; j <= i ; j++){
                document.write("<td>");
                document.write(j+"*"+i+"="+j*i);
                document.write("</td>");
            }
            document.write("</tr>");
            /* document.write("<br/>"); */
        }
        document.write("</table>");

    </script>
  </head>

  <body>
  </body>
</html>

3.6,语句控制
break:它可以和switch或者循环结合使用,使用在循环中,介绍当前break所在的循环。
continue:它只能循环结合使用,跳过本次循环,接着进入下次循环。

3.7,JS中的消息框
1,警告框:alert(“文本”)

2,确认框:confirm(“文本”)

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>14确认框.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        /* 您确定取消订单么 */
        var index = confirm("您确定取消订单么");
        /*当点击确定的时候,返回值是true  */
        if(index){
            alert("您取消了订单");
        }else{
            alert("您没有取消订单");
        }
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

3,提示框:prompt(“文本”)

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>15警示框.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        /* 购买东西,需要输入密码操作 
            prompt是由返回值,如果用户点击确定,那么返回值就是用户输入的值。如果用户点击取消返回值是null
        */
        var index = prompt("您需要输入您的密码");

        if(index == "123456"){
            alert("支付成功");
        }else{
            alert("密码错误");
        }

    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

4.1,数组
数组:存储多个数据。数组有数组名、下标(索引index,脚标)、长度length,遍历等操作。

4.2,数组的定义
1,var 数组名 = [值,值,值…..];

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>16js数组的第一种定义方式.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">

        var arr=[1,2,3];
        /* js中的数组,长度可变,
           js中的数组,可以存放任何类型的元素。
                 把js数组当作集合来看
             */
        arr[5] = 6;
        arr[4] = "abc";
        arr[3] = null;
        /* 数组中提供length属性,表示的是数组的当前长度 */
        for(var i = 0  ; i < arr.length  ; i++){
            document.write(arr[i]+"----");
        }


    </script>
  </head>

  <body>
  </body>
</html>

2,var 数组名 = new Array();

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>17数组的第二种定义方式.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        /* 
            如果array没有接受任何参数,此时数组的长度是0
            如果array接受多个参数,那么这些参数是数组的初始值。
            如果array接受一个参数,并且这个参数是整数,表示的是初始长度
            如果array接受一个参数,并且这个参数是小数,那么报错。
            如果array接受一个参数,并且不是数值类型的,难么是初始值。此时数组的长度是1
         */

        /* var arr = new Array("1","2",3,5);

        for(var i = 0 ;i < arr.length ; i++){
            document.write(arr[i]+"----");
        }
        alert(arr.length);
     */
        /* var arr = new Array(4.1);
        alert(arr.length); */

        var arr = new Array(4,5,6,7,34,6);

        alert(arr.join("-"));

        document.write(arr.join("---"));

    </script>
  </head>

  <body>
  </body>
</html>

5.1,函数(方法)
函数的作用:封装可以独立运行的代码,在程序需要的时候,可以通过函数名进行调用。

5.2,函数的定义格式
1,JS中的函数第一种定义格式:
function 函数名( 形参名 , 形参名 …… ){
函数体
}

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>18函数的第一种定义方式.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">

        /* 求和函数 */
        /* js中函数如果需要参数,不需要使用关键字var 
            js中的函数,如果需要返回值,那么直接return 返回值。
            js中的函数,只有被调用才会执行
            js中的函数,没有重载的概念。如果函数名相同,后面的函数会把前面的函数覆盖。

            js中,如果函数,需要接受参数,但是调用的时候没有传递,那么这个参数是undefined;
            如果js的函数,接受的参数比定义的参数要多。那么程序不报错。接受参数按照顺序接受。

            如果js函数接受了多个参数,所有的参数都在argumens中。是一数组。可以通过便利数组的方式,取出所有的参数。(通常不建议使用)
            通常我们需要几个参数就去定义几个参数。
        */
        function sum( a , b){
            alert("这是第一个");
            return a+b;
        }
        function sum( a , b,c){

            /* alert("这是第二个"); */
            //alert(c);
            /* alert(arguments.length); */
            var s = 0;
            for(var i = 0 ; i<arguments.length ; i++){
                s+=arguments[i];
            }
            return s;
        }
        var s = sum(1,2,3,4,5);
        alert(s);
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

2,第二种定义函数的格式
在JS中有个内置对象Function,我们可以使用当前Function对象创建出函数
格式:
var 函数名 = new Function( “形参名,参数名” , “方法体” );

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>19函数的第二种定义方式.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        /* 这种写法不长使用。因为函数体是一个字符串。如果函数体很长。 定义方式会非常的麻烦。*/
        var sum = new Function("a,b" , "return a+b");
        /* 调用和其他没有区别 */
        alert(sum(1,2));
    </script>
  </head>

  <body>
    This is my HTML page. <br>
  </body>
</html>

3,第三种定义函数的格式
匿名函数:格式:
function ( 参数列表 ){
函数体
}

示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>20函数的第三种定义方式.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        alert("函数外");
        alert(document.getElementById("img1"));
        window.onload = function(){
            //alert(document.getElementById("img1"));
            //alert("函数");
            /* 首先需要获取到html中的标签对象。为这个对象去绑定一个事件。 */
            /* _img 表示的是img标签对象 */
            var _img = document.getElementById("img1");

            /* 为图片绑定一个鼠标悬停事件 */
            _img.onmouseover = function(){
                /* 为图片设置一个高度 */
                _img.height=10000;
            }
        }
        /* document.getElementById("id值"); 可以得到文档中的标签对象。 */

    </script>
  </head>

  <body>
    <img id="img1" src="7.jpg" >
  </body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值