前端三剑客入门(HTML+CSS+JS)—— JavaScript篇

原创 已于 2025-08-06 18:41:19 修改 · 1.2k 阅读 · 13 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
于 2025-08-06 18:41:01 首次发布

一、前言

本文着重于对上述技术的了解，并非深入学习前端，更适合后端开发人员作为学习JavaWeb的一个前置了解，在这里各种API和标签都略写，主要讲解最常见的API和标签，其余的API可以使用AI或者其他的资料库自行查询。

资料库这里推荐使用w3school 在线教程。

二、JavaScript

1.引入方式

JavaScript的标签是<script> </script>

将JS引入HTML有两种方法：

1.内部引入：放任何位置都可以 但是一般写在body后面，让用户先看内容（HTML）后看脚本

2.外部引入：引入.js文件

两种方式的格式如下：

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

</head>
<body>

</body>
<!--
内部引入JS
放任何位置都可以
但是一般写在body后面，让用户先看内容后看脚本
-->
<script>
  alert("HELLO JS1");
</script>


<!--
引入外部文件
-->
<script src = "../js/demo.js"></script>
</html>

 效果如下：

2.输出语句

这里我们提供三种输出（到浏览器）方式：

其中：alert是写入到浏览器的警告框里面

           write直接输出到页面

           log写到控制台里面

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

<body>

</body>
<script>
    window.alert("HELLO JS1");//写入警告框

    document.write("HELLO JS2");//写入html页面

    console.log("HELLO JS3");//写入浏览器的控制台
</script>

</html>

3.变量

JS语言里面变量只有var和let两种，都是根据自己的值来改变数据类型的。

但是JS是有各种数据类型的，只是是隐式的。

number 数字
string 字符 字符串
boolean 布尔
null 空
undefined 未初始化时的数据类型

var和let都有自己的特点如下：

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

<body>

</body>
<script>
    //弱类型变量（没有固定的类型）
    var test = 20;
    test = "yds"
    alert(test);

    /*
     var：
        1.作用域：全局变量
        2.变量可以重复定义
     */

    {
        var age = 30;
        var age = 20;//覆盖
    }
    alert(age)

    /*
    let:
        1.作用域：代码块
        2.变量不能重复定义
     */

    {
        let age = 20;//覆盖
    }
    alert(age);

    //const:定义常量（不可改）
    const pi = 3.1415926;
    pi =3;
</script>

</html>

4.数据类型

可以通过alert(typeof 变量)来获取隐式（真实）数据类型。

下面给出了很多例子，可以自行尝试。

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

<body>

</body>
<script>
    /*
        number 数字
        string 字符 字符串
        boolean 布尔
        null 空
        undefined 未初始化时的数据类型

     */

    //number
    // var age = 19;
    // var price = 99.9;
    // alert(typeof age);
    // alert(typeof price);

    //string
    // var ch = 'a';
    // var name = "yds";
    // var city = '成都';
    // alert(typeof ch);
    // alert(typeof name);
    // alert(typeof city);

    //boolean
    // var flag1 = true;
    // var flag2 = false
    // alert(typeof flag1);
    // alert(typeof flag2);

    //null
    // var obj = null;
    // alert(typeof obj);

    //undefined
    var a;
    alert(typeof abc);

</script>

</html>

5.运算符

和Java不同：

   ==:
      1.判断累心是否一样，如果不一样，则进行类型转换
      2.再去比较其值

   ===：全等于
      1.判断类型是否一样，如果不一样，直接返回false
      2.再去比较其值

其他类型转为number：

1.string：可以在字符串前写上 + 转换，如果字面值不是数字，则转为NaN。 但一般使用parseInt
2.boolean：true -> 1     false -> 0

其他类型转为boolean：

1.number:0和NaN转为false，其他转为true
2.string:空转false，有转true
3.null:false
4.undefined:false

在健壮性判断上JS比Java要更加方便如下：（末尾）

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

</body>
<script>
    //辨析== 和===
    // var age1 = 20;
    // var age2 = "20";
    // alert(age1 === age2);
   
    //类型转换：
    // var str = +"20";
    // alert(parseInt(str) + 1);

    // var flag1 = +true;
    // var flag2 = +false;
    // alert(flag1);
    // alert(flag2);

    var flag = 0;
    if(flag){
      alert("转为true");
    }else{
      alert("转为false");
    }

    //健壮性判断
    //Java
    //   if(str != null && str.length > 0){
    //
    //   }
    //JS
    //   if(str){
    //
    //   }

</script>
</html>

6.流程控制语句

不作赘述，全部和Java相同

7.函数

形式参数不需要 返回类型不需要 调用时可以传递任意参数

有两种语法：

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

</body>

<script>
  //语法
  //第一种
  function add(a,b){
     return a + b;
   }
   let result = add(1,5);
   alert(result);

  //第二种
  var add = function (a,b){
    return a + b;
  }
  //试试传递任意参数，按顺序传递形式参数,没有就忽略
  let result = add(1,5,8,9,0);
  alert(result);

</script>
</html>

8.数组对象

定义和访问和Java略有不同：

值得注意的是：JS中的数组相当于Java中的集合ArrayList，变长变类型，可以自动扩容。

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

</body>
<script>
    // Array
    // 定义
    // 法一
    var arr = new Array(1,2,3);
    alert(arr);

    //法二
    var arr1 = [1,2,3];
    alert(arr1)

    //访问
    var arr2 = [1,2,3];
    arr[0] = 10;
    alert(arr2)

    //特点，JS中的数组相当于Java中的集合ArrayList，变长变类型
    var arr3 = [1,2,3];
    arr3[10] = 10;//自动扩容了
    alert(arr3[10]);

    //变类型
    var arr4 = [1,2,3];
    arr3[5] = "yds";
    alert(arr3);

    length
    var arr5 = [1,2,3,4,5];
    for (let i = 0; i < arr5.length; i++) {
        alert(arr5[i]);
    }

    //方法
    //push 添加
    //splice 删除
    var arr6 = [1,2,3,4,5];
    arr6.push(10);
    arr6.splice(0,1);
    alert(arr6);
    
</script>
</html>

9.String对象

和Java的String差别不大。

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

</body>
<script>
    var str1 = new String("abc");
    var str2 = "abc";
    var str3 = 'abc';

    alert(str3.length);

    //trim()去除字符串前后两端的空白
    var str4 = "    abc";
    alert(1 + str4.trim() + 1);


</script>
</html>

10.自定义对象

类似于Java的类或者C语言的结构体，定义方式略有不同。

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

</body>
<script>
    var person = {
        name : "yds",
        age : 19,
        eat: function (){
          alert("吃吃吃")
        }
    };

    alert(person.eat());
</script>

</html>

这里我们访问person对象的eat成员变量，运行结果是：

11.BOM

这里主要介绍window对象的几个函数

第一个是定时器

第二个是History

第三个是Location

这里我们给出几个案例来方便了解这些函数的使用：

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

<script>
 // window
  window.alert("bbb");

  //confirm,点击确定返回true，点击取消选择false
  confirm("确认删除？");

  //定时器:   setTimeout:  执行一次
  //         setInterval() 循环执行

  setTimeout(function (){
    alert("warning");
  },2000);

  setInterval(function (){
    alert("warning");
  },2000)


  //定时开关灯
  function on() {
      alert("on");
  }
  function off() {
      alert("off");
  }
  setInterval(function (){
        on();
        setTimeout(function () {},1000);
        off()
  },1000)

  //History
  //window.history() : 历史记录
  //history.back();
  //history.forward();

  //Location
  //window.location():地址栏对象

  alert("跳转");
  location.href = "http://www.baidu.com";


  //案例：3秒后跳转到首页
  document.write("3s后跳转到页面");
  setTimeout(function () {
      location.href = "http://www.baidu.com";
  },3000);


</script>

</html>

12.DOM

这里主要介绍document对象的几个函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img  id = "java"  src="../imgs/java.jpg"><br>

<div class = "cls">yds</div>
<div class = "cls">yxy</div>

<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">游戏
<input type="checkbox" name="hobby">旅游
<br>

</body>

<script>
  //JS通过DOM来对html操作
  //getElementById:根据Id获取属性，返回一个element对象
  var img = document.getElementById("java");
  alert(img);


  //getElementsByTagName：根据标签名称获取，返回element对象数组
  var divs = document.getElementsByTagName("div");
  alert(divs.length);
  //遍历数组
  for (let i = 0; i <divs.length; i++) {
    alert(divs[i]);
  }

  //getElementsByName,根据name属性值获取，返回element对象数组
  var hobbies = document.getElementsByName("hobby");
  for (let i = 0; i < hobbies.length; i++) {
    alert(hobbies[i]);
  }

  //getElementsByClassName,根据class属性值获取，返回element对象
  var className = document.getElementsByClassName("cls");

  for (let i = 0; i < className.length; i++) {
    alert(className[i]);
  }


  //关于img类
  var img = document.getElementById("java");
  img.src = "../imgs/MySQL.png";
  alert(img);

  //style：设置元素css样式
  var divs = document.getElementsByTagName("div");
  for (let i = 0; i < divs.length; i++) {
    divs[i].style.color = 'red';
  }

  //innerHTML：设置元素内容
  var divs = document.getElementsByTagName("div");
  for (let i = 0; i < divs.length; i++) {
    divs[i].innerHTML = '美女帅哥';
  }

  //checkBox中的checked
  var hobbies = document.getElementsByName("hobby");
  for (let i = 0; i < hobbies.length; i++) {
    hobbies[i].checked = true;//勾选每个多选框
  }
  
</script>
</html>

最终的效果：

13.事件监听

    常见事件：
    事件名    说明
    onclick    鼠标单击事件
    onblur    元素失去焦点
    onfocus    元素获得焦点
    onload    某个页面或图像被完成加载
    onsubmit    当表单提交时触发该事件
    onkeydown    某个键盘的键被按下
    onmouseover    鼠标被移到某元素之上
    onmouseout    鼠标从某元素移开
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="点我" onclick="on()"><br>
    <input type="button" value="再点我" id = "btn"><br>
</body>

<script>
  //事件绑定
  //法一：通过HTML标签中的时间属性进行绑定
   function on() {
     alert("我被点了");
   }

  //法二：通过DOM元素属性绑定
  function on() {
     alert("我被点了");
   }

   document.getElementById("btn").onclick = function() {
       alert("我被点了");
   }

</script>
</html>

14.正则表达式

概念：正则表达式定义了字符串组成的规则
定义：
1.直接量：注意不要加引号
var reg = /^\w{6,12}$/;
2.创建 RegExp 对象
var reg = new RegExp("^\w{6,12}$");
方法：
test(str)：判断指定字符串是否符合规则，返回 true 或 false
语法：
^：表示开始
$：表示结束
[]：代表某个范围内的单个字符，比如：[0-9]单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
\d：代表数字字符：相当于 [0-9]

 量词：
+：至少一个  var reg = /^\w+$/;
*：零个或多个
?：零个或一个
{x}：x 个
{m,}：至少 m 个
{m,n}：至少 m 个，最多 n 个

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

</body>
<script>

  //这里设置一个正则表达式：意思是输入的字符最少6个最多12个
  var reg = /^\w{6,12}$/;
  var str = "abcadadafuhfufcvjh"
  var flag = reg.test(str);
  alert(flag);

</script>
</html>

我们这里随机尝试一个str，来检验这个字符串是否符合正则表达式，得到结果如下：

标签
#前端 #html #javascript #后端
YDS829
关注
别再被手机厂商忽悠了！一文看懂光学变焦、数字变焦和混合变焦到底有啥区别
最新发布
weixin_28717969的博客
05-07 377
本文深入解析手机摄影中的光学变焦、数字变焦和混合变焦技术，揭示它们的工作原理和实际效果差异。光学变焦保持无损画质，数字变焦依赖算法放大，而混合变焦结合两者优势。帮助消费者识破厂商宣传，根据实际需求选择最适合的变焦方式，提升拍摄质量。
别再死记硬背MAML原理了！用PyTorch手撸一个Omniglot小样本分类器（附完整代码）
weixin_29191669的博客
03-31 109
本文详细介绍了如何使用PyTorch实现MAML（模型无关的元学习）算法，构建一个Omniglot小样本分类器。通过实战代码演示，帮助读者理解MAML的双层优化原理，并提供了完整的训练循环、网络架构设计及调试技巧，适合想要掌握元学习技术的开发者。
前端三剑客，html，css，javascript，vue框架
qq_51778285的博客
12-28 6257
HTML 教程 | 菜鸟教程HTML 教程- (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本教程中，您将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信您能很快学会它！ HTML 实例 本教程包含了数百个 HTML 实例。 使用本站的编辑器，您可..https://www.runoob.co..
Python版实验室设备管理仪器借用系统源代码、PySide2+sqlite3
Python版实验室设备管理系统源代码、实验室仪器借用记录基于PySide2+sqlite3，用Pyside2开发的仪器借用记录系统，储存数据用的sqlite，主要就是增查改功能
HTML与JavaScript结合使用的两种方式
m0_72237413的博客
06-24 4532
HTML中嵌入JavaScript代码的两种方式
Web前端 | HTML嵌入JS代码的三种方式
m0_61933976的博客
10-10 1万+
HTML嵌入JS代码的三种方式
JS 和 html 代码的结合方式加函数的详细讲解
业精于勤，荒于嬉
04-05 3175
// 定义一个无参函数alert("无参函数 fun()被调用了");// 函数调用===才会执行// fun();alert("有参函数 fun2()被调用了 a=>" + a + ",b=>"+b);// 定义带有返回值的函数
HTML+js技术总结（华清远见）
a18786923310的博客
08-28 2405
html+js知识点总结（华清远见）
如何用JS操作HTML（基础）
Li5306的博客
05-17 2540
delete oYm.name => delete是操作符, oYm.name是操作数.修改style属性的backgroundColor属性,就可以让页面上的div的背景色改变.3:函数调用.每次方法的使用,都是在写函数调用表达式. => 先不考虑。数据属性都以on开头。双目运算符 => 操作数是2个的运算符.(大多数运算符都是双目)2:操作符表达式 => 不同操作符返回的值不一样的.没有=的属性是布尔属性.这种属性的属性值用js表示就是布尔值.以下对style对象的修改，实际上修改的是标签的行间样式。
前端三剑客入门(HTML+CSS+JS)—— HTML+CSS篇
Rookiebird829的博客
08-01 811
本文是为后端开发人员准备的HTML基础入门指南，主要介绍JavaWeb开发前需要了解的HTML基础知识。文章首先讲解了HTML文档的基本结构，包括<head>和<body>标签的作用。随后详细介绍了常用HTML标签：基础文本标签（h1-h6、p、font等）、多媒体标签（img、audio、video）、超链接标签（a）、列表标签（ol、ul）、表格标签（table）以及布局标签（div、span）。最后重点讲解了表单相关标签（form、input等），包括各种表单项的用法和表单提交
前端三剑客 HTML、CSS、JavaScript 入门到上手
weixin_46448719的博客
05-01 1万+
HTML、CSS、JavaScript 基本语法大全，教你从入门到上手
【前端开发】HTML+CSS+JavaScript前端三剑客的基础知识体系了解
GGBond778的博客
11-16 1万+
小编本期主要讲解了关于前端三剑客的基础认知：HTML+CSS+JavaScript的基础知识
前端“三剑客”——HTML,CSS,JS
欢迎来到 晨 的博客
09-25 1万+
关于对web部分基础知识的总结
前端三剑客HTML+CSS+JS
2402_85301917的博客
03-09 929
先来说一下这三种分别是什么吧。HTML是用来描述网页的一种语言，可以在web页面上使用的。HTML可以让你创建文本，添加图片，创建连接等等在浏览器中以页面的形式显示出来。而CSS是另一种标记语言，主要用在设置HTML页面中文本的内容（如字体，大小对齐方式等），图片的样式以及版面的布局和外观等等。最后JavaScript是一种脚本语言，与Java完全截然不同，它允许网页具有动态交互的功能，例如处理用户的输入，操作DOM，与服务器向通信等等。HTML相当于来构建网页的框架结构，而CSS是用来美化网页的样式，JS
前端基础知识（HTML+CSS+JavaScript）
2301_80035594的博客
09-16 1855
由于后续 JavaWeb 的需要，前端的基础知识必不可少，本文章旨在快速入门前端，让我们开始吧。
【前端三剑客三】 JavaScript
澄白易的博客
05-08 2573
目录 1. 初识 JavaScript 1.1 什么是 JavaScript 1.2JavaScript 、HTML 、CSS 之间的关系 1.3JavaScript 的组成 2.JavaScript 的书写形式 2.1 行内式 2.2内嵌式 2.3外部式 3. JavaScript 基本语法 3.1 注释 3.2 输入输出 3.3 变量 3.3.1 变量初始化 3.3.2变量的命名规范 3.4 基本数据类型 3.5 流程控制 3.5.1if 3.5...
HTML+JS好例子集锦
cnds123的专栏
02-28 1万+
HTML+JS好例子集锦 一些HTML+JavaScript好例子，有些例子照网络资料，包括HTML+JS限时小学数学出题、打开对话框选择本地文件、简单画布画板、俄罗斯方块游戏、落英纷飞动画、随机点名器的示例 、生成二维码等。...
HTML+CSS+JS总结
m0_51480841的博客
08-28 9703
HTML是超文本标记语言是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 二.HTML标签 标签的概念 一个html文件是由标签和元素组成的html的标签还有很多包括input,from等等html标签对照表CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。1:继承性:父元素的样
前端HTML+JS
m0_58414041的博客
02-16 373
前端HTML+JS
js中写html代码怎么写,在js中写html代码怎么写
weixin_31301881的博客
06-07 6714
在js中写html代码的方法：首先使用div标签创建一块区域，给div标签添加一个id属性；然后在js中将一段html代码保存在html变量中；最后使用innerHTML属性，将html代码动态写入div标签内即可。本文操作环境：Windows7系统、javascript1.8.5版，DELL G3电脑新建一个html文件，命名为test.html，用于讲解如何用js动态写入html代码。在tes...
在HTML 中嵌入 JS 代码的三种方式
innocence_123的博客
05-06 1万+
行间事件是指将JavaScript函数写到HTML元素中的执行事件。 1、JavaScript 是一种事件驱动型的编程语言，通常都是在发生某个事件的时候，去执行某段代 码。其中，事件包括很多，例如：鼠标单击事件 click，鼠标经过事件 mouseover 等。并且在 JavaScript 当中任何一个事件都有对应的事件句柄（事件发生时要进行的操作）。 例如：click 对应的事件句柄是 onclick，mouseover 对应的 事件句柄是 onmouseover。 2、怎么使用 JS 代码弹窗？
❗HTML引入JavaScript的三种常用方式汇总❗
热门推荐
YXXXYX的博客
10-13 7万+
引言 JavaScript是一门脚本语言，虽然名字里有Java，但是和Java没有一点关系，它原名是LiveScript；现在的前端JavaScript可以说是异常火爆，但是博主本人并不准备向前端发展，但是对前端的一些基础知识还是必须有所了解的； 上一篇博客：❗HTML引入CSS的三种常用方式汇总❗ 已经介绍了HTML嵌入CSS的三种方式，这里就来介绍HTML如何嵌入JavaScript； ps：由于作者规划以后往java后端发展，所以对于前端的知识只是了解了部分主要内容，以应用为主，所以如果有错误请各位及
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值