【Web前端|第一篇】HTML、CSS与JavaScript

不宕机的小马达2025-09-24 21:31

目录

一、JavaScript

（一）介绍：

（二）引入：

1、方法一：内部脚本，将JS代码定义在HTML页面中

[2、方式二：外部脚本， 将JS代码定义在外部 JS文件中，然后引入到 HTML页面中](#2、方式二：外部脚本， 将JS代码定义在外部 JS文件中，然后引入到 HTML页面中)

（三）基础语法：

1、语法：

2、变量：

3、类型：

4、运算符：

5、语句：

6、函数：

html与css主要是标签的使用，可以根据下面的文档练习各个标签的使用，这里不详细介绍，主要是JavaScript的笔记。

补充：VSCode运行html文件：

1、下载插件 Open Browser Preview：

2、写好html文件后，右击页面空白处，选择open In Default Broeser默认浏览器是火狐，如果没有就选择下面的other，可以用以下的浏览器：

我这里用的是谷歌，也就是第一个，谷歌右击选择检查可以找到控制台，快捷键F12

一、JavaScript

HTML完成了架子，CSS做了美化，但是网页是死的，我们需要为其注入灵魂，接下来我们学习JavaScript，这门语言会让我们的页面能够和用户进行交互。

（一）介绍：

JavaScript**（简称JS） 是一种跨平台、功能强大、广泛应用的面向对象脚本语言**。它具有动态性、强大的客户端交互能力、广泛的应用领域、丰富的生态系统等特点。JavaScript的发展使得网页和应用程序更加交互和动态，**是现代Web开发的核心技术之一**。
通过代码/js****效果演示提供资料进行效果演示，通过浏览器打开，我们点击一个按钮，页面的样子发生了变化，所以JS可以让我们的页面更加的智能，让页面和用户进行交互。

JavaScript 和Java是完全不同的语言，其在1995年由Netscape(网景)的Brendan Eich设计，最初命名为LiveScript，后来Netscape在与Sun合作之后，为了营销考虑将其改名为JavaScript。

JavaScript最初受Java启发而开始设计的，目的之一就是**"看上去像Java"**，因此语法上有类似之处，一些名称和命名规范也借自Java，但JavaScript的主要设计原则源自Self和Scheme。

JavaScript的标准是ECMAScript。截至2012年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript 2015，但通常被称为ECMAScript 6或者ES2015。

ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言ECMAScript，使得这种语言得到广泛应用。

ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。

（二）引入：

1、方法一：内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script> ，一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<script>

alert("Hello JavaScript")

</script>

2、方式二：外部脚本， 将JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签

引入外部js的<script>标签，必须是双标签，不可以自闭合
案例： html文件中

<script src="js/demo.js"></script>

注意：demo.js中只有js代码，没有<script>标签

接下来，我们通过VS Code来编写代码，演示html中2种引入js的方式

第一步：在VS Code中创建名为 01-JS引入方式.html 的文件

第二步：按照上述第一种内部脚本的方式引入js，编写如下代码：

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, initialscale=1.0">
    <title>JS-引入方式</title>
<!-- 内部脚本 -->
    <script>
        alert('Hello JS');
    </script>
</head>
<body>
</body>
</html>

第三步：浏览器打开效果如图所示：

第四步：接下来演示外部脚本，注释掉内部脚本，然后在css目录同级创建js目录，然后创建一个名为demo.js的文件：

第五步：在demo.js中编写内容如下：

alert ( 'Hello JS2' );

第六步：注释掉之前的内部脚本代码，添加<script>标签来引入外部demo.js文件，具体代码如下：

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, initialscale=1.0">
    <title>JS-引入方式</title>
<!-- 内部脚本 -->
<!-- <script>
    alert('Hello JS');
</script> -->
<!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</head>
<body>
</body>
</html>

第七步：浏览器刷新效果如图：

（三）基础语法：

1、语法：

JS的书写语法，语法规则如下：

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无，建议加上

  • 大括号表示代码块

  • 注释：

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

**输出形式：**JS中存在3种常见输出语句

|------------------|------------|
| api | 描述 |
| window.alert() | 警告框 |
| document.write() | 在HTML 输出内容 |
| console.log() | 写入浏览器控制台 |

案例展示：

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, initialscale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
</body>
<script>
    /* alert("JS"); */
    //方式一: 弹出警告框
    window.alert("hello js");
</script>
</html>
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, initialscale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
</body>
<script>
    /* alert("JS"); */
    //方式一: 弹出警告框
    // window.alert("hello js");
    //方式二: 写入html页面中
    document.write("我是页面中的输出");
</script>
</html>
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, initialscale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
</body>
<script>
    /* alert("JS"); */
    //方式一: 弹出警告框
    // window.alert("hello js");
    // //方式二: 写入html页面中
    // document.write("hello js");
    //方式三: 控制台输出
    console.log("我是终端里的输出");
</script>
</html>

2、变量：

JS 主要通过如下 3 个关键字来声明变量：

|-------------|----------------------------------------------------------|
| 关键****字 | 解释 |
| var | 早期ECMAScript5中用于变量声明的关键字，全局变量 |
| let | ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效 |
| const | 声明常量的，常量一旦声明，其值不能修改 |

在JS中声明变量还需要注意如下几点：

  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值
  • 变量名需要遵循如下规则：
    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    • 数字不能开头
    • 建议使用驼峰命名

案例展示：

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, initialscale=1.0">
    <title>JS-基础语法</title>
</head>
<body>
</body>
<script>
    //var定义变量
    var a = 10;
    a = "张三";
    alert(a);

    //特点1: 作用域为全局
    {
        var x = 1;
    }
    alert(x);
    //正常运行

    //特点2：var关键字声明的变量可以重复定义
    {
        var x = 1;
        var x = "A";
    }
    alert(x);
    //正常运行

    //let : 局部变量 ; 不能重复定义
    {
        let x = 1;
    }
    alert(x);

    //const: 常量,其值不可以修改
    const pi = 3.14;
    pi = 3.15;
    alert(pi);
</script>

3、类型：

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

具体如下：

注意：使用 typeof运算符 可以返回变量的数据类型。

案例展示：

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, initialscale=1.0">
    <title>JS-数据类型</title>
</head>
<body>
</body>
<script>
    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14); //number
    alert(typeof "A"); //string
    alert(typeof 'Hello');//string
    alert(typeof true); //boolean
    alert(typeof false);//boolean
    alert(typeof null); //object ?
    var a;
    alert(typeof a); //undefined
</script>
</html>

4、运算符：

JS中的运算规则绝大多数还是和java中一致的，具体运算符如下：

在JS中，绝大多数的运算规则和Java中是保持一致的，但是JS中的==和===是有区别的

  • ==：只比较值是否相等，不区分数据类型

  • ===：不光比较值，还要比较类型，如果类型不一致，直接返回false

案例展示：

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, initialscale=1.0">
    <title>JS-运算符</title>
</head>
<body>
</body>
<script>
    var age = 20;
    var _age = "20";
    var $age = 20;
    alert(age == _age); //true 只比较值
    alert(age === _age); //false 类型不一样
    alert(age === $age); //true 类型一样，值一样
</script>
</html>

类型转换：
在JS中虽然不区分数据类型，但是涉及到数值计算时，需要进行类型转换。

JS中可通过 parseInt()函数 来进行将其他类型转换成数值类型。

// 类型转换 - 其他类型转为数字

alert(parseInt("12")); //12

alert(parseInt("12A45")); //12

alert(parseInt("A45"));//NaN (not a number)

此外，在JS中其他类型转换为boolean类型时： 0、null、undefined、""、NaN 自动转换为false，其他情况转换为true

if(0){ //false

alert("0 转换为false");

}//不会弹出警告框

5、语句：

流程控制语句if、switch、for等和Java保持一致。

案例展示：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <title>06-JS语句</title>
</head>
<body>
    <div id="did" style="color: blue;font-size: 20px;">
        Hello World
    </div>
    <div>
        您喜欢的水果：<input id="myInput" type="text" value="Banana">
    </div>
</body>
<script>
    //if语句
    var time = new Date().getHours();
    if (time < 9) {
        //修改标签值
        document.getElementById("did").innerHTML = "Good Morning";
    }
    // 添加分割线
    document.write("<hr>");
    // switch语句
    var text;
    var fruits = document.getElementById("myInput").value;
    switch(fruits) {
        case "Banana":
            text = "Banana is good!";
            break;
        case "Orange":
            text = "I am not a fan of orange.";
            break;
        case "Apple":
            text = "How you like them apples?";
            break;
        default:
            text = "I have never heard of that fruit...";
    }
    alert(text);
    // for循环
    var text = "";
    var i;
    for (i = 0; i < 5; i++) {
        text += "The number is " + i + "<br>";
    }
    document.write(text);
    // 添加分割线
    document.write("<hr>");
    // while循环
    var text = "";
    var i = 10;
    while (i > 5) {
        text += "<br>The number is " + i;
        i--;
    }
    document.write(text);
</script>
</html>

6、函数：

在Java中我们为了提高代码的复用性，可以定义方法。同样，在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。

第一种定义格式如下：

function 函数名(参数1,参数2..){

要执行的代码

}

注意：

  • 形式参数不需要声明类型
    • 原因：JavaScript是弱数据类型的语言，不管什么类型都是let或者var去声明，加上没有意义
  • 返回值也不需要声明类型，直接return即可

案例展示：

<!-- 函数的定义与使用-->

<script>

function add(a,b){

return a + b;

}

let result = add(10,20);

alert(result);

</script>

第二种定义格式如下：

var functionName = function (参数1,参数2..){

//要执行的代码

}

案例展示：

<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>

注意：JS函数调用可以传递任意个数的参数！

我们在调用add函数时，再添加2个参数，修改代码如下：

var result = add(10,20,30,40);

浏览器打开，发现没有错误，依然弹出30！

原因：在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。 上述案例，10传递给了变量a，20传递给了变量b，而30和40没有变量接受，但是不影响函数的正常调用。

相关推荐
小红帽6152 小时前
HTML,CSS,JS三者的功能及联系
javascript·css·html
路光.2 小时前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
一点一木2 小时前
⚡ GitHub 热榜速报 | 2025 年 09 月 第 3 周
前端·人工智能·github
GISer_Jing3 小时前
携程HR面（准备）
前端·javascript·面试
Larry_Yanan3 小时前
QML学习笔记（五）QML新手入门其三：使用Row和Colunm进行简单布局
前端·笔记·qt·学习·ui
Nicholas683 小时前
flutter视频播放器video_player_avfoundation之FVPVideoPlayerPlugin(一)
前端
Ting_橘子3 小时前
Ajax&Json
前端·ajax·json
2501_916013743 小时前
Web 抓包全指南 Web抓包工具、浏览器抓包方法、HTTPS 解密
前端·网络协议·ios·小程序·https·uni-app·iphone
海涛高软4 小时前
QT 两种库写法 LIBS += .a和LIBS += -L -l
前端·javascript·qt
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点03Spec-Kit 使用指南0446个Nano-banana 精选提示词，持续更新中05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题08KGG转MP3工具|非KGM文件|解密音频092025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）10Linux下V2Ray安装配置指南