js快速入门

标签：入门 js alert length element var document 快速

前言

之前曾学习了html和css，在学js的时候懈怠了，如今大三不得不面对自己web网页做不出来的现实，所以又前来学习web。因为之前js没有怎么学，所以直接从js开始了。不过js需要html和css的基础，有没学过html和css的同学可以看我博客：

话不多说，下面就是js的内容。

概念

JavaScript是一门跨平台、面向对象的脚本语言，用来控制网页行为，能使网页可交互。（html，网页结构。css，网页表现。JavaScript，网页行为）。

JavaScript引入方式

内部脚本，将js代码定义在html页面中。在html文档中，可以在任意位置，放置任意数量的script标签，一般我们置于body标签底部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>12345</h1>
    <h2>54321</h2>
    <script>
        alert("hello js");
    </script>
</body>
</html>

外部脚本，将js代码定义在外部js文件中，然后引入到html页面中，注意，script标签不能自闭合。
html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>12345</h1>
    <h2>54321</h2>
<!--    <script>-->
<!--        alert("hello js");-->
<!--    </script>-->
    <script src="../js/demo.js"></script>
</body>
</html>

js文件：

alert("hello js2");

JavaScript基本语法

基本语法：

区分大小写
每行结尾的分号可有可无
注释 // 和 /* */
大括号代表代码块

输出语句：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>12345</h1>
    <h2>54321</h2>
    <script>
        window.alert("hello js1~"); //写入警告框

        document.write("hello js2~"); //写入html页面

        console.log("hello js3~"); //写入浏览器的控制台
    </script>
</body>
</html>

变量

<script>
        var test = 20;  //var声明变量
        alert(test);
        test = "张三"; //弱类型语言，变量可以存放不同的值
        alert(test);
        /*
            var
            作用域：全局变量
            变量可以重复定义
         */
        {
            var age = 30;
            var age = 20;
        }
        alert(age);
    //let 可以用来声明局部变量，还不可以重复定义。const声明常量。
    </script>

数据类型

js分为原始类型和引用类型，原始类型有五种：

number 数字（整数，小数，NAN）
string 字符，字符串
boolean 布尔
null 对象为空
undefined 声明的变量未初始化

运算符

<script>
        /*
            ==
                1.判断类型是否一样，如果不一样，则进行类型转换
                2.再去比较其值

            ===:全等于
                1.判断类型是否一样，如果不一样，直接返回false
                2.如果一样，再去比较其值
         */
        // var age1 = 20;
        // var age2 = "20";
        // alert(age1 == age2); //true
        // alert(age1 === age2); //false

        /*
            类型转换：
                * 其他类型转为number：
                    1.string：按照字符串字面值转换为数字，如果字面值不是数字，则转换为NaN。一般使用parseInt
                    2.boolean：true转为1，false转为0
                * 其他类型转为boolean：
                    1.number：0和NaN转换为false，其他的数字转为true
                    2.string：空字符串转为false，其他转为true
                    3.null:转为false
                    4.undefined：转为false
         */
        // var str = +"20";
        // alert(typeof str);
        // var str = "20"
        // alert(parseInt(str) + 1);
        // var flag = +true;
        // alert(flag)
        var flag = 123;
        if(flag){
            alert("转为true");
        }else {
            alert("转为false");
        }
        alert(flag)
    </script>

流程控制语句
与Java相同：

if
switch
for
while
do while

函数

<script>
        //定义方式一
        function add(a,b){
            return a+b;
        }

        var result = add(1,2);

        alert(result);

        //定义方式二
        var cheng = function (a,b){
            return a*b;
        }

        var result = cheng(2,3);

        alert(result);

        //js中，函数调用可以传递任意个数参数
        var result = cheng(5);
        alert(result);
    </script>

JavaScript常用对象

Array对象

<script>
        //定义方式一
        // var arr = new Array(1,2,3);
        // alert(arr);
        //
        // //定义方式二
        // var arr2 = [1,2,3];
        // alert(arr2);
        //
        // //访问
        // arr2[0] = 10;
        // alert(arr2);

        //特点：JavaScript中的数组相当于Java中的集合，变长变类型。

        //变长
        // var arr3 = [3,2,1];
        // arr3[10] = 10;
        // alert(arr3[10]);
        // alert(arr3[9]);
        //
        // //变类型
        // arr3[5] = "hello";
        // alert(arr3[5]);
        //
        // alert(arr3);

        //属性：length，数组中元素的个数
        // var arr4 = [1,2,3]
        // for (let i = 0; i < arr4.length; i++) {
        //     alert(arr4[i]);
        //
        // }

        //方法：
        //push：添加
        var arr5 = [1,2,3];
        // arr5.push(10);
        // alert(arr5);

        //splice；删除
        arr5.splice(0,1);
        alert(arr5);
    </script>

String对象

<script>
        //方式一
        var str1 = new String("abc");
        //方式二
        var str2 = "abc";

        //length属性
        // alert(str1.length);

        //trim() :去除字符串两端的空白字符
        var str3 = "   abc   ";
        alert(1 + str3 + 1);
        alert(1 + str3.trim() +1);
    </script>

自定义对象

<script>
        var person = {
            name:"zhangsan",
            age:23,
            eat:function (){
                alert("干饭");
            }
        }

        alert(person.name);
        alert(person.age);
        person.eat();
    </script>

BOM对象（Browser Object Model）

window

<script>
        //alert
        // window.alert("abc");
        // window.alert("bbb");

        //confirm
        // var flag = confirm("确认删除？");
        // alert(flag);
        //
        // if (flag){
        //     //删除的逻辑
        // }

        //定时器

        /*
            setTimeout(function,毫秒值)：在一定时间间隔后执行函数，只执行一次

            setInterval(function,毫秒值)：在一定时间间隔后执行函数，循环执行
         */

        /*setTimeout(function (){
            alert("ah");
        },3000);*/

        setInterval(function (){
            alert("ah");
        },2000);
    </script>

location

 <script>
        // alert("aaa");
        // location.href = "https://www.baidu.com";

        // 3s后跳转到首页
        document.write("3s后跳转到首页...")
        setTimeout(function (){
            location.href = "https://www.baidu.com";
        },3000);
    </script>

DOM对象(Document Object Model)

获取element对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="../img/OIP_C.jpg">
    <div  class = "cls">传智教育</div> <br>
    <div  class =  "cls">黑马程序员</div> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
        //1. getElementById根据id属性值获取，返回一个element对象
        // var img = document.getElementById("light");
        // alert(img);
        //2. getElementsByTagName :根据标签名称获取，返回element对象数组
        // var divs = document.getElementsByTagName("div");
        // alert(divs.length);
        // for (let i = 0; i < divs.length; i++) {
        //     alert(divs[i]);
        // }
        //3. getElementsByName :根据name属性获取值，返回element对象数组
        // var hobbys = document.getElementsByName("hobby");
        // alert(hobbys.length);
        // for (let i = 0; i < hobbys.length; i++) {
        //     alert(hobbys[i]);
        //
        // }
        //4. getElementsByClassName :根据class属性获取值，返回element对象数组
        // var clss = document.getElementsByClassName("cls");
        // for (let i = 0; i <clss.length; i++) {
        //     alert(clss[i]);
        // }

    </script>

</body>
</html>

使用element对象

 <script>
        //1. getElementById根据id属性值获取，返回一个element对象
        var img = document.getElementById("light");
        img.src = "../img/OIP_2.jpg";
        // alert(img);
        //2. getElementsByTagName :根据标签名称获取，返回element对象数组
        var divs = document.getElementsByTagName("div");
        /*
        style:设置元素css样式
        innerHTML：设置元素内容
         */

        for (let i = 0; i < divs.length; i++) {
            divs[i].style.color = "red";
            divs[i].innerHTML = "呜呜呜";
        }
        //3. getElementsByName :根据name属性获取值，返回element对象数组
        var hobbys = document.getElementsByName("hobby");

        for (let i = 0; i < hobbys.length; i++) {
            hobbys[i].checked = true;

        }
        //4. getElementsByClassName :根据class属性获取值，返回element对象数组
        // var clss = document.getElementsByClassName("cls");
        // for (let i = 0; i <clss.length; i++) {
        //     alert(clss[i]);
        // }

    </script>

事件监听

事件监听即JavaScript可以在事件被侦测到时执行代码；

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="点我" onclick="on()"><br>
    <input type="button" value="再点我" id = "btn">

    <script>
        function on(){
            alert("点点点！！！！！！");
        }

        document.getElementById("btn").onclick = function (){
            alert("点啊点啊点！！！！！！！！！！！！");
        }
    </script>
</body>
</html>

标签：入门,js,alert,length,element,var,document,快速
From： https://www.cnblogs.com/he-cheng/p/17212337.html

前言

概念