- 当前子专栏 基础入门三大核心篇 是免费开放阶段。推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V!
- 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
- 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐官共赢计划 加入私域社区。
- 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,目前任某金融品类App负责人。
- 荣誉:2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师,“星荐官共赢计划” 发起人。
- 现象级专栏《白宝书系列》作者,文章知识点浅显易懂且不失深度;TFS-CLUB社区创立者,旨在以“赋能 共赢”推动共建技术人成长共同体。
- 🏆 白宝书系列
文章目录
在上一章节,我们了解了 JavaScript 的前世今生,对其知识体系、语言风格与特性都有了一定的了解,那么该章节我们就来尝试掌握 Javascrip 的基础语法吧。
⭐️ JavaScript的书写位置
JavaScript的书写位置有两种:
第一种
,<body>标签
中的<script>标签
内部书写的就是JavaScript代码
。第二种
,将代码单独保存为".js格式文件"
,然后再HTML文件中使用<script src=""></script>
这样的形式引入它
在初期学习时,因为没有接触 NodeJS ,我们的js脚本是不能脱离HTML网页独立运行的。后期学习了 NodeJS 之后,NodeJS 将成为 JavaScript 独立的运行平台
。
⭐️ 编写第一行JavaScrip代码
首先新建一个项目–>新建一个HTML文件–>生成HTML骨架
然后在body标签对中书写<script></script>
标签对
- 书写script标签对,
在HTML4中,需要加上type属性
,属性值是text/javascript
- 在基本都是
HTML5了,type属性可以省略不写
在html4中的写法:
再然后可以在<script></script>
标签对中书写javascript脚本了,就是将JavaScrip代码写在HTML文件中,比如弹出一个警告框的脚本如下:
<script>
alert('hello JavaScript!');
</script>
第二种是写在.js文件中,然后在html文件中引入 "xxxx.js文件"
, 文件内容如下:
alert('你好 JavaScript!');
尝试在 "xxxx.html文件"
中引入 "xxxx.js文件"
,示例如下:
<!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>Document</title>
</head>
<body>
<script src="myjs.js"></script>
</body>
</html>
浏览HTML文件时的效果和第一种写法是一样的:
⭐️ JavaScript的注释
JavaScript注释的语法:
-
单行注释——前面加两条斜杠
-
多行注释——用/**/包裹
//这是一条单行javascript的注释
alert('hello');
/*
多行注释
。。。。
。。。。。。
/*
⭐️ 输出语句
输出语句:将计算机内部的一些程序、变量等输出出来,显示到屏幕上。
下面这两个输出语句非常常用:
弹出警告框:alert()
控制台输出:console.log()
🌟 弹出警告框语句——alert()
上面的例子中已经用到看这个语句
alert()语句的语法(一定要严格按照语法写):
。
alert()语句的功能就:浏览器遇到alert()语句就会中断程序的执行,并弹出一个警告框,直到用户点击了“确定”,才能继续往下执行。
下面看个例子:
示例代码:
<body>
<script>
alert('你好,JavaScript!');
alert('子曰,这是一个alert');
</script>
</body>
浏览网页时的效果如下:
🌟 控制台输出语句——console.log()
console.log()在调试javascript脚本时经常会用到。
console.log()语句的语法:
“对象”、“方法”、“函数“在后面还会详细的讲解。大家知道大概的区别就好。
console.log()语句的功能:在控制台—>console面板中输出日志语句。
下面看个例子:
示例代码:
<body>
<script>
console.log('这是一个console.log');
console.log('console.log()在调试js脚本时经常使用');
</script>
</body>
浏览网页时打开控制台(按F12) ——> 进入console面板,可以看到console.log()输出的内容:
注意:console.log()语句是不会中断程序的运行的,只会在console面板打印出日志。
⭐️ 处理报错
如果程序有报错,在
控制台->console面板中会提示报错信息
。我们要学会看报错信息。
下面直接看报错的例子:
这个例子报的是”语法“错误,就是语句的语法没有写对:如符号写成了中文。
我们可以看到控制台->console面板中提示的报错信息非常的详细。在工作中,我们要习惯打开控制台来观察报错信息。
再看一个例子:
这个例子报的是”引用“错误,因为字符串没有被引号包裹,程序处理时将这个字符串识别成了”变量“,而变量是必须被定义的,才报了这个错误。
⭐️ 扩展——REPL环境
REPL代表read(读)、eval(执行)、print(打印)、loop(循环)
REPL环境可以实现先读程序->再执行程序->再打印输出结果->再循环执行的环境
控制台是一个REPL环境,可以使用它临时测试表达式的值。
下面看个例子:
写在最后:
不要怕有BUG,在工作中,我们有差不多一半的时间再寻找和解决BUG!学会使用控制台是每个程序员的必备技能!