掌握 JavaScript 的基本语法

一、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.hqwc.cn/news/156930.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【计算机网络】计算机网络中的基本概念

文章目录 局域网LAN基于网线直连基于集线器组建基于交换机组建基于交换机和路由器组建 广域网WANIP地址端口号协议为什么要有协议知名协议的默认端口 五元组协议分层TCP/IP五层模型封装和分用 网络互连就是将多台计算机连接在一起&#xff0c;完成数据共享。数据共享本质是网络…

【易售小程序项目】后端部署、Uniapp项目Web部署

文章目录 Uniapp项目Web打包部署为什么不部署小程序Web打包前对项目进行调整网站、小程序切换增加constant.js来控制常量将js绑定到main.js的全局变量中 WebSocket差异监听键盘呼出导航条打包部署 后端项目打包部署打包前准备打包部署 Uniapp项目Web打包部署 为什么不部署小程…

通过内网穿透快速搭建公网可访问的Spring Boot接口调试环境

文章目录 前言1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址…

idea 配置checkstyle全过程

checkstyle是提高代码质量,检查代码规范的很好用的一款工具&#xff0c;本文简单介绍一下集成的步骤&#xff0c;并提供一份完整的checkstyle的代码规范格式文件&#xff0c;以及常见的格式问题的解决方法。 一&#xff0c;安装 打开idea的文件选项&#xff0c;选择设置&…

恒驰服务 | 华为云数据使能专家服务offering之大数据建设

恒驰大数据服务主要针对客户在进行智能数据迁移的过程中&#xff0c;存在业务停机、数据丢失、迁移周期紧张、运维成本高等问题&#xff0c;通过为客户提供迁移调研、方案设计、迁移实施、迁移验收等服务内容&#xff0c;支撑客户实现快速稳定上云&#xff0c;有效降低时间成本…

wireshark捕获DNS

DNS解析&#xff1a; 过滤项输入dns&#xff1a; dns查询报文 应答报文&#xff1a; 事务id相同&#xff0c;flag里 QR字段1&#xff0c;表示响应&#xff0c;answers rrs变成了2. 并且响应报文多了Answers 再具体一点&#xff0c;得到解析出的ip地址&#xff08;最底下的add…

react-markdown支持83版本的Chrome,解决Object.hasOwn is not a function问题

旧版浏览器支持 react-markdown用了一个ES2022的api&#xff0c;Object.hasOwn测试的时候一切正常&#xff0c;当我切换到生成环境的旧版的83的Chrome之后&#xff0c;发现会报Object.hasOwn is not a function这个错误。 https://github.com/remarkjs/react-markdown/issues/…

21.12 Python 实现网站服务器

Web服务器本质上是一个提供Web服务的应用程序&#xff0c;运行在服务器上&#xff0c;用于处理HTTP请求和响应。它接收来自客户端&#xff08;通常是浏览器&#xff09;的HTTP请求&#xff0c;根据请求的URL、参数等信息生成HTTP响应&#xff0c;并将响应返回给客户端&#xff…

css图片保持比例and图片占满整个div

一、非背景图 ①保持宽度固定 img { width: 200px; height: auto; } ②保持高度固定 img { height: 300px; width: auto; } ③保持比例 /* 比例不变 */ img { max-width: 100%; height: auto; } /* 垂直居中 */ img { max-width: 100%; height: auto; display: block; margin:…

高等数学啃书汇总重难点(十)重积分

方法性的一章&#xff0c;看着唬人&#xff0c;实际上定积分学得熟练&#xff0c;就可以很轻松的掌握这一章的内容&#xff0c;重点在于计算各种坐标下的二重或三重积分~ 1.几何意义 2.定义 3.性质 4.直角坐标计算二重积分 5.极坐标计算二重积分 6.三重积分 7.重积分的应用

Qt 项目实战 | 俄罗斯方块

Qt 项目实战 | 俄罗斯方块 Qt 项目实战 | 俄罗斯方块游戏架构实现游戏逻辑游戏流程实现基本游戏功能设计小方块设计方块组添加游戏场景添加主函数 测试踩坑点1&#xff1a;rotate 失效踩坑点2&#xff1a;items 方法报错踩坑点3&#xff1a;setCodecForTr 失效踩坑点4&#xff…

Linux的账号管理

本章的学习感觉如果不做系统管理员&#xff0c;作为简单了解就可以了 前面介绍了&#xff0c;用户&#xff0c;组&#xff0c;other三个角色&#xff0c; 每个用户创建都会有uid与之对应&#xff0c;创建的用户基本信息在一下两个文件中&#xff0c;也是我们要介绍的内容&…