〖大前端 - 基础入门三大核心之JS篇②〗- 掌握 Javascrip 的基础语法

最新推荐文章于 2024-06-20 20:20:21 发布

哈哥撩编程

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量2.1w

点赞数 9

分类专栏： # ① - 基础入门三大核心篇大前端全栈架构白宝书文章标签： javascript 开发语言大前端前端基础入门掌握JavaScript语法

易编橙 · 终身成长社群，相遇已是上上签！

本文链接： https://blog.csdn.net/weixin_42250835/article/details/129950103

版权

大前端全栈架构白宝书同时被 2 个专栏收录

101 篇文章 112 订阅

订阅专栏

① - 基础入门三大核心篇

98 篇文章 42 订阅

订阅专栏

当前子专栏基础入门三大核心篇是免费开放阶段。推荐他人订阅，可获取扣除平台费用后的35%收益，文末名片加V！
说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费开放，购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。
福利：除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外，还可以通过加入星荐官共赢计划加入私域社区。

作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 跨域学习者，从事过全栈研发、产品经理等工作，目前任某金融品类App负责人。
荣誉：2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师，“星荐官共赢计划” 发起人。
现象级专栏《白宝书系列》作者，文章知识点浅显易懂且不失深度；TFS-CLUB社区创立者，旨在以“赋能共赢”推动共建技术人成长共同体。

🏆 白宝书系列
🏅 Python全栈白宝书
🏅 产品思维训练白宝书
🏅 全域运营实战白宝书
🏅 大前端全栈架构白宝书

文章目录

⭐️ JavaScript的书写位置
⭐️ 编写第一行JavaScrip代码
⭐️ JavaScript的注释
⭐️ 输出语句
- 🌟 弹出警告框语句——alert()
- 🌟 控制台输出语句——console.log()
⭐️ 处理报错
⭐️ 扩展——REPL环境

在上一章节，我们了解了 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！学会使用控制台是每个程序员的必备技能！

哈哥撩编程

关注关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
10
评论
〖大前端 - 基础入门三大核心之JS篇②〗- 掌握 Javascrip 的基础语法

在上一章节，我们了解了 JavaScript 的前世今生，对其知识体系、语言风格与特性都有了一定的了解，那么该章节我们就来尝试掌握 Javascrip 的基础语法吧。
复制链接

扫一扫