JavaWeb笔记-02-js初识

JavaScript
    是基于对象和事件驱动的语言,应用于客户端

    解释:
    基于对象
        --提供了很多对象,可以直接使用

    事件驱动:
        --html做网站静态效果,JavaScript做动态效果
   
    应用于客户端:
        --客户端指浏览器

1.js特点:

    1)交互性 
        --信息的动态交互
    2)安全性 
        --js不能访问本地磁盘的文件
    3)跨平台性
        --java里跨平台,需要用到虚拟机
        --只要浏览器支持JS,都可运行

2.JavaScript和Java的区别(雷锋塔和雷锋,无任何关系)

   1)公司不同
        --Java是sun公司
        --JS是网景公司
    2)JavaScript是基于对象,Java是面向对象
    3)Java是强类型语言,JS是弱类型。
    4)JavaScript只需要解析就可以执行。Java需要先编译成字节码文件,再执行

3.JS的组成(三部分)

    1)ECMAScript
        -ECMA:欧洲计算机协会,制定JS规则
        JS的语法,语句等规则


    2)BOM
        broswer object model
        浏览器对象模型
 

    3) DOM
        document object model
        文档对象模型

4.JS与html的结合方式(两种)(Js不能单独使用,需要和html结合使用)


    1)使用标签

       <script type="text/javascript"> 在此处写JavaScript代码</script>
        
        eg://向页面弹出窗口,显示内容helloworld
        

<script type="text/javascript">
                alert("helloworld");    
        </script>

    知识点:向页面弹出窗口,输出内容
        alert("填写输出内容");

    
    约定:<script></script>标签一般放在</body>后面。  防止html从上往下解析时,部分变量未定义。


    2)使用script标签,引入一个外部js文件


       先创建js文件
        引入:

<script type="text/javascript" src="文件路径">    
        </script>
    


    注意:引入外部js文件后,<script>标签内部代码就不执行。

5. j的原始类型和声明变量
    

    定义变量都使用var

    原始类型(5种):

       1)string
            var str = "abc";
        2)number
            var m = "123";
        3)Boolean
            var flag = true/false;
        4)null
            var date = new Date();
            获取对象的引用,null表示对象引用为空。

        5)undefined
            表示定义了一个未赋值的对象
            var un ;
    
    typeof();查看当前变量的数据类型。

6.js语句


    js语句与Java相同,用法也都相同。
       if   switch   for  while do-while

    
    js中不区分整数和小数,都是数字。

   数字字符串的加减法
         var str = "123";  定义数字字符串:
         str + 4;          执行加法   结果为"1234"   加法为字符串拼接
         str - 4;          执行减法   结果为 119     减法为正常四则运算
    
    boolean类型的加减法
        var flag = true/false;
        true + 1;          执行加法   结果为 2     true为1
        false + 1;         执行减法   结果为 1       flase为0

    == 与 ===  区别
        == 只比较值
        ===比较值和类型

    引入知识
        直接向页面输出语句,无弹窗。
        既可输出变量,也可输出html代码。

     document.write("填写输出内容");

    

7.实现99乘法表的练习

   //循环行
    for(var i = 1; i <= 9; i++ ){
        for(var j = 1; j <= i; j++){
            document.write(j + "*" + i + "=" + i*j);
        }
        document.write("<br>");  //换行
    }


    //用表格改进,使对齐

    document.write("<table border='1'>");  //生成表
    //循环行
    for(var i = 1; i <= 9; i++ ){
        document.write("<tr>");    //生成行  
        for(var j = 1; j <= i; j++){
            document.write("<td>");  //生成列单元格
            document.write(j + "*" + i + "=" + i*j);
            document.write("</td>"); //列单元格标签结束
        }
        document.write("</tr>");  //行标签结束
    }
    document.write("</table>");   //表标签结束


    注意事项:双引号内只能为单引号
        document.write("<table border='1'>");


8.js的数组

  定义方式(三种)  ***数组内无类型限制,长度可变

    1) 使用[ ]  var arr = [1,2,3];   
    2) 使用内置对象Array
        var arr = new Array(5);  //先定义数组长度,后传值。 此时数组长度为5
        arr[0] = "1";
    3) 使用内置对象Array
        var arr = new Array(1,2,3)  直接传入数组内容,长度自动检测

    数组中有length属性
    arr.length();  返回数组长度

 9.js的函数 

   在js里定义函数的方式(三种)

    1)使用关键字function

        function 方法名(参数列表){
            方法体;
            返回值(可有可无,根据需要)
        }

       调用:  方法名();

   2)匿名函数 

        function (参数列表){
            方法体;
            返回值(可有可无,根据需要)
        }

        调用时先命名: var 方法名 =    function (参数列表){
                    方法体;
                    返回值(可有可无,根据需要)
                    }
            然后: 方法名();

    
    3)使用js里的内置对象Function(动态函数)(了解即可)

        var 方法名 = new Function("参数列表","方法体和返回值"); 
        
        eg: var add = new Function("a,b","var sum = a+b ; return sum"); 

10.js的全局变量和局部变量
    
    全局变量: 在Script标签里定义一个变量,全局都可以使用
    局部变量: 在方法内部定义一个变量,只能在方法内部使用。

猜你喜欢

转载自blog.csdn.net/qq_41307491/article/details/81160178