掌握 JavaScript 的基本语法

news2025/2/23 22:59:20

一、javascript书写位置

JavaScript 可以写在 HTML 页面中的以下三个位置:

  1. 内联脚本:将 JavaScript 代码直接写在 HTML 元素的 onclickonloadonsubmit 等事件属性中。例如:

  2. <button onclick="alert('Hello World')">点击我</button>
    

  3. &lt;script> 标签:将 JavaScript 代码写在 &lt;script> 标签中,可以放在 HTML 页面的 &lt;head>&lt;body> 中。例如:

    <!-- 放在 head 中 -->
    <head>
      <script>
        function sayHello() {
          alert('Hello World');
        }
      </script>
    </head>
    
    <!-- 放在 body 中 -->
    <body>
      <script>
        console.log('Hello World');
      </script>
    </body>
    

  4. 外部文件:将 JavaScript 代码写在外部文件中,以 .js 后缀保存,并在 HTML 页面中通过 &lt;script> 标签引用。例如:

    <head>
      <script src="main.js"></script>
    </head>
    

     二、JavaScript 注释

注释是JavaScript代码中用于解释说明的文本,它不会被浏览器执行。注释能够帮助程序员了解代码的意图和实现方法,方便日后代码的修改和维护。

JavaScript支持两种注释方式:

1、单行注释

单行注释以//开头,可在一行的任何位置使用,表示该行代码后的所有内容都将被忽略。

例如:

// 这是一个单行注释
console.log("Hello, world!"); // 这也是一个单行注释

2、多行注释

多行注释以/开始,以/结束,可以跨越多行,表示这之间的所有内容都将被忽略。

例如:

/*
这是一个多行注释
这里可以写多行注释的内容
*/
console.log("Hello, world!"); // 这是一行正常的代码

注:注释中不能套用注释,即使多行注释中有单行注释,也会被当作普通文本处理。

三、alert 语句

JavaScript alert语句用于显示一个弹出式窗口,通常用于向用户提供消息或提示。在弹出式窗口中将显示一条消息,并在用户单击“确定”按钮时关闭该窗口。

alert()语句的语法很简单:

alert("这里是要显示的文本");

其中,要显示的文本必须放在引号中。例如:

alert("欢迎来到JavaScript世界!");

在用户单击弹出窗口中的“确定”按钮之前,脚本将停止执行。

下面是一个alert()语句的基本示例:

<!DOCTYPE html>
<html>
<body>

<script>
alert("这是一条重要的消息!");
</script>

</body>
</html>

代码执行时,将在页面上弹出一个消息框,其中包含一条消息文本“这是一条重要的消息!”,如下图所示:

在实际的项目中,可以使用alert()语句向用户提供错误消息、验证消息、系统状态等信息。

需要注意的是,alert()语句的使用频率应尽量减少,因为它会中断JavaScript程序的执行。如果您需要经常向用户提供消息,请考虑使用其他更友好的UI组件,如模态框、弹出菜单或通知面板。

四、prompt 语句

prompt()是JavaScript中的一种对话框,它用于向用户提供输入框,接收用户输入的值,并返回该值。下面是一些常见的用法:

1.提示用户输入内容,并返回该内容。

var name = prompt("请输入你的名字");
console.log(name);

2.提示用户输入内容,同时设置默认值,如果用户不输入任何内容,则返回默认值。

 var name = prompt("请输入你的名字", "Tom");
 console.log(name);

3.提示用户输入内容,并限制输入字符数。

var msg = prompt("请输入你的留言(不超过20个字符)");
if(msg.length > 20) {
   alert("留言超过20个字符");
} else {
   console.log(msg);
}

需要注意的是,用户输入的值始终是字符串类型,如果需要其他类型,则需要进行类型转换。

下面是一个完整的代码示例:

var age = prompt("请输入你的年龄");
if(age === null) {
   // 用户点击了取消按钮
   alert("你取消了输入");
} else if(isNaN(parseInt(age))) {
   // 用户输入的不是数字
   alert("请输入数字");
} else {
   // 用户输入了数字
   age = parseInt(age);
   if(age >= 18) {
      alert("你已经成年了");
   } else {
      alert("你还未成年");
   }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1159225.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

测试遇到bug怎么分析,这可能是我看到最专业的总结了!

为什么定位问题如此重要&#xff1f; 可以明确一个问题是不是真的“bug” 很多时候&#xff0c;我们找到了问题的原因&#xff0c;结果发现这根本不是bug。原因明确&#xff0c;误报就会降低多个系统交互&#xff0c;可以明确指出是哪个系统的缺陷&#xff0c;防止“踢皮球”&…

前端如何不变形的渲染图片大小和图片上的内容

在做前端项目时可能经常会页面图片大小变形或者压缩的情况&#xff0c;一般情况就是height给100%&#xff0c;width给auto就可以了满足大部分使用情况了。有时候需要做一些比较复杂的功能&#xff0c;比如需要在图片上增加锚点&#xff0c;而且图片在适配各种屏幕大小时&#x…

Win11右键没有新建文件夹怎么办

1、按下键盘winr打开运行功能&#xff0c;输入regedit&#xff0c;按下回车&#xff0c;打开注册表编辑器。 2、然后在打开的注册表编辑器窗口&#xff0c;我们展开HKEY_CLASSES_ROOT。 3、接下来我们在HKEY_CLASSES_ROOT展开项中找到&#xff1a;Directory&#xff0c;再依次展…

自动驾驶算法(一):Dijkstra算法讲解与代码实现

目录 0 本节关键词&#xff1a;栅格地图、算法、路径规划 1 Dijkstra算法详解 2 Dijkstra代码详解 0 本节关键词&#xff1a;栅格地图、算法、路径规划 1 Dijkstra算法详解 用于图中寻找最短路径。节点是地点&#xff0c;边是权重。 从起点开始逐步扩展&#xff0c;每一步为一…

MacOS安装homebrew

文章目录 官网脚本无法正常下载安装使用HomebrewCN国内安装脚本进行安装找到一份合适的安装脚步执行安装脚本 Homebrew自己的安装位置使用Homebrew安装tree指令验证安装是否成功Homebrew把软件程序都安装到哪里了 Homebrew安装需要依赖Git&#xff0c;请先确保Git已安装成功 Ho…

烧脑玄幻小说,情节超乎想象,深陷其中无法自拔,快来一探究竟

《时空穿越守则》 这本小说讲述了一个主角穿越不同世界&#xff0c;通过积攒点数提升技能&#xff0c;并带回物资发家致富的故事。主角的穿梭能力让他可以在不同的世界中自如穿梭&#xff0c;这种独特的设定和故事情节让人耳目一新。 《惊悚乐园》 这部作品堪称封神之作&#x…

「免费活动」敏捷武林上海站 | 与 Scrum.org CEO 面对面

活动介绍 过去的几年里&#xff0c;外界的风云变幻为我们的生活增添了一些不一样的色彩。在VUCA世界的浪潮里&#xff0c;每一个人都成为自己生活里的冒险家。面对每一次的变化&#xff0c;勇于探索未知&#xff0c;迎接挑战&#xff0c;努力追逐更好的自己。 七月&#xff0…

NI USB-4431对标国产化4路同步采集卡解决方案

102.4 kS/s , 100 dB , 0.8 Hz AC/DC耦合&#xff0c;4输入/单输出声音与振动设备 USB-4431专为声音和振动应用而设计。输入通道集成了用于加速度计和麦克风的集成电路压电式(IEPE)信号调理功能。四个USB-4431的输入通道可同步对输入信号进行数字化。模拟输出(AO)通道是激励响…

vue2+ant-design-vue a-form-model组件二次封装(form表单组件)FormModel 表单

一、效果图 二、参数配置 1、代码示例 <t-antd-form:ref-obj.sync"formOpts.ref":formOpts"formOpts":widthSize"1":labelCol"{ span:2}":wrapperCol"{ span:22}"handleEvent"handleEvent" />2. 配置参数…

【ROS系列】坐标系转换介绍和对齐

一、坐标系简介 本篇文章介绍&#xff1a;ECEF、ENU、UTM、WGS-84坐标系&#xff08;LLA) 1.1、ECEF坐标系 ECEF坐标系也叫地心地固直角坐标系。 原点&#xff1a;地球的质心&#xff0c; x轴&#xff1a;原点延伸通过本初子午线&#xff08;0度经度&#xff09;和赤道&am…

MySQL数据库干货_16—— SQL99标准中的查询

SQL99标准中的查询 MySQL5.7 支持部分的SQL99 标准。 SQL99中的交叉连接(CROSS JOIN) 示例&#xff1a; 使用交叉连接查询 employees 表与 departments 表。 select * from employees cross join departments;SQL99中的自然连接(NATURAL JOIN) 自然连接 连接只能发生在两…

软考中项集成如何画图?计算题怎么考的?

2023下半年软考集成一共考6个批次&#xff0c;10月28日、29日软考集成考了第一、二、三、四批次&#xff0c;11月4日软考集成再考第五批和第六批。 先说一下通过10.28-29得出的软考机考注意事项&#xff1a; 1、草稿纸不能自带&#xff0c;考试现场会发放草稿纸&#xff0c;草…

大数据信息抽取

随着互联网的广泛应用和技术的不断进步&#xff0c;海量数据被产生、存储和共享。这些数据中包含着宝贵的的信息和知识&#xff0c;二大数据信息抽取是正是为了把这些数据中关键、有用的信息提取出来。 大数据信息抽取就是指通过自动化的方式&#xff0c;从大数据中提取有异议…

政务服务技能竞赛中用到的软件和硬件

政务服务技能竞赛包括争上游、抢先机、秀风采、比擂台几个环节&#xff0c;用到选手端平板、评委端平板、主持人平板、抢答器等设备、抢答器等。分别计算团队分和个人分。答题规则和计分方案均较为复杂&#xff0c;一般竞赛软件无法实现&#xff0c;要用到高端竞赛软件&#xf…

【数据结构】顺序表:简单而实用(比较水

前言 最近开始学习数据结构 就重新拾起写博客的习惯 来记录一下 今天就来学一下顺序表和链表 小提示&#xff1a;引用的部分可看可不看 以及 这篇文章使用的是C语言 引入&#xff1a;线性表 在学习顺序表之前 我们先来了解一下线性表 线性表&#xff08;linear list&#xf…

2023-2024-1 高级语言程序设计-函数

6-1 求m到n之和 本题要求实现一个计算m~n&#xff08;m<n&#xff09;之间所有整数的和的简单函数。 函数接口定义&#xff1a; int sum( int m, int n ); 其中m和n是用户传入的参数&#xff0c;保证有m<n。函数返回的是m~n之间所有整数的和。 裁判测试程序样例&…

模板引擎技术---FreeMarker

什么是模板引擎 模板引擎是一种用于生成动态内容的工具&#xff0c;它将数据和静态模板结合起来&#xff0c;生成最终的文档&#xff08;通常是HTML、XML、JSON等格式&#xff09;&#xff0c;这些文档可以被浏览器或其他客户端解析并展示给用户。模板引擎的主要目的是将数据和…

jquery变焦放大效果

实现效果&#xff1a; jquery变焦放大效果,一般商城网站的商品都会有这样的效果&#xff0c;点击或者鼠标放在图片上时&#xff0c;会展示出一个比较大的图片&#xff0c;让我们对商品观看的更清楚&#xff0c;青柠资源网推荐下载&#xff01; 下载地址 qnziyw点cn/wysc/wytx…

自动化测试实战篇:UI自动化测试用例管理平台搭建

用到的工具&#xff1a;python3 django2 mysql RabbitMQ celery selenium python3和selenium这个网上很多教程&#xff0c;我不在这一一说明&#xff1b; 平台功能介绍&#xff1a; 项目管理&#xff1a;用于管理项目。每个项目可以设置多个环境&#xff0c;例如开发环境…

2023年11月1日蜻蜓C影视追剧系统v1.2.2更新-与时俱进调整微信登录授权获取方式-修复无法登陆授权

2023年11月1日蜻蜓C影视追剧系统v1.2.2更新-与时俱进调整微信登录授权获取方式-修复无法登陆授权 问题背景&#xff1a; 小程序用户头像昵称获取规则调整公告官方 微信团队2022-05-09 更新时间&#xff1a;2022年11月9日 由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问…