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

【JavaScript】JavaScript基本使用方法

news 2026/3/26 23:02:19

如何回复程序员发来的短信：Hello world

—hello nerd.

前言：

大家好，我是程序猿爱打拳。今天我给大家讲解的是初识JavaScript中基本组成成分、引入方法、输入输出语句，并用源码与效果图的方式展示给大家。

目录

1.JavaScript组成

2.JavaScript代码初体验 

3.JavaScript代码引入方式

3.1行内式

3.2.嵌入式

3.3.外链式 

4.输入输出语句

4.1prompt()语句

4.2alert()语句

4.3document.write()语句

4.4console.log()语句

5.JavaScript注释

5.1单行注释

5.2多行注释

1.JavaScript组成

JavaScript由ECMAScript、DOM、BOM这三部分组成。

  • ECMAScript：规定了JavaScript的编程语法与基础核心内容，是所有浏览器都遵循的语法标准。
  • DOM：是万维网制定的用于处理HTML文档和XML文档的编程接口。
  • BOM：浏览器对象模型，也是一套编程接口，一般进行刷新页面、弹出警告框、跳转页面等。

2.JavaScript代码初体验 

在浏览器中输出Hello World。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script >document.write('Hello World');</script></body>
</html>

显示结果：

如何实现的，下面我就来一一讲解。

3.JavaScript代码引入方式

首先在编写JavaScript代码时，我们需要先引入JavaScript代码。有三种引入方式分别为行内式、嵌入式和外链式。

3.1行内式

行内式我们理解为直接在一行内进行编写，例如我点击一个名为"网站"的链接打印出一个警告框提示"本站为私人网站请自行离开"。

<a href="javascript:alert('此网站为私人网站请自行离开');">网站</a>

显示结果：

注意：

1.<a></a>标签是定义超链接，用于从一张页面链接到另一张页面。

2.href 属性是 <a></a>标签的重要属性，它指向的是链接的目标。

3.2.嵌入式

嵌入式我们理解为，使用<script></script>标签包裹的JavaScript代码。例如我要编写一个提示框询问"今天你过的开心吗？"

<script>prompt('今天你过的开心吗？','yes');
</script>

窗口显示为：

注意：

1.<script></script>标签为JavaScript主要标签，<script> 标签用于定义客户端脚本，也可以使用src属性实现外部链接。

2.prompt()语句为输入语句，在浏览器中弹出输入框，用户也可以输入内容。

3.3.外链式 

将JavaScript代码单独写在一个后缀为.js的文件中，然后在HTML页面中使用src属性来引入这个.js文件。就能实现外链式的用法，一般当代码足够多时我们会用到该引入方式。

例如我在.js文件里面写入一句"Hello World",并使用外链式在浏览器中显示出来：

//.html文件下
<script src="teset.js"></script>
//.js文件下
document.write('Hello World');

输出结果：

注意：

1.document.write()语句为输出语句，用于在网页中输出内容。

4.输入输出语句

JS中的输入语句不同于C中的scanf和Java中Sout，JS基本的输入输出语句对应下表：

类型语句说明
输入prompt()用于在浏览器中弹出输入框，用户可以输入内容
输出alert()用于浏览器中弹出警告框
输出document.write()用于网页中输出内容
输出console.log()用于在控制台中输出信息

4.1prompt()语句

prompt语句使用效果就是在网页打开时弹出一个带有提示信息的输入框，如提示"今天你学习了吗？"

<script >prompt('今天你学习了吗？');
</script>

显示效果：

如果你想让输入框有一个默认的值，你可以在()里再用,号分割出另一段话，如输入框默认显示"学习了"。当然这个默认的文字可以进行修改

<script >prompt('今天你学习了吗？','学习了');
</script>

显示效果：

4.2alert()语句

alert语句我们在上面的行内式介绍中已经讲解到了，使用alert与编写代码实现的效果是弹出一个警告框，例如弹出一个"不好好学习就找不到好offer"的警告。

<script >alert('不好好学习就找不到好offer');
</script>

显示效果：

4.3document.write()语句

document.write语句会直接将你打出的内容显示在浏览器页面中，默认为左上角显示。例如在页面显示"我是帅哥"。

<script >document.write('我是帅哥');
</script>

显示效果：

4.4console.log()语句

console.log语句就与上述几个语句有些许不同了，它是在控制台中输出内容的。首先我们要先打开控制台，查看控制台我们直接按F12即可。

不知有没有小伙伴，在浏览网页时有没有不小心按到那个按键然后页面显示了一大堆看不懂的代码，这就是你误按F12造成的结果。

 言归正传，例如我要使用console.log()语句在控制台中显示"我今天好好学习了,我真棒！"

<script >console.log('我今天好好学习了，我真棒！');
</script>

显示效果：

5.JavaScript注释

JS分为两种注释方法，分为单行注释与多行注释。

5.1单行注释

单行注释，与C、Java中一样使用'//'来进行注释，用法如下程序所示。

<script >console.log('我今天好好学习了，我真棒！');//在控制台输入文本信息
</script>

5.2多行注释

多行注释，我们以/*开头，*/结尾。例如我写了一大串代码突然我不想用了，我可以使用这种方式进行屏蔽。

<script >/*console.log('我今天好好学习了，我真棒！');alert('Hello World');document.write('输出内容');*/
</script>

我们可以看到/**/内的内容都变成了灰色。当然你也可以使用Ctrl+/来实现快速的屏蔽效果。

重点总结：

1.JavaScript是由ECMAScript、DOM、BOM这三部分组成。

2.JavaScript代码引入方式有行内式、嵌入式、外链式三种引入方式。

3.输入语句为prompt()，输出语句为alert()、document.write()、console.log()。

4.JavaScript区分大小写，并且每一段程序结束时要加上;号这点和C语言、Java是一样的。

5.JavaScript输出内容时可以用英文双引号""也可用英文单引号''。

以上就是本次博文的全部内容，感谢您的耐心阅读。

 Never Give Up

相关文章：

【JavaScript】JavaScript基本使用方法

如何回复程序员发来的短信&#xff1a;Hello world —hello nerd. 前言&#xff1a; 大家好&#xff0c;我是程序猿爱打拳。今天我给大家讲解的是初识JavaScript中基本组成成分、引入方法、输入输出语句&#xff0c;并用源码与效果图的方式展示给大家。 目录 1.JavaScript组成…...

编程日记 2023/2/20 4:28:32

Python数据容器、list列表、tuple元组、str字符串、数据容器（序列）切片、set集合、dict字典、字符串大小比较

数据来源 01 数据容器 为什么学习数据容器 数据容器 总结 02 列表 1&#xff09;列表定义 为什么需要列表 列表的定义语法 列表的定义方式 演示 """ 演示数据容器之:list列表 语法:[元素,元素,......] """ # 定义一个列表list my_list …...

编程日记 2023/2/20 4:27:24

Python urllib

Python urllib Python urllib 库用于操作网页 URL&#xff0c;并对网页的内容进行抓取处理。 本文主要介绍 Python3 的 urllib。 urllib 包 包含以下几个模块&#xff1a; urllib.request - 打开和读取 URL。urllib.error - 包含 urllib.request 抛出的异常。urllib.parse …...

编程日记 2023/2/20 4:26:14

Centos7安装Python3

前言系统版本&#xff1a;Centos7.6python版本&#xff1a; python 3.10.4下载python下载链接&#xff1a;直通车找到对应版本的python安装包,这里以python 3.10.4为例点击3.10.4版本的链接&#xff0c;拉到最下面找到Files中对应的linux安装包鼠标右键复制下载链接登录linux系…...

编程日记 2023/2/20 4:25:05

[U3D ShaderGraph] 全面学习ShaderGraph节点 | 第四课 | Input/Lighting

📣📣📣本专栏所有内容在完结之前全部为试读模式,专栏完结之后会取消试读模式,如果感觉内容还不错的话请支持一下📣📣📣 ShaderGraph是可视化的着色器编辑工具。您可以使用此工具以可视方式创建着色器。 本专栏可以让你更了解ShaderGraph中每个节点的功能，更自如的…...

编程日记 2023/2/20 4:23:59

SpringBoot升级到3.0

SpringBoot 3.0出来有一段时间了&#xff0c;一直没时间来整理&#xff0c;这次来看一下吧。 Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序&#xff0c;您可以“直接运行”。 SpringBoot升级到3.01. SpringBoot的维护时间线2. pom添加3. 打包大小对比4. 升…...

编程日记 2023/2/20 4:22:53

JavaWeb8-线程安全问题

目录 1.概念 1.1.单线程 1.2.多线程 2.导致线程不安全的5个因素 ①抢占式执行&#xff08;首要原因&#xff09; ②多个线程同时修改了同一个变量 ③非原子性操作 ④内存可见性 ⑤指令重排序 线程优点&#xff1a;加速程序性能。线程缺点&#xff1a;存在安全问题。 1…...

编程日记 2023/2/20 4:21:43

进程切换-

实验课之前有一些问题 中断机制 第一个问题&#xff1a; interrupt的两个状态源头&#xff1a; 外中断多由随机中断&#xff08;异步中断&#xff09;造成&#xff0c;如鼠标点击&#xff0c;键盘输入&#xff1b; 内终端多由故障终端&#xff1a;程序运行异常&#xff0c;硬件…...

编程日记 2023/2/20 4:20:35

python--matplotlib(2)

前言 Matplotlib画图工具的官网地址是 http://matplotlib.org/ Python环境下实现Matlab制图功能的第三方库&#xff0c;需要numpy库的支持&#xff0c;支持用户方便设计出二维、三维数据的图形显示&#xff0c;制作的图形达到出版级的标准。 实验环境 Pycharm2020.2.5社区版,w…...

编程日记 2023/2/20 4:19:28

【李忍考研传】五、信心

这天&#xff0c;何隐一来到图书馆就一脸兴奋地对李忍说&#xff1a;“晚上告诉你一个好消息。”李忍又期待又迷惑。“小何今天是咋的了&#xff1f;买彩票中了二十&#xff1f;”虽然李忍很想知道何隐在卖什么关子&#xff0c;但是既然晚上就能知道&#xff0c;那就忍忍吧。 …...

编程日记 2023/2/20 4:18:21

Web 页面之间传递参数的几种方法

Web 页面之间传递参数的方法有很多种&#xff0c;下面列出一些常见的方法以及它们的代码示例。 一、前端直接传递参数 1、URL 参数传递&#xff08;query string&#xff09;&#xff1a;通过 URL 的查询字符串&#xff08;即问号后面的参数&#xff09;将参数传递给页面。可…...

编程日记 2023/2/20 4:17:15

Android实例仿真之二

目录 三 从无入手 第一阶段 第二阶段 第三阶段 第四阶段 第五阶段 第六阶段 第七阶段 八 举两个典型例子&#xff1a; 九 逆向工程 三 从无入手 这节标题叫从无入手&#xff0c;什么意思呢&#xff1f;如果没有Android这个实例存在&#xff0c;你要做一个类似Android…...

编程日记 2023/2/20 4:16:08

day47【代码随想录】动态规划之买卖股票的最佳时机III、买卖股票的最佳时机IV、最佳买卖股票时机含冷冻期、买卖股票的最佳时机含手续费

文章目录前言一、买卖股票的最佳时机III&#xff08;力扣123&#xff09;二、买卖股票的最佳时机IV&#xff08;力扣188&#xff09;三、最佳买卖股票时机含冷冻期&#xff08;力扣309&#xff09;四、买卖股票的最佳时机含手续费&#xff08;力扣714&#xff09;股票买卖问题总…...

编程日记 2023/2/20 4:14:58

网络数据包接收流程

1. 网络数据包接收流程简述 典型的以太网卡网络包接收流程如下&#xff1a; 1.网络包通过物理介质传到接收端的phy芯片&#xff1b; 2.phy芯片通过RGMII协议传到MAC芯片rx queue fifo中&#xff1b; 3.MAC芯片通过专用DMA将网络包搬运到网卡驱动程序预先分配好的rx ringbuffer中…...

编程日记 2023/2/20 4:13:49

CSAPP学习笔记——虚拟内存（二）

案例研究 Intel Core i7 该处理底层的Haswell微体系结构允许64位的虚拟和物理地址空间&#xff0c;而现在的Core i7实现支持48位&#xff08;256TB&#xff09;虚拟地址空间和52位&#xff08;4PB&#xff09;物理地址空间&#xff0c;这对目前来说已经完全够用了。&#xff…...

编程日记 2023/2/20 4:12:43

面试sql

创建表 create table Student ( Sno varchar(20) primary key,Sname varchar(20) UNIQUE,Ssex varchar(2),Sbirthday date,class varchar(20) )create table Course ( Cno varchar(20) primary key,Cname varchar(20) UNIQUE,Tno varchar(20) )create table Score ( …...

编程日记 2023/2/20 4:11:35

Python编程自动化办公案例（2）

作者简介&#xff1a;一名在校计算机学生、每天分享Python的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.前期代码 二.实现批量读取 1.os库 2.实现思路 &#xff08;1&#…...

编程日记 2023/2/20 4:10:26

Vulnhub 渗透练习（七）—— FRISTILEAKS: 1.3

环境搭建 下载链接 virtualbox 打开靶机设置为 host-only&#xff0c;攻击机同样。 具体可点此处 信息收集 开了个 80 端口。 用的是 apache 2.2.15 &#xff0c;这个版本有个解析漏洞。 目录 根据首页的图片猜测 /fristi/ 目录&#xff08;不过我没想到 -_-&#x…...

编程日记 2023/2/20 4:09:18

阶段二10_面向对象高级_分类分包思想和案例环境搭建

一.分类思想 1.分类思想概念&#xff1a; 分工协作&#xff0c;专人干专事 2.信息管理系统分类[案例] Student 类-------------------->标准学生类&#xff0c;封装键盘录入的学生信息&#xff08;id , name , age , birthday&#xff09; StudentDao 类-----------------&…...

编程日记 2023/2/20 4:08:09

关于打印工具print-js的使用

https://www.jianshu.com/p/f6f09dd9f7db第一步 安装组件//安装print-js npm install print-js --save //删除print-js npm uninstall print-js //安装固定版本 npm install print-js版本号 --save // 全局安装 npm install print-js --save -g第二步 引入组件安装成功后&#…...

编程日记 2023/2/20 4:07:03

个人记账自动化：OpenClaw+nanobot解析消费短信

个人记账自动化&#xff1a;OpenClawnanobot解析消费短信 1. 为什么需要自动化记账 每个月末看着银行卡余额叹气时&#xff0c;我总在想&#xff1a;钱到底花哪儿了&#xff1f;手动记账App试过七八个&#xff0c;最终都败给"忘记记录"这个人类通病。直到发现消费短…...

编程新知 2026/3/26 21:40:01

在 React 中，useRef、ref 属性以及 forwardRef 是处理“引用”（访问 DOM 节点或组件实例）的核心概念

在 React 中&#xff0c;useRef、ref 属性以及 forwardRef 是处理“引用”&#xff08;访问 DOM 节点或组件实例&#xff09;的核心概念。它们经常一起使用&#xff0c;但职责完全不同。以下是它们的核心区别、使用方法及组合示例&#xff1a;1. 核心概念与区别特性ref (属性)u…...

编程新知 2026/3/26 21:03:50

数字中国新引擎：产业经济大脑的全景式解构与深度洞察（PPT）

“中国经济高质量发展的核心命题&#xff0c;已从‘有没有’转向‘好不好’。而要回答‘好不好’&#xff0c;就必须构建一套能看清、看准、看远的‘经济慧眼’。”在数字经济成为国家战略主战场的今天&#xff0c;地方政府正面临着前所未有的治理挑战&#xff1a;宏观政策如何…...

编程新知 2026/3/26 20:57:50

FPGA设计避坑指南：手把手教你搞定跨时钟域信号同步（附Verilog代码）

FPGA设计避坑指南&#xff1a;跨时钟域信号同步的工程实践与Verilog实现 在FPGA开发中&#xff0c;跨时钟域信号同步问题就像电路设计中的"暗礁"&#xff0c;稍有不慎就会导致整个系统崩溃。想象一下这样的场景&#xff1a;你的设计在仿真阶段完美运行&#xff0c;但…...

编程新知 2026/3/26 20:55:50

【SpringBoot】scanBasePackages实战：从默认扫描到精准控制的进阶指南

1. 为什么需要自定义组件扫描路径 第一次用SpringBoot开发项目时&#xff0c;我发现只要把启动类放在顶层包下&#xff0c;所有子包的组件都能自动注册。这种"开箱即用"的特性确实方便&#xff0c;但后来接手一个老项目时遇到了问题&#xff1a;启动耗时长达2分钟&am…...

编程新知 2026/3/26 20:29:45

Timer-S1 正式发布：首个十亿级时序基础模型，预测性能达到 SOTA

本文约3600字&#xff0c;建议阅读5分钟十亿级规模化的突破&#xff0c;首次将时间序列预测的串行本质&#xff0c;融入模型架构、数据、训练全流程&#xff01;在 AI 全面渗透各行业的背景下&#xff0c;工业企业对时序数据的应用需求已从基础查询计算&#xff0c;升级为设备状…...

编程新知 2026/3/26 20:11:42

从零部署JetLinks社区版：一站式物联网平台本地化搭建实战

1. JetLinks社区版&#xff1a;物联网开发的瑞士军刀 第一次接触JetLinks社区版是在三年前的一个智能家居项目上。当时客户要求两周内搭建一个能管理5000设备的物联网平台&#xff0c;还要支持自定义协议开发。在对比了多个开源方案后&#xff0c;JetLinks的模块化设计让我眼前…...

编程新知 2026/3/26 18:48:39

避坑指南：三自由度机械臂DH参数建模与逆解求解的那些‘坑’（从理论到Matlab/Python验证）

三自由度机械臂运动学建模实战&#xff1a;从DH参数陷阱到逆解验证 机械臂运动学建模是机器人学中最基础却最容易踩坑的领域之一。很多工程师和学生在理论学习阶段看似掌握了DH参数法和正逆运动学推导&#xff0c;但一旦动手实践&#xff0c;总会遇到各种"诡异"的问题…...

编程新知 2026/3/26 18:34:37

UndertaleModTool：解锁游戏修改的无限可能

UndertaleModTool&#xff1a;解锁游戏修改的无限可能 【免费下载链接】UndertaleModTool The most complete tool for modding, decompiling and unpacking Undertale (and other Game Maker: Studio games!) 项目地址: https://gitcode.com/gh_mirrors/un/UndertaleModTool…...

编程新知 2026/3/26 17:27:37

三行六列16车位立体车库mcgs6.2仿真程序

三行六列16车位立体车库mcgs6.2仿真程序立体车库仿真程序最让人上头的就是运动逻辑设计。今天拆解一个三行六列布局的MCGS6.2项目&#xff0c;看看如何用脚本驱动16个车位的升降动画。注意这里的车位排布有点特殊——虽然看起来是3*6的矩阵&#xff0c;但实际有两处隐藏车位被改…...

编程新知 2026/3/26 17:27:37