第1课:初识JavaScript——让你的网页“动”起来!

欢迎来到「JavaScript 魔法学院」第 1 课!今天我们将揭开 JavaScript(简称 JS)的神秘面纱,只需 3 分钟,你就能写出第一个脚本,让网页"活"起来!

一、什么是 JavaScript?

1. JavaScript 简介

  • JavaScript:1995 年由 Brendan Eich 用 10 天设计,现已成为全球使用最广的编程语言。
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
  • JavaScript:网页的"魔法师",负责让静态页面动起来(比如弹窗、轮播图)。
  • JavaScript:直接运行在浏览器,无需安装环境、支持事件响应(点击、滑动等)、能与 HTML/CSS 无缝协作。

2. JavaScript 能做什么?

  • 基础玩法:表单验证、动态修改页面内容

  • 高阶操作:开发 Web 应用(如 Gmail)、游戏、甚至服务端(Node.js)

二、开发环境搭建:2 分钟搞定!

1. 浏览器控制台(零配置)

  • 打开 Chrome 浏览器,按 F12 或右键选择 检查

  • 切换到 Console 标签,输入代码直接运行!

js 复制代码
console.log("Hello,我是控制台!");

2. VS Code(推荐编辑器)

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, initial-scale=1.0">
    <title>Hello JS!</title>
</head>
<body>
    <script>
        alert("Hello JS!");
    </script>
</body>
</html>
  • 运行:右键用浏览器打开文件,看到弹窗即成功!

三、JavaScript 输出

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, initial-scale=1.0">
    <script src="./hello.js"></script>
    <title>Hello JS!</title>
</head>

<body>
    <div id="content"></div>
    <script>
        // 使用 window.alert() 弹出警告框。
        alert("Hello JS!");
        // 使用 document.write() 方法将内容写到 HTML 文档中。
        document.write("<h1>我是JS-document.write创造的文字!</h1>");
        // 使用 innerHTML 写入到 HTML 元素。
        document.getElementById("content").innerHTML = "<h1 style='color: blue;'>我是JS-innerHTML创造的文字!</h1>";
        // 使用 console.log() 写入到浏览器的控制台。
        a = 1;
        b = 2;
        c = a + b;
        console.log('c:', c);
    </script>
</body>

</html>
  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

四、第一个脚本:Hello World!

1. 代码实战

  • 在 VS Code 中创建 hello.js 文件,写入:
js 复制代码
console.log("第一个脚本:Hello World!");
  • 将 hello.js 文件引入到 index.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, initial-scale=1.0">
    <script src="./hello.js"></script>
    <title>Hello JS!</title>
</head>
<body>
    <script>
        alert("Hello JS!");
    </script>
</body>
</html>

2. 运行结果

关注公众号,回复【JS】获取本课源码+工具包!

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的7 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀7 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce8 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L9 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop10 小时前
05-ES6
前端·javascript·es6
Heo11 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端