笔记-JavaWeb学习之旅7

时间：2022-12-28 13:02:41

JavaScript基础

概念：一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎，是一个脚本语言，不需要编译，直接就可以被浏览器解析执行。

JavaScript = ECMAScript+JavaScript自己特有的东西(BOM+DOM)

ECMAScript:客户端脚本语言的标准

​ 基本语法：

与html结合的方式有两种内部JS和外部JS

注释：单行注释//，多行注释/**/

数据类型：1.原始数据类型（number,string,boolean,null,undefined）2.引用数据类型：对象

九九乘法表练习
<!DOCTYPE html>
<!--suppress JSAnnotator -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            border:1px solid;
        }
    </style>
    <script>
        document.write("<table align='center'>");
        for(var i= 1;i<=9;i++){
            document.write("<tr>");
            for(var j=1;j<=i;j++){
                document.write("<td>");
                var stri = i+"";
                var strj = j+"";
                var str = strj+"*"+stri+"=";
              document.write(str+(i*j)+"&nbsp &nbsp &nbsp");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</head>
<body>

</body>
</html>

笔记-JavaWeb学习之旅7

JavaScript:Function对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //创建Function对象的方式
        //第一种方式创建对象
        function fun1(a,b){
            document.write(a+b);
        }
        // 调用第一种方法
        //fun1(2,5);//7
        //第二种方式创建对象
        var fun2=function(a,b){
            document.write(a+b);
        }
        //调用第二种方法
        fun2(2,8);//10
        //Function的length属性,代表形参的个数
        document.write(fun2.length);//2
        //定义一个相同名称的方法，会覆盖之前的
        function fun1(a,b){
            document.write(a-b);
        }
        fun1(2,3)//-1
        //求任意个数的和
        //在啊方法的声明中有一个隐藏的内置对象(数组)
        //他会封装所有的实际参数
        function add(){
            var sum= 0;
            for(var i =0 ;i < arguments.length;i++){
                sum+=arguments[i];
            }
            return sum;
        }
        var sum = add (1,2,3);
        alert(sum);
    </script>
</head>
<body>

</body>
</html>
Array对象

Array对象创建的三种方式

var arr = new Array(元素列表);

var arr = new Array(默认长度);

var arr = [元素列表];

Array对象的常用方法

join(参数):将数组中的元素按照指定的元素进行拼接

特点：js中，数组元素的类型是可变的，数组长度是可变的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //创建对象
        var arr1 = new Array(1,2,3,"hahhaha");//数组也可以存放不同的数据类型
        var arr2 = new Array(5);//只有一个元素时候代表的是数组的长度
        var arr3 = [1,2,3,4];
        //输出数组,将会直接打印数组的内容
        document.write(arr1+"<br>");//1,2,3,"hahhaha"
        document.write(arr2+"<br>");//,,,,
        document.write(arr3+"<br>");//1,2,3,4
        //调用Array的join方法，将会按照指定格式打印数组
        document.write(arr1.join("$"));

    </script>
</head>
<body>

</body>
</html>

Date对象

创建方式 :var date = new Date();

常用方法：

toLocaleString():返回当前date对象对应的本地字符串格式

getTime()：获取毫秒值，返回当前如期对象描述的时间到1970年1月一日0点的毫秒值差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var date = new Date();
        document.write(date+"<br>");//Wed Jun 05 2019 16:09:06 GMT+0800 (中国标准时间)
        document.write(date.toLocaleString()+"<br>");//2019/6/5 下午4:09:06
        document.write(date.getTime()+"<br>")//1559722146361
    </script>
</head>
<body>

</body>
</html>
Math对象：

不需要创建，直接可以调用方法

常用方法：

random()返回0~1之间的随机数，含0不包含1

ceil(x):对数字进行向上舍入，

floor(x);对数字进行向下舍入

round(x)，把数四舍五入

去1~100之间多的随机整数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var number = Math.round(Math.random()*100)+1;
        document.write(number)
    </script>
</head>
<body>

</body>
</html>

RegExp:正则表达式对象

正则表达式：定义字符串的组成规则

1.单个字符：[],比如[a],[ab],[a-zA-z0-9],特殊符号代表的单个字符，\d:单个数字字符[0-9],\w:单个单词字符[a-zA-z0-9_]

2.量词符号：

？：代表出现0次或1次，

*：表示出现0次或多次

+：出现1次或多次

{m,n}：表示 m<=数量 <=n

{,n}:最多n次

{m,}最少m次

开始结束符号 ：^表示开始，$表示结束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //验证字符串是否符合正则表达式
        var reg = /^\w{6,12}$/;
        var name="zhangsan";
        var flag = reg.test(name);
        alert(flag);
    </script>
</head>
<body>

</body>
</html>
Global对象

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用

常用方法:

encodeURI():url编码

decodeURL():url解码

encodeURIComponent():url编码，编码的字符更多

decodeURIComponent();url解码

parseInt：将字符串转为数字，会逐一判断每一个字符是否是数字，直到不是数字为止，会将前边数字部分转为number

isNaN():判断一个值是否是NaN

eval():将JavaScript字符串，并把它作为脚本代码来执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       var str = "云想衣裳花想容";
       //编码
       var encode = encodeURI(str);
       document.write(encode+"<br>");
       var s = decodeURI(encode);//%E4%BA%91%E6%83%B3%E8%A1%A3%E8%A3%B3%E8%8A%B1%E6%83%B3%E5%AE%B9
       document.write(s+"<br>");
       //编码
        var encode1 = encodeURIComponent(str);
        document.write(encode1);
        //将字符串装换为数字
        var str1 = "123abc";
        var number = parseInt(str1);
        alert(number);//123
        //如果是a123abc会变成NaN类型

    </script>
</head>
<body>

</body>
</html>

DOM简单学习：控制HTML文档的内容

绑定事件的两种方式

1.直接在html标签上，指定事件的属性操作，属性值就是代码

2.通过js获取元素对象，指定事件属性，设置一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--//onclick单击事件-->
    <!--//直接在html标签上，指定事件的属性，属性值就是代码-->
    <!--只要图片一接触到单击就会执行相应的代码-->
    <img src="img/off.gif" onclick="fun();">
    <img id="light2" src="img/on.gif">

    <script>
        function fun(){
           for(var i=0;i<100;i++){
               alert("你还可以点我最后一次");
           }
        }
        function fun2(){
            alert("咋老点我?")
        }
        var ligth2 = document.getElementById("light2");//获取id为light2元素对象
        ligth2.onclick=  fun2;//操作元素对象
    </script>
</body>
</html>

电灯开关案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--导入图片-->
    <img src="img/off.gif" id="hight">
    <!--获取元素对象，改变属性-->
    <script>
        var hight = document.getElementById("hight");
        //绑定事件,添加要执行的代码
        var flag = false;
        hight.onclick=function(){
            //灯off代表状态为false
            if(flag){
                hight.src="img/off.gif";
                flag=false;
            }else{
                //当单击的时候，灯如果状态为on,则单击后关闭灯
                hight.src="img/on.gif";
                flag=true;
            }
        }
    </script>
</body>
</html>
BOM

1.概念：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象

2.组成：

window:窗口对象

Navigator:浏览器对象

Screen:显示器屏幕对象

History:历史记录对象

Location:地址栏对象

window：窗口对象

创建方式:无需创建，可以直接方法名调用

常用方法:alert(),confirm(),prompt()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="CloseWindow">关闭窗口</button>
    <button id="NewWindow">打开窗口</button>
    <script>
        var newwindow;
        var nw = document.getElementById("NewWindow");
        nw.onclick=function(){
            //这个open方法返回的是window对象
           newwindow=open("https://www.baidu.com");
        }
        //document对象的方法getElementById会返回参数指定ID的对象
        var cw = document.getElementById("CloseWindow");
        function fun(){
          //关闭打开的新窗口
          newwindow.close();
      }
        //绑定元素对象
        cw.onclick=fun;


    </script>
</body>
</html>
标签：

相关文章