JavaScript详解_2.简单介绍一下javascript。-CSDN博客

本文链接：https://blog.csdn.net/m0_52734332/article/details/136309281

1.什么是JavaScript？

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

2.快速入门

1.引入javascript

内部标签

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

</body>
</html>

外部引入

2.流程控制台

    <script>
        //变量
        var number = 1;

        //流程控制
        if(number>30 && number < 80){
            alert("30-80");
        }else if (number > 80){
            alert("number>80");
        }else {
            alert("other");
        }
        
    </script>

3.数据类型

js不区分小数和整数，Number

123         整数123
123.1         浮点数123.1
1.123e3        科学计数法
-99 负数
NaN        not a number
Infinity         表示无限大

字符串

“abc” 'abc'

布尔类型

true flase

逻辑运算符

&&        两个都为真，结果为真
||        一个为真，结果为真
！        真即假，假即真

比较运算符

比较运算符！！！！重要！
==        等于（类型不一样，值一样，也会判断为true)
===        绝对等于（类型一样，值一样，结果true)

这是一个缺陷，坚持不要使用==比较
须知：
NaN===NaN,这个与所有的数值都不相等，包括自己只能通过isNaN(NaN)来判断这个数是否是NaN

null和undefined
null空
undefined未定义

数组

Java的数值必须列相同类型的对象~，JS中不需要这样！
var arr = [1,2,3,4,5,'hello',null,true];
对象

对象是大括号，数组是中括号~~
每个属性之间使用逗号隔开，最后一个不需要添加
//Person person = new Person(1,2,3,4,5);
var person ={
name:"qinjiang",
age:3,
tags:['js','java','web','...']
}
取对象的值
person.name
>"qinjiang"
person.age
>3

提示：IEDA需要设置支持ES6语法
'use strict‘;严格检查模式，预防javaScript的随意性导致产生的问题
必须写javaScript的第一行！
局部变量建议都使用Let去定义~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

/*提示：IEDA需要设置支持ES6语法
'use strict';严格检查模式，预防javaScript的随意性导致产生的问题.
必须写javaScript的第一行！
局部变量建议都使用Let去定义~ 
*/
    <script>
        "use strict";
        let i = 1;
        console.log(i);
    </script>
</head>
<body>

</body>
</html>

3.字符串

1.正常字符串我们使用单引号或者双引号包裹

2.注意转义字符 \

\'
\n
\t
\u4e2d  \u####
\x41

3.多行字符串编写

//tab 上边的连接符
var msg =
`
hello
world
Hi
this is LiLi
`

4.模板字符串

5.字符串长度

str.length

6.字符串的可变性：不可变

7字符串的大小写转换

8.substring()

9.trim去除字符串左右两边的空格

4.数组

1.array可以包含任何元素类型

var name = [1,2,3,4,5];
a[0];
a[0]=1;

2.长度

arr.length;

注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

3.方法

var arr = [1,2,3,4,5,6]

>undefined
1按照值去查询索引
arr.indexOf(3)
>2
2截取元素
arr.slice(2)
>(4) [3, 4, 5, 6]
3压入到尾部元素
arr.push()
4弹出尾部元素
arr.pop()
5unshift(),shift()头部
arr.unshift()
压入到头部
arr.shift()
弹出头部的一个元素

6.排序sort()

arr.sort();

7.反转reverse();

8.concat()拼贴数组，但是没有修改数组

concat并没有修改数组，只是会返回一个新的数组

9.连接符join

打印拼接数组，使用特定的字符串连接

10.多维数组

11.forEach遍历数组中有值的元素

es6箭头函数简化

12.splice删除元素

5. 对象

自定义对象

    <script>
        var user = {
            name:"tom",
            age:20,
            gender:"女",
            // eat:function (){
            //     alert("用膳~");

            //简化后的
            eat(){
                alert("用膳@")
            }

        };

        user.eat();

        alert(user.age);
    </script>

6.调用函数

    <script>
        // 定义函数-1
        function add (a,b){
            return a+b;
        }

        // 定义函数-2
        var add = function (a,b){
            return a+b;
        }
        
        // 调用函数
        var result = add(10,20);
        alert(result);
    </script>

7，JSON-介绍

概念：JavaScript Object Notation,JavaScripti对象标记法。
JSON是通过JavaScript对象标记法书写的文本。
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

1 定义JSON

    <script>
        //定义JSON
        var jsonstr = '{"name":"Tom","age":18}';
        alert(jsonstr.name);

        //将JSON字符串转为JS对象
        var jsO = JSON.parse(jsonstr);
        alert(jsO.name);
        
        //将JSON对象重新转化成字符串的格式
        alert(JSON.stringify(jsO));
    </script>

8.BOM

1.window

  <script>

    window.alert("hello bom");
    alert("hello Bom window");


    //显示一段消息，点击确认或者取消按钮
    //确认是true，取消返回flase
    var re = confirm("你确定要删除此文件吗");
    alert(re);

    //在指定周期内反复调用某一函数
    var i = 1;
    setInterval(function (){
        i++
      console.log("执行了本次函数"+i+"次")
    },2000)

    //延迟多少秒执行函数，只执行一次
    setTimeout(function (){
        alert("js")
    },3000)


  </script>

2.Location

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

9.DOM

1.Document

<script>

    //根据ID属性值获取元素，返回单个的Element
    var  img= document.getElementById('h1');
    alert(img);

    //根据标签名字获取，返回Element对象数组
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }
    //根据name属性获取，返回Element对象数组
    var hobbys = document.getElementsByName('hobby');
    for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);
    }

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

    
    var clss = document.getElementsByClassName('cls');
    var dirst = clss[0];
    dirst.innerHTML = "传智教育666";

</script>

10.事件监听

1.事件绑定

绑定的两种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<input type="button" id="btn1" value="事件绑定一" onclick="on()">
<input type="button" id="btn2" value="事件绑定二">
</body>

<script>
    //方式一
    function on(){
        alert("按钮一被点击");
    }

    //方式二
    document.getElementById('btn2').onclick = function (){
        alert("按钮二被点击");
    }

</script>
</html>

常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-常见事件</title>
</head>

<body onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>
</html>