当前位置： 首页 > news >正文

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

news 2025/9/24 7:34:55

目录

一、JavaScript

（一）介绍：

（二）引入：

1、方法一：内部脚本，将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，编写如下代码： 

<!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文件，具体代码如下：

<!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()写入浏览器控制台

案例展示：

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

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

<!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中用于变量声明的关键字，全局变量
letECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效
const声明常量的，常量一旦声明，其值不能修改

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

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

案例展示：

<!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运算符 可以返回变量的数据类型。

案例展示：

<!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); //numberalert(typeof 3.14); //numberalert(typeof "A"); //stringalert(typeof 'Hello');//stringalert(typeof true); //booleanalert(typeof false);//booleanalert(typeof null); //object ?var a;alert(typeof a); //undefined
</script>
</html>

4、运算符：

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

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

  • ==：只比较值是否相等，不区分数据类型
  • ===：不光比较值，还要比较类型，如果类型不一致，直接返回false

案例展示：

<!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保持一致。

案例展示：

<!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没有变量接受，但是不影响函数的正常调用。

http://www.dtcms.com/a/398398.html

相关文章：

  • 有手机网站了还要微网站吗所有的网站都要用htmlu做吗
  • 面向对象设计：构建可维护、可扩展的软件系统
  • 52.haproxy负载均衡
  • 什么是“智能体”？
  • 负载均衡式在线OJ项目复盘
  • 【Golang】数据设计模式
  • 新建免费网站软件关键词排名
  • 小迪安全v2023学习笔记（八十六讲）—— FridaHOOK证书提取SSL双向校验绕过
  • 律师事务所网站方案网站 建设 初期规划
  • 舒适化诊疗的关键支持：伟荣局部麻醉器械使用体验
  • Kanass入门到实战(1) - 安装教程
  • 【Linux系统】深入理解线程同步，实现生产消费模型
  • 【2025-系统规划与管理师】第六章：云资源规划
  • JDK17 新特性梳理
  • ZooKeeper源码分析与实战-模块一：基础篇
  • 网站建设 优势网站开发需求报告
  • jikuaiarc项目构建,参考arc，把arc一直到antlr4，生成g4文件
  • 白话讲讲GenAI、LLM、Agent、RAG、LangChain
  • （25.09）使用Livox-mid-360录制数据并运行Fast-lio2命令
  • 【图文】Codex接入Kimi K2/GLM-4.5 环境配置指南 (Windows/macOS/Ubuntu)
  • 异步 vs 同步：JavaScript中的速度与激情
  • Django模型与数据表的映射方式详解：不止Code First与Database First
  • LangChain4J-(7)-Function Calling
  • C程序设计-01程序设计和C语言
  • 为何上不了建设银行网站网络营销工程师前景
  • 设计模式的几个准则
  • python+nodejs+springboot在线车辆租赁信息管理信息可视化系统
  • 计算机毕业设计 基于Python的音乐推荐系统 Python 大数据毕业设计 Hadoop毕业设计选题【附源码+文档报告+安装调试】
  • 《人机分工重塑开发：遗留系统重构的AI实践指南》
  • 从0死磕全栈第十天：nest.js集成prisma完成CRUD