JavaScript基础

Posted 2021-12-01 qianyyue

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础相关的知识，希望对你有一定的参考价值。

一、概述

html中的脚本必须位于<script>与</script>标签之间，脚本可以被放在HTML页面的<body>和<head>中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript的使用</title>
        <script>
            alert("hello world")
        </script>
    </head>
    <body>    
    </body>
</html>

2、<script>标签

说明：type的默认值是text/javascript可以不写，不写也是这个值

3、注释

单行注释：//

多行注释：/* 注释内容 */

4、外部的JavaScript

第一步：新建文件myscript.js

alert("My first Javascript");

第二步：引入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部的JavaScript</title>
        <script src="myscript.js"></script>
    </head>
    <body>    
    </body>
</html>

二、基本语法

1、数据类型

（1）字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）括起来

（2）数值型：无需引号

（3）布尔值（真/假）：true/false是JS里的特殊关键字，无需引号

（4）undefined型（表示变量没有值的情况）

注意：（1）变量声明后，可以再次声明

（2）JavaScript拥有动态类型，相同的变量可以用作不同的类型

（3）通过控制台也可以打印信息（console）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            var str1 = "hello";
            var str2 = ‘hello‘;
            console.log(str1)
            
            var x = 2;
            var y = 3.14;
            
            var b = true;
            b = false;
            
            var name;
            alert(name);
            
            var name = "jack";
            name = 6;
            console.log(name);    
        </script>
    </head>
    <body>    
    </body>
</html>

2、typeof运算符：检查数据类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            var str1 = "hello";
            console.log(typeof str1)
            
            var x = 2;
            console.log(typeof x)
            
            x= true;
            console.log(typeof x)
            
            x=undefined;
            console.log(typeof x)
            
            var y;
            console.log(typeof y)
        </script>
    </head>
    <body>    
    </body>
</html>

3、函数：方法=函数=function，可以多次调用

（1）函数调用位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            alert("页面一加载出来就调用函数");
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="alert(‘点击时调用‘)"/>
    </body>
</html>

（2）定义自己的函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function add(){
                var x = 1;
                var y = 2;
                console.log(x + y);
            }
            add();
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="add()"/>
    </body>
</html>

（3）带参数的函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function add(x,y){
                console.log(x + y);
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="add(333,555)"/>
    </body>
</html>

（4）使用return获取函数的返回值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function add(x,y){
                return x + y;
            }
            function test(){
                var z =add(2,5);
                z = z + 2;
                console.log(z);
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

4、运算符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                /*
                 1、算数运算符
                 + — * / % ++ --
                 */
                var x = 1;
                var k = x++;
                console.log(k + "," + x);
                
                x = 1;
                k = ++x;
                console.log(k + "," + x);
                
                var z = "jack" + "tom";
                console.log(z);
                
                var m = 5 + 6;
                var n = 5 + "6";
                console.log(m + "," + n);
                
                /*
                 2、赋值运算符
                 = +=
                 */
                var i = 1; 
                i += 3;
                console.log(i);
                
                /*
                 3、比较运算符
                 == === ！= >= <=
                 ==：比较的是变量对应的值
                 ===：值和类型必须全部相同（如果比较的值包含非数值，会将其转换为number，然后再比较
                 ）*/
                var a = 123;
                var b = 123;
                console.log(a == b);
                console.log(a === b);
                
                a = "123";
                console.log(a == b);
                console.log(a === b);
                
                console.log(typeof a);
                console.log(typeof b);
                
                /*
                 4、逻辑运算符，结果都是布尔类型，true，false
                 &&与   ||或   !非
                 */
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

5、流程控制

（1）分支结构：if语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var score = 59;
                if(score >= 80){
                    console.log("优秀");    
                }else if (score >= 60){
                    console.log("及格");
                }else{
                    console.log("不及格")
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（2）分支结构：switch语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var t = 2;
                switch(t){
                    case 1:
                    console.log("one");
                    break;
                    case 2:
                    console.log("two");
                    break;
                    case 3:
                    console.log("three");
                    break;
                    default:
                    console.log("other");
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（3）循环语句：for

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                for (var i = 1;i <=3;i++) {
                    console.log(i)
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（4）循环语句：while

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var i = 1;
                while(i <= 5){
                    console.log(i);
                    i++;
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（5）循环语句：do while

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var i = 1;
                do{
                    console.log(i);
                    i++;
                }while(i <=5);
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（6）流程控制语句：break

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                for (var i = 1;i <=6;i++) {
                    if(i == 3){
                        break;
                    }
                    console.log(i);
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（7）流程控制语句：continue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                for (var i = 1;i <=6;i++) {
                    if(i == 3){
                        continue;
                    }
                    console.log(i);
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

6、JS对象类型

（1）数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                //数组定义方式一：数组容量没有先定义好
                var arr = new Array();
                arr[0] = "aa";
                arr[1] = "bb";
                arr[2] = "cc";
                //数组定义方式二：控制数组的容量
                var arr2 = new Array(2);
                arr2[0] = "ee";
                arr2[1] = 12;
                //数组定义方式三
                var arr3 = new Array("a",123,true);
                //数组定义方式四(此种方式比较常用)
                var arr4 = [12,45,"ww"]
                console.log(arr4);
                //获取数组容量
                console.log(arr4.length);
                //数组元素的遍历
                for (var i = 0;i < arr4.length;i++) {
                    console.log(i);
                }
                //获取数组的类型：object
                console.log(typeof arr4);
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（2）自定义对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var person = new Object();
                person.name = "jack";
                person.age = 18;
                person.show = function(){
                    console.log(person.name + "," + person.age)
                }
                person.show()
                console.log(typeof person);
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

三、DOM（Document Object Model）文档对象模型

1、查找元素：通过JavaScript的HTML DOM对象，可访问HTML文档的所有元素

（1）通过id查找HTML元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var p = document.getElementById("p2");
                alert(p.innerHTML)；
            }
        </script>
    </head>
    <body>
        <p id="p1">hello world</p>
        <p id="p2">hi javascript</p>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（2）通过标签名查找HTML元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var ps = document.getElementsByTagName("p");
                var p = ps[0];
                alert(p.innerHTML)；
            }
        </script>
    </head>
    <body>
        <p id="p1">hello world</p>
        <p id="p2">hi javascript</p>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（3）通过类名查找HTML元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var ps = document.getElementsByClassName("test");
                var p = ps[1];
                alert(p.innerHTML);
            }
        </script>
    </head>
    <body>
        <p class="test">hello world</p>
        <p class="test">hi javascript</p>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

2、改变HTML

（1）改变HTML输出流：JavaScript能够创建动态的HTML内容，document.write()可用于直接向HTML输出流写内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                document.write("***********");
            }
        </script>
    </head>
    <body>
        <p class="test">hello world</p>
        <p class="test">hi javascript</p>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（2）改变HTML内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var p = document.getElementById("p1");
                p.innerHTML = "你好";
            }
        </script>
    </head>
    <body>
        <p id="p1">hello world</p>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（3）改变HTML属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var i = document.getElementById("i1");
                i.src = "baijuyi.jpg";
            }
        </script>
    </head>
    <body>
        <img id="i1" src="libai.jpg" width="100px" height="100px"/>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

3、改变CSS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var i = document.getElementById("p1");
                i.style.color = "blue";
                i.style.fontSize = "100px";
            } 
        </script>
    </head>
    <body>
        <p id="p1" style="color: red; font-size: 50px;">hello world</p>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

4、事件

（1）onclick：所有的页面元素都可以被点击

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var i = document.getElementById("p1");
                i.style.color = "blue";
            } 
        </script>
    </head>
    <body>
        <p id="p1" style="color: red;" onclick="test()">hello world</p>
        <input type="button" value="点击" onclick="test()"/>
    </body>
</html>

（2）onchange：当鼠标离开输入字段并且字段内容发生改变时，会触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                alert("hello");
            } 
        </script>
    </head>
    <body>
        <input type="text" onchange="test()"/>
    </body>
</html>

5、form表单验证

（1）onsubmit = "return true" 才可以提交，onsubmit = "return false" 不可以提交

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                alert("hello");
            } 
        </script>
    </head>
    <body>
        <form action="aaa" onsubmit="return false">
            用户名：<input type="test" id="u1" value="admin" /><br /><br />
            密码：<input type="password" id="p1" value="123456" /><br /><br />
        </form>
        <input type="submit" value="提交"/>
    </body>
</html>

（2）通过调用方式让表单提交

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                return true;
            } 
        </script>
    </head>
    <body>
        <form action="aaa" onsubmit="return test()">
            用户名：<input type="test" id="u1" value="admin" /><br /><br />
            密码：<input type="password" id="p1" value="123456" /><br /><br />
        </form>
        <input type="submit" value="提交"/>
    </body>
</html>

（3）加上验证逻辑

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function test(){
                var u = document.getElementById("u1");
                var p = document.getElementById("p1");
                var username = u.value;
                var password = p.value;
                console.log(username + "," + password);
                if(username == "admin" && password == "123456"){
                    return true;
                }else{
                    alert("用户名或密码错误");
                    return false;
                }
            } 
        </script>
    </head>
    <body>
        <form action="aaa" onsubmit="return test()">
            用户名：<input type="test" id="u1" value="admin" /><br /><br />
            密码：<input type="password" id="p1" value="123456" /><br /><br />
        </form>
        <input type="submit" value="提交"/>
    </body>
</html>

以上是关于JavaScript基础的主要内容，如果未能解决你的问题，请参考以下文章

30秒就能看懂的JavaScript 代码片段

Yarn: 一个新的JavaScript模块管理器

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

javascript 代码片段