JavaScript01(JavaScript入门语法)

JavaScript的语法

JavaScript如果嵌套在html中，应该写在head标签中

JavaScript的基本概念

• 区分大小写，与Java一样。变量、函数名、运算符以及其他一切东西都是区分大小写的
• 变量是弱类型的：与Java不一样。JavaScript中的变量无特定的类型，定义变量时只有var(let) 运算符可以将它初始化为任意的类型。变量的类型取决于给变量赋值的内容(具体可以使用typeof进行判断)
• 每行结尾的分号可有可无：与Java不一样。如果一条语句的结尾没有分号表明结束的话，前提是这样没有破坏代码的语义。最好的编码习惯是加入分号。

变量

变量的定义： var 变量名称；
Java中局部变量必须初始化赋值，但在JS中不是必需的。
Js在定义的时候不指定具体的数据类型，而是根据具体赋给的值来决定是什么类型。

  <script type="text/javascript">
        var age=10;
        var name= 'ZZQ'
        var  isaa=false;
        document.write(age+'的数据类型是:'+(typeof age)+'
');
        document.write(`${name}的数据类型是:${typeof name} 
`);
        document.write(`${isaa}的数据类型是:${typeof isaa} 
`);
    script>
／／JS变量的类型会随着值的改变而改变
／／JS中变量可以重复，下面的变量会把上面的给覆盖。
1
2
3
4
5
6
7
8
9
10

JavaScript原始值类型

五种原始类型，即undefined、null、boolean、number和string

• number

number代表数值类型，包括了Java中的6种数值类型，不管是整数还是小数都是使用number数据类型。number的包装类是：Number(可以获取最大值和最小值

• string

字符串类型：在js中没有字符类型，字符串类型可以使用 ‘’或者“”“”，一般使用单引号。string的包装类是String。

null和udefined

• undefined：未定义的数据在使用时会报undefined。已经声明但未被初始化的数据默认值就是undefined
• null：null类型也只有一个值 null，即它的字面量。值undefined实际上是从值null派生来的，因此把他们定义为相等的。 alert(null ===undefined) //true。尽管这两个值相等，但它们的含义不同。
  undefined是声明了变量但未对其初始化，null则用于表示尚未存在的对象，比如无法获得dom文档中的对象

常用引用类型

五种原始类型的包装类都是引入类型

• Math类

Math对象不能用new运算符创建，如果试图这样做会给出错误。

• Date类

 <script type="text/javascript">
        let date = new Date();
        document.write(`${date.getFullYear()}年`)
        document.write(`${date.getMonth()+1}月`)
        document.write(`${date.getDate()}日`)
        document.write(`${date.getHours()}时`)
        document.write(`${date.getMinutes()}分`)
        document.write(`${date.getSeconds()}秒`)
        document.write(`${date.getMilliseconds()}毫秒`)
    script>
1
2
3
4
5
6
7
8
9
10

• Array数组

在js中数组的长度不固定和java的集合一致

    <script type="text/javascript">
        let array = new Array();
        array[0]=1;
        array[1]=2;
        array[2]=3;
        array[3]=4;
        for (let i = 0; i < array.length; i++) {
            document.write(array[i]);
        }
    script>
1
2
3
4
5
6
7
8
9
10

• Global

全局对象，不需要指定可以直接使用它的方法
isNaN():判断是否是一个数字
parseInt():把数据变成整数
parseFload():把数据变成小数

<script type="text/javascript">
        let num=55;
        alert(isNaN(num))  //false
    script>
1
2
3
4

方法定义语法详解

JavaScript的方法本质也是对象，所以如果有两个名称一样的方法，后面的一个会把前面的一个给覆盖掉

• 第一种

      <script type="text/javascript">
        /**
         * 方法的定义
         */
        function showInfo(){
            alert("hello");
        }
        /**
         * 方法的调用
         */
        showInfo();
    </script>
1
2
3
4
5
6
7
8
9
10
11
12

• 第二种

  <script type="text/javascript">
        /**
         * 方法的定义
         */
        var showInfo=function () {
            alert('hello');
        }
        /**
         * 方法的调用
         */
        showInfo();
    </script>
1
2
3
4
5
6
7
8
9
10
11
12

• 有参数的方法

方法的参数不需要指定类型，如果方法有返回值，使用return加上返回值

<script type="text/javascript">
        getSum=function (a,b) {
            return a+b;
        }
        let sum = getSum(5,6);
        alert(sum)
    </script>
1
2
3
4
5
6
7

• Js方法没有重载

JavaScript方法没有重载，如果方法名称相同，后面的方法会把前面的方法给覆盖掉(因为方法也是对象)

<script type="text/javascript">
        getNum=function (a,b) {
            return a+b;
        }
        getNum=function (a,b,c) {
            return a+b+c;
        }
        let num = getNum(5,6);
        alert(num);
    </script>
1
2
3
4
5
6
7
8
9
10

对象的创建语法

引用类型Object对象

在JavaScript中所有的对象都是从Object对象继承出来的

• 第一种创建方式

 <script type="text/javascript">
        let obj = new Object();
        obj.name='zsq';
        obj.age=25;
        alert(`${obj.name} ${obj.age}`)
    </script>
1
2
3
4
5
6

• 第二种创建方式

   <script type="text/javascript">
        let obj = {};
        obj.name='zsq';
        obj.age=25;
        alert(`${obj.name} ${obj.age}`)
    </script>0
1
2
3
4
5
6

• 第三种创建方式(以原型的方式进行创建)

 <script type="text/javascript">
        function Person(username, password) {
            this.username = username;
            this.password = password;
        }
        Person.prototype.showInfo=function () {
            alert(`${this.username} ${this.password}`)
        }
        let person = new Person('zzq','123');
        person.showInfo()
    </script>
1
2
3
4
5
6
7
8
9
10
11

文档对象模型

Dom: 文档对象模型，该技术的出现，将标记型文档中的所有内容(标签、属性、文本)都
封装成了对象。
dom的好处
目前，我们只能在页面上做一些显示的效果。不能做动态的效果，何谓动态的效果呢，比如说，我们点击一个按钮，做数据的显示和隐藏等。
这些动态效果都是在操作标签，那么最简单的操作标签，让它做一些功能就是怎么做呢？就是把它封装成对象，
怎么把它封装成对象呢，那么就是dom技术的作用，dom的作用就在于此。这样就可以将对象中封装更多的属性和行为我们就可以操作这些对象，这样就可以实现静态页面的具备动态的效果
Bom:浏览器对象，比如window

window常用方法

一般win的方法可以直接用，不需要加window

• 页面重定向

    <script type="text/javascript">
        turn = function () {
            window.location.href = 'https://www.baidu.com'
        }
    </script>
1
2
3
4
5

• 二次确认

 <script type="text/javascript">
        turn = function () {
           let b =window.confirm(`是否删除？`)
        }
    </script>
1
2
3
4
5

• 返回页面前一步 window.history.back()
• 延迟加载

    <script type="text/javascript">
        function confi(){
            window.confirm("是否删除")
        }

        function lazyLoad(){
            window.setTimeout(confi,3000)
        }
    </script>
1
2
3
4
5
6
7
8
9

• 定时调用： window.setInterval，可以做时钟(多长时间执行一次)

     <script type="text/javascript">
        let clock=null;
        excuteTime=function () {
            let date = new Date();
            document.getElementById('time').innerHTML=`${date.getFullYear()}年 ${date.getMonth() + 1} 月${date.getDate()} 日
            ${date.getHours()} 时 ${date.getMinutes()} 分 ${date.getSeconds()} 秒`
        }
        showTime=function () {
           clock= window.setInterval(excuteTime,1000)
        }
    </script>
</head>
<body>
<div id="time">

</div>
<input value="显示时间" type="button" onclick="showTime()">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 结束定时：window.clearInterval

    <script type="text/javascript">
        let clock=null;
        excuteTime=function () {
            let date = new Date();
            document.getElementById('time').innerHTML=`${date.getFullYear()}年 ${date.getMonth() + 1} 月${date.getDate()} 日
            ${date.getHours()} 时 ${date.getMinutes()} 分 ${date.getSeconds()} 秒`
        }
        showTime=function () {
           clock= window.setInterval(excuteTime,1000)
        }

        closeClock=function () {
            window.clearInterval(clock)
        }

    </script>
</head>
<body>
<div id="time">

</div>
<input value="显示时间" type="button" onclick="showTime()">
<input value="结束时间" type="button" onclick="closeClock()">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

getElementById方法获得dom

文档对象的加载顺序是从上到下的，所以我们js想要获得dom对象，一定要文档对象加载完毕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户名：<input id="username" name="username" value="zzq"><br>
密码：<input id="password" name="password" value="123">
<script>
    //根据文档对象的id来获得dom对象
    let obj=document.getElementById('username')
    alert(obj.value)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

getElementsByName获得dom(例子：全选和反选)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        checkAll=function () {
            let listOf = document.getElementsByName('fevor');
            listOf.forEach(i=>{
                if (!i.checked) {
                    i.checked=true
                }
            })
        }

        //反选
        reverseCheckAll=function () {
            let listOf = document.getElementsByName('fevor');
            listOf.forEach(i=>{
                if (i.checked) {
                    i.checked=false
                }
            })
        }
    </script>
</head>
<body>
爱好：
<input type="checkbox" name="fevor"> 打篮球
<input type="checkbox" name="fevor"> 踢足球
<input type="checkbox" name="fevor"> 打乒乓球
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseCheckAll()">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

document.getElementsByTagName(根据标签名进行选择)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        changeColor=function (color) {
            let elements = document.getElementsByTagName('body');
            for (let i = 0; i < elements.length; i++) {
                elements[i].bgColor=color;
            }
        }
    </script>
</head>
<body>
<input type="button" value="红色" onclick="changeColor('red')">
<input type="button" value="蓝色" onclick="changeColor('blue')">
<input type="button" value="黑色" onclick="changeColor('black')">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

innerText和innerHtml

给div元素添加内容使用元素属性innerText。给div元素添加html内容使用元素属性innerHtml
innerHtml，如果里面有html内容则会被浏览器解析

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        myclick=function () {
            document.getElementById('div1').innerText='aaabbbccc';
            //会把html的内容也进行解析
            document.getElementById('div2').innerHTML=`<font color="red">aaaaaabb</font>`;
        }
    </script>
</head>
<body>
<div id="div0">
    <div id="div1">abc</div>
    <div id="div2">def</div>
    <div id="div3">ghi</div>
</div>
<input type="button" value="点击" onclick="myclick()">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21