JavaScript 入门

原创已于 2024-11-29 11:39:36 修改 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-10-15 18:50:06 首次发布

JavaEE 专栏收录该内容

17 篇文章

订阅专栏

1. HTML、CSS、JavaScript 之间的关系

HTML：网页的结构（骨）

CSS：网页的表现（皮）

JavaScript：网页的行为（魂）

2. 引入方式

3种引入方式，语法如下：

引入方式	语法描述	示例
行内样式	直接嵌入到 html 元素内部	<input type="button" value="点我一下" οnclick="alert('haha')">
内部样式	定义 <script> 标签，写到 script 标签中	<script> alert("haha"); </script>
外部样式	定义 <script> 标签，通过 src 属性引入外部 js 文件	<script src="helo.js"></script>

三种样式对比：

1. 内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用

2. 行内样式，只适合写简单样式，针对某个标签生效，不能写太复杂的 js

3. 外部样式，html 和 js 实现了完全的分离，企业开发常用方式

3. 基础语法

3.1 变量

创建变量（变量定义/变量声明/变量初始化），3 种方式：

关键字	解释	示例
var	早期 JS 中声明变量的关键字，作用域在该语句的函数内	var name = 'zhangsan';
let	ES6 新增的声明变量的关键字，作用域为该语句所在的代码块内	let name = 'zhangsan';
const	声明常量用，声明后不能修改	const name = 'zhangsan';

tip:

1) JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值（动态），如：

var name = 'zhangsan';
var age = 20;

随着程序的运行，变量的类型可能会发生改变（弱类型）

var a = 10;  // 数字
a = "hello"; // 字符串

Java 是静态强类型语言，在变量声明时，需要明确定义变量的类型，如果不强制转换，类型不会发生改变

2) 变量命名规则

组成字符可以是任何字母、数字、下划线或美元符号
数字不能开头
建议使用驼峰命名

3) + 表示字符串拼接，就是把两个字符串首尾相接变成一个字符串

4) \n 表示换行

3.2 数据类型

虽然 JS 是弱数据类型的语言，但是 JS 中也存在数据类型，JS 中的数据类型分为：原始类型和引用类型，如下：

数据类型	描述
number	数字，不区分整数和小数
string	字符串类型字符串字面值需要使用引号引起来，单引号双引号均可
boolean	布尔类型，true 真，false 假
undefined	表示变量未初始化，只有唯一的值 undefined

使用 typeof 函数可以返回变量的数据类型，如下：

3.3 运算符

JavaScript 中的运算符和 Java 用法基本相同

其中比较运算符有所区别，如下：

    <script>
        var age = 20;
        var age1 = "20";
        var age2 = 20;

        console.log(age == age1); // true，只比较值
        console.log(age === age1); // false，比较值和类型
        console.log(age === age2); // true，值和类型都一样
    </script>

4. JavaScript 对象

4.1 数组

4.1.1 数组定义

创建数组有两种方式

1. 使用 new 关键字创建

// Array 的 A 要大写
var arr = new Array();

2. 使用字面量方式创建（常用）

var arr = [];
var arr2 = [1, 2, 'haha', fakse]; // 数组中保存的内容称为 “元素”

tip：JS 的数组不要求元素是相同类型

4.1.2 数组操作

读：使用下标的方式访问数组元素（从 0 开始）

增：通过下标新增，或者使用 push 进行追加元素

改：通过下标修改

删：使用 splic 方法删除元素

    <script>
        var arr = [1, 2, 'haha', false];
        // 读取数组
        console.log(arr[0]); // 1
        // 添加元素
        arr[4] = "add";
        console.log(arr[4]); // add
        console.log(arr.length); // 获取数组长度，5
        // 修改数组元素
        arr[4] = "update";
        console.log(arr[4]); // update
        // 删除数组元素
        arr.splice(4, 1); //第一个参数表示从下标为 4 的位置开始删除，第二个参数表示要删除的元素个数是 1 个
        console.log(arr[4]); // undefined 元素已经删除，如果元素不存在，结果为 undefined
        console.log(arr.length); // 4
    </script>

tip：

如果下标超出范围读取元素，则结果为 undefined

若直接给数组名赋值，那么数组中的所有元素都没了（相当于本来 arr 是一个数组，重新赋值后变成字符串了）

var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';

4.2 函数

4.2.1 语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}

// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

函数定义并不会执行函数体内容，必须调用才会执行，调用几次就会执行几次

function hello() {
    console.log("hello");
}

// 如果不调用函数，则没有执行打印语句
hello();

调用函数的时候进入函数内部执行，函数结束时回到调用位置继续执行

函数的定义和调用的先后顺序没有要求（变量必须先定义再使用）

4.2.2 关于参数个数

实参和形参之间的个数可以不匹配，但是实际开发一般要求形参和实参个数要匹配

1. 如果实参个数比形参个数多，则多出的参数不参与函数运算

sum(10, 20, 30); // 30

2. 如果实参个数比形参个数少，则此时多出来的形成那只为 undefined

sum(10); // NaN，相当于 第二个形参为 undefined

4.2.3 函数表达式

另外一种函数的定义方式

    <script>
        var add = function() {
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }
        console.log(add(10, 20)); // 30
        console.log(add(1, 2, 3, 4)); // 10
        console.log(typeof add); // function
    </script>

此时，形如 function() { } 这样的写法定义了一个匿名函数，然后将这个匿名函数用一个变量来表示

后面就可以通过这个 add 变量来调用函数了

JS 中函数可以用变量保存，也可以作为其他函数的参数或者返回值

4.3 对象

在 JS 中，字符串、数值、数组、函数都是对象

每个对象中包含若干的属性和方法（属性：事物的特征；方法：事物的行为）

1. 使用字面量创建对象（常用）

使用 { } 创建对象

var a = {}; // 创建了一个空的对象

var student = {
    name: '张三',
    hright: 175,
    weight: 170,
    sayHello: function() {
        console.log("hello");
    }
};

属性和方法使用键值对的形式来组织
键值对之间使用 , 分隔，最后一个属性后面的 , 可有可无
键和值之间使用 : 分隔
方法的值是一个匿名函数

使用对象的属性和方法：

// 1. 使用 . 成员访问运算符来访问属性 "."可以理解成 "的"
console.log(student.name);
// 2. 使用 [] 访问属性，此时属性需要加上引号
console.log(student['hright']);
// 3. 调用方法需要加上 ()
student.sayHello();

2. 使用 new Objecct 创建对象

var student = new Object(); // 和创建数组类似
student.name = "张三"
student.height = 175;
studnet['weight'] = 170;
student.sayHello = function() {
    console.log("hello");
}

console.log(student.name);
console.log(student['weight']);
student.sayHello();

tip：使用 { } 创建的对象也可以随时使用 student.name = "张三"; 这样的方式来新增属性

3. 使用构造函数创建对象

functong 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}

var obj = new 构造函数名(实参)

tip：

在构造函数内部使用 this 关键字来表示当前正在构建的对象
构造函数的函数名首字母一般是大写的
构造函数的函数名可以是名词
构造函数不需要 return
创建对象时必须使用 new 关键字

5. JQuery

5.1 引入依赖

使用 JQuery 需要先引入对应的库

在使用 JQuery CDN 时，只需要在 HTML 文档中加入如下代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

其中 src 属性指明了 JQuery 库所在的 URL，这个 URL 是 CDN（内容分发网络）服务提供商为 JQuery 库提供的一个统一资源定位符

如需其他版本，可在官网下载：JQuery

Jquery 官⽅共提供了 4 种类型的 JQuery 库

uncompressed:⾮压缩版本(易读,但是⽂件较⼤,传输速度慢)

minified: 压缩版(不易读,⽂件⼩,性能⾼,开发中推荐)

slim: 精简瘦⾝版,没有 Ajax 和⼀些特效

slim minified : slim 的压缩版

开发时，建议把 JQuery 库下载到本地，放在当前项目中，因为引入外部地址，可能会有外部地址不能访问的风险

下载方式：

通过浏览器访问上述链接
右键 -> 另存为 -> 保存到本地，放在项目中即可

5.2 JQuery 语法

JQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法：

$(selector).action()

$() 是一个函数，它是 JQuery 提供的一个全局函数，用于选择和操作 HTML 元素

selector 选择器，用来“查询”和“查找” HTML 元素

action 操作，执行对元素的操作

JQuery 的代码通常都写在 document ready 函数中

document：整个文档对象，一个页面就是一个文档对象，使用 document 表示

这是为了防止文档在完全加载（就绪）之前运行 JQuery 代码，即在文档加载完成后才可以对页面进行操作

如果在文档没有完全加载之前就运行函数，操作可能会失败

$(document).ready(dunction() {
    // JQuery functions go here
});

示例：

    <button type="button">点我消失</button>
    <script src="D:\haha\idea_code\Maven\jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $('button').click(function() {
                $(this).hide();    
            });
        });
    </script>

给按钮添加了 click 事件，点击后元素消失

简洁写法：

$(function() {
    // JQuery functions go here
});

5.3 JQuery 选择器

我们通过 JQuery 选择器来选择一些 HTML 元素，然后对元素进行操作

JQuery 选择器基于已经存在的 CSS 选择器，除此之外，还有一些自定义的选择器

JQuery 中所有的选择器都以 $ 开头

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p")	所有 <p> 元素
$("p: first")	选取第一个 <p> 元素
$("p: last")	选取最后一个 <p> 元素
$(".box")	所有 class="box" 的元素
$("#box")	id="box" 的元素
$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("ul li: first")	选取第一个 <ul> 元素的第一个 <li> 元素
$(":input")	所有 <input> 元素
$(":text")	所有 type="text" 的 <input> 元素
$(":checkbox")	所有 type="checkbox" 的 <input> 元素

5.4 JQuery 事件

JS 要构建动态页面，就需要感知到用户的行为，用户对于页面的一些操作（点击、选择、修改等）都会在浏览器中产生一个事件，被 JS 获取到，从而进行更复杂的交互操作

事件由三部分组成：

1. 事件源：哪个元素触发的

2. 事件类型：是点击、选中，还是修改

3. 事件处理程序：进一步如何处理，往往是一个回调函数

例如：某个元素的点击事件：

$("p").click(function() {
    // 动作发生后执行的代码
});

常见的事件：

事件	代码
文档就绪事件（完成加载）	$(document).ready(function)
点击事件	$(selector).click(function)
双击事件	$(selector).dblclick(function)
元素的值发⽣改变	$(selector).change(function)
⿏标悬停事件	$(selector).mouseover(function)

5.5 操作元素

5.5.1 获取/设置元素内容

三个方法：

JQuery⽅法	说明
text()	设置或返回所选元素的⽂本内容
html()	设置或返回所选元素的内容（包括 HTML 标签）
val()	设置或返回表单字段的值

有参数时，就进行元素的值设置；无参数时，就进行元素内容的获取

示例：

获取元素内容：

    <div id="test"><span>你好</span></div>
    <input type="text" value="hello">

    <script src="D:\haha\idea_code\Maven\jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function() {
            var html = $("#test").html();
            console.log("html内容为：" + html);

            var text = $("#test").text();
            console.log("文本内容为：" + text);

            var inputVal = $("input").val();
            console.log(inputVal);
        });
    </script>

设置元素内容：

    <div id="test"></div>
    <div id="test2"></div>
    <input type="text" value="">

    <script src="D:\haha\idea_code\Maven\jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#test").html('<h1>设置html</h1 > ');
            $("#test2").text('<h1>设置text</h1 > ');
            $("input").val("设置内容");
        });
    </script>

5.5.2 获取/设置元素属性

JQuery attr() 方法用于获取属性值，示例：

获取元素属性：

    <p><a href="https://www.baidu.com" id="baidu">百度</a></p>

    <script>
        $(function () {
            var href = $("p a").attr("href")
            console.log(href);
        });
    </script>

设置元素属性：

    <p><a href="https://www.baidu.com" id="baidu">百度</a></p>

    <script>
        $(function () {
            $("p a").attr("href", "youdao.com")
            console.log($("p a").attr("href"));
            
        });
    </script>

tip：

attr 只有属性名的话，返回属性的内容；既有属性名，又有值，则给该属性赋值

5.5.3 获取/返回 CSS 属性

css() 方法设置或返回被选元素的一个或多个样式属性，示例：

获取元素属性：

    <div style="font-size: 36px">我是一个文本</div>

    <script>
        $(function() {
            var fontSize = $("div").css("font-size");
            console.log(fontSize);
            
        });
    </script>

设置元素属性：

    <div style="font-size: 36px">我是一个文本</div>

    <script>
        $(function() {
            $("div").css("font-size", "24px");
            
        });
    </script>

tip：

css 参数只有 css hey，则返回样式的值；若既有 key，又有 value，则设置样式的值

5.5.4 添加元素

添加 HTML 内容

append()：在被选元素的结尾插入内容
prepend()：在被选元素的开头插入内容
after()：在被选元素之后插入内容
before()：在被选元素之前插入内容

示例：

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <img src="D:\haha\FrontEndCodeTest\HTML\rose.jpg" height="100px">

    <script>
        $(function() {
            $("ol").append("<li>append<li>")
            $("ol").prepend("<li>prepend<li>")

            $("img").before("图片前插入")
            $("img").after("图片后插入")
        })
    </script>

5.5.5 删除元素

删除元素和内容，一般使用以下两个 JQuery 方法：

remove()：删除被选元素（及其子元素）
empty()：删除被选元素的子元素

示例：

    <div id="div1">我是⼀个 div</div>
    <button>删除 div 元素</button>
    <script>
        $(function () {
            $('button').click(function () {
                $('#div1').remove();
            });
        });
    </script>

删除被选元素的子元素

    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <button>删除列表元素</button>
    <script>
        $(function () {
            $('button').click(function () {
                $('ol').empty();
            });
        });
    </script>

6. 综合案例

6.1 猜数字

预期效果：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <button id="reset">重新开始一局游戏</button><br>
    请输入要猜的数字: <input type="text" id="guessNumer"><input type="button" value="猜" id="guess"><br>
    已经猜的次数: <span id="count">0</span> <br>
    结果: <span id="result"></span>

    // 这里是我电脑上的 JQuery 本地目录，需要改成自己的
    <script src="D:\haha\idea_code\Maven\jquery-3.7.1.min.js"></script>
    <script>
        //生成随机数 1-100
        let rightNumer = Math.floor(Math.random() *100) +1;
        console.log(rightNumer);
        let count = 0;
        
        $("#guess").click(function(){
            //猜的次数
            count++;
            $("#count").text(count);

            //猜的结果
            let guessNumer = $("#guessNumer").val();
            if(guessNumer>rightNumer){
                $("#result").text("猜大了");
                $("#result").css("color", "red");
            }else if(guessNumer<rightNumer){
                $("#result").text("猜小了");
                $("#result").css("color", "red");
            }else{
                $("#result").text("猜对了");
                $("#result").css("color", "green");
            }
            
        });
        $("#reset").click(function(){
            rightNumer = Math.floor(Math.random() *100) +1;
            console.log(rightNumer);
            count = 0;
            $("#guessNumer").val("");
            $("#result").text("");
            $("#count").text(count);
        });
    </script>
</body>
</html>

6.2 留言板

预期效果：

代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;  /*水平方向居中*/
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
 
        // 给点击按钮注册点击事件
        function submit(){
            // 1. 获取到编辑框内容
           let from = $("#from").val();
           let to = $("#to").val();
           let say = $("#say").val();

           if(from=="" || to == "" || say == ""){
                alert("请检查输入内容");
                return;
           }
           
           // 2. 构造 html 元素
           let html = "<div>"+ from +" 对 "+ to +" 说: "+say+"</div>";

           // 3. 把构造好的元素添加进去
           $(".container").append(html);
           // 4. 同时清理之前输入框的内容
           $(":text").val("");
            
        }
        
    </script>
</body>

</html>