前端入门--JS

 2025/01/13 

JS是一种解释型语言不需要编译直接嵌入或者外部引用用以实现网页的动态行为和交互功能

特点

增加用户交互动态更新内容处理时间(点击悬停等) 以及与服务器进行数据交互

可以在网页加载后动态修改html和css 相应用户操作

丰富API 提供对DOM文档对象模型的操作事件处理定时器 AJAX请求等功能

引入方式

外部定引入js

alert("hello world")

-----------------------

<!DOCTYPE html>
<html>
    <head>
        <title>外部js</title>
    </head>
    <body>
        <h1>标题1</h1>
        <p>页面加载的时候显示一条信息</p>
        <script src="script.js"></script>
    </body>
</html>

内部定义js

用于调试测试

<!DOCTYPE html>
<html>
    <head>
        <title>内部js</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>点击按钮显示消息</p>
        <button type="button" onclick="disPlayMessage()">点击这里</button>
    <script>
        function disPlayMessage(){
            alert("Hello World!");
        }
    </script>
    </body>
</html>

变量

通过var let和const进行声明

1.使用var声明的变量可以重新赋值和重新声明
var x=10;
x = 20;
var x=30;

2.使用let声明可以重新赋值无法重新声明
let y = 10;
y = 20;

3.使用const声明的变量是常量不能重新赋值和声明
const z = 10;

变量

<!DOCTYPE html>
<html>
    <head>
        <title>js变量</title>
    </head>
    <body>
        <p id="varExample"></p>
        <p id="letExample"></p>
        <p id="constExample"></p>
    </body>
    <script>
        //声明变量
        var varVariable = "123";
        let letVariable = "456";
        const constVariable = "789";

        //打印变量在网页上,调用document方法
        document.getElementById("varExample").innerHTML = varVariable;
        document.getElementById("letExample").innerHTML = letVariable;
        document.getElementById("constExample").innerHTML = constVariable;
        
        //通过console方法 打印在控制台,可以调试中使用
        console.log(varVariable); 
        
    </script>
</html>

数据类型

数字
字符串””
布尔类型
空值null
已定义未赋值undefined

引用类型:
对象类型
数组等

数据类型

<!DOCTYPE html>
<html>
    <head>
        <title>js数据类型</title>
    </head>
    <body>
        <h1>js数据类型</h1>
        <p id="stringExample"></p>
        <p id="numberExample"></p>
        <p id="booleanExample"></p>
        <p id="nullExample"></p>
        <p id="undefinedExample"></p>
        <p id="objectExample"></p>
        <p id="arrayExample"></p>
        <p id="functionExample"></p>
        <script>
            let num = 18;
            console.log("number:",num,typeof num);
            document.getElementById('numberExample').textContent = "Number:" + num;
        
            let str = "Hello World";
            console.log("string:",str,typeof str);
            document.getElementById('stringExample').textContent = "String:" + str;

            let bool = true;
            console.log("boolean:",bool,typeof bool);
            document.getElementById('booleanExample').textContent = "Boolean:" + bool;

            let emptyvar = null;
            console.log("null:",emptyvar,typeof emptyvar);
            document.getElementById('nullExample').textContent = "Null:" + emptyvar;

            let und = undefined;
            console.log("undefined:",und,typeof und);
            document.getElementById('undefinedExample').textContent = "Undefined:" + und;

            //对象类型变量定义
            let person={
                name: 'wangsheng',
                age: 25
            }
            console.log('objectdict:',person,typeof person);
            document.getElementById('objectExample').textContent = "Object:" + JSON.stringify(person);
            
            //数组对象
            let numbers=[1,2,3,4,5]
            console.log('objaray:',numbers,typeof numbers);
            document.getElementById('arrayExample').textContent = "Array:" + JSON.stringify(numbers);

            //函数类型变量定义
            function add(a,b){
                return a+b;
            }
            console.log('function:',add,typeof add);
            document.getElementById('functionExample').textContent = "Function:" + add(1,2);
        </script>
    </body>
</html>

运算符

let a = 10;
let b = 20;

算数运算
let sum = a + b

比较运算
let isEqual = (a == b);

逻辑运算
let andCondtion = ( a > 5 && b < 25);

控制结构

<!DOCTYPE html>
<html>
    <body>
        <script>
            //for
            for (var i = 0; i < 5; i++) {
                console.log("for i=" + i);
            }
            let j = 0;

            //while
            while (j < 10) {
                console.log("while j=" + j);
                j++;
            }

            //if else
            let num = -5
            if (num > 0) {
                console.log("数字num是正数");
            }
            else if( num < 0) {
                console.log("数字num是负数");
            }
            else {
                console.log("数字num是0");
            }

            //switch
            switch (num) {
                case 1:
                    console.log("数字num是1");
                    break;
                case 2:
                    console.log("数字num是2");
                    break;
                case 3:
                    console.log("数字num是3");
                    break;
                default:
                    console.log("数字num不是1、2、3");
            }
        </script>
    </body>
</html>

函数

<!DOCTYPE html>
<html>
    <body>
        <script>
            function greet(name) {
                return "Hello" + name + "!"
            }
            let greeting = greet("wangsheng")
            console.log(greeting)

            function add(a, b) {
                return a + b
            }
            let sum = add(1, 2)
            console.log(sum)
        </script>
    </body>
</html>