第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】获取本课源码+工具包!

相关推荐
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
黄瓜沾糖吃2 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟2 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
浩龙不eMo3 小时前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript
爱分享的程序员3 小时前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
pe7er4 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er4 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
islandzzzz4 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端4 小时前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛5 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http