JavaScript基础

JavaScript的使用:

行内:

使用范围:

特殊情况下使用

特点:

1)可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性)

2)注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

3)可读性差, 在html中编写JS大量代码时,不方便阅读

4)引号易错,引号多层嵌套匹配时,非常容易弄混

举例:

<1>JS代码展示

javascript 复制代码
 <input type="button" value="点击" onclick="alert('hello world!')"/>

<2>完整代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <input type="button" value="点击" onclick="alert('hello world!')"/>
</body>
</html>

外嵌:

使用范围:

内嵌 JS 是学习时常用的方式

可以将多行JS代码写到 <script> 标签中

举例:

<1>js代码

javascript 复制代码
<script>
      alert('hello world')
   </script>

<2>完整代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script>
      alert('hello world')
   </script>
</body>
</html>

外部:

特点:

1)利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用

2)引用外部 JS文件的 script 标签中间不可以写代码

3)适合于JS 代码量比较大的情况

举例:

<1>js代码

javascript 复制代码
alert('hello world')

<2>完整代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script src="text.js"></script>
</body>
</html>

JavaScript的注释:

JavaScript的注释方式和C/C++是一样的
单行注释:

适用范围:仅能注释一行

javascript 复制代码
//注释的内容
多行注释:

适用范围:可以一行也可以多行

javascript 复制代码
/*注释的内容*/

JavaScript的输入输出流:

|-------------------|-----------------|
| 代码 | 说明 |
| alert('内容') | 浏览器弹出警示框 |
| console.log('内容') | 浏览器控制台打印输出信息 |
| prompt(info) | 浏览器弹出输入框,用户可以输入 |

相关推荐
程序员大阳11 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
新*14 小时前
从一段 WebSocket 代码聊开:bytes 不是 zlib、binaryType 决定一切,15MB 大消息的零拷贝优化
javascript·python·websocket·性能优化·blob·zlib·arraybuffer
David猪大卫14 小时前
【C++修炼】map 和 set 的使用
c语言·开发语言·数据结构·c++·经验分享·笔记·学习
OpsEye14 小时前
别再挨个充会员了:多模型编码,最麻烦的从来不是选模型
javascript·ai编程
fengci.16 小时前
CTF2MISC中等部分
开发语言·前端·学习
学以智用16 小时前
jsencrypt.js 完整详解
javascript
xys_67817 小时前
JavaEE通关手册:初识Java
java·开发语言
ShineWinsu18 小时前
对于Qt:QTableWidget常见属性以及QTableWidgetItem类的解析
开发语言·c++·qt·gui·客户端·表格·qtablewidget
Hilaku19 小时前
你们公司有 35 岁以上的前端吗?
前端·javascript·程序员
鸿蒙开发19 小时前
小程序存档写到一半怎么办?双槽保存与损坏恢复实战
前端·javascript·react.js