JavaScript | 介绍以及简单运行
zhezhongyun 2024-12-01 19:23 34 浏览
上一期讲了下安装环境，这一期就打算讲讲怎么运行，哪里运行，输入输出等知识。
我简单的整理了下更新计划，可能后面还会更新不在这里面的，或者你觉得有补充需要更新的，欢迎随时来讲讲。
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript。截至2012年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为ECMAScript 2015，但通常被称为ECMAScript 6或者ES2015。
以上就是百度百科对JavaScript的解释，其实在我看来，他最初就是个脚本语言，用来在浏览器运行的，但是随着时间，他不仅仅在浏览器执行了。比如它可以在桌面端运行，可以在服务端运行，可以手机app运行。我们也可以用来做爬虫，做深度学习等等。简直太多了！！！他也是一个弱语言，不像Java等语言是强语言，需要类型约束啥的。当然，如果想用JavaScript强类型语言，那么可以直接使用TypeScript，这个是JavaScript的超集，简单理解就是为JavaScript做了类型约束了。
我们通常开发编译的时候，基本上都是在上一期讲的vscode中运行编译的，里面各种计算呀，输入输出之类的。比如我们简单的举个栗子：
我们也可以在浏览器执行，打开浏览器，按下F12打开控制台，或者按下FN+F12打开控制台，同样我们也是执行上面的栗子，可以看待error就是红色的，warn就是橙色的：
我们可以执行prompt('请输入姓名！')，看看运行结果。
我们也可以在输入框输入文字，然后确定，他就会打印出来我们输入的文字。
同样我们可以执行alert('姓名：orange') ，可以看到弹出来了一个提示框，就是我们的内容。
代码基本上都是一行一行写的，如果你很多逻辑代码放在一行，会报错，除非你在一个完整的逻辑后面加上分号;，注意，这个分号也是英文！！！！举个栗子：
// 推荐的正常写法const name = 'orange'console.log(name)// 写一行const name = 'orange';console.log(name)// 错误的写法，这个里面就是没有分号，代码认不出来的，就会报错const name = 'orange'console.log(name)JavaScript执行是同步的，从上往下执行，什么是同步？同步就是一行一行代码执行，但是上一行代码执行的时间过长，不会影响下面的代码。当然也有异步，等待上一行代码执行完毕后在继续执行后面的代码，这个就后面再说。
以上的代码我会上传至代码仓库。为了方便下载，没有基础的小白不清楚什么是git。就不放在GitHub或者gitee上面了。直接放在个人博客。
- 上一篇：CSS基础
- 下一篇：JavaScript简介
相关推荐
- 饿了么面试官:实现一下 Element-UI 官网的主题切换动画!
-
最近看到ElementPlus官网上的切换主题方式非常有趣，这是一个过渡的动画效果所以在网上查了一番，找到基本的实现方法实现基本效果首先我们起一个html文件，写一个按钮，以及简单的背景颜色切...
- 强大而好用的选择器:focus-within
-
伪类和伪元素在开发网页样式中，选择器必不可少，而且选择器也是在开发css中非常重要的内容，包括常用的类选择器，id选择，同时还有伪类，伪类选择器最大的特点就是冒号开头。平时也经常会有小伙伴问到，在使用...
- 令程序员惊叹的一些CSS3效果库
-
还在寻找那些CSS3的效果库吗？如果你的答案是肯定的，并且目前没有找到，那么你一定不能错过小编为大家收集的这些CSS3效果库，这是一个令你兴奋的集合！最新的CSS3都配备了新的特性，来设计创建动画和互...
- 伪元素黑魔法:一个替代onerror解决图片加载失败的方案
-
问题的引出是这样的，在一个项目中有大量的页面主体是table做数据展示，所以就封装了一个table的组件，提供动态渲染的方案。有个问题是数据类型中有图片，对于图片的加载失败我们需要做容错。一般我们的思...
- 前端 - 如何通过CSS修改图片透明度
-
如果在图片上显示文字，经常会遇到这个情况，就是当文字和背景颜色差不多时，文字会看不清楚，我们一般通过给文字加textshadow或者修改图片的透明度来让文字显示更加突出。我们今天说一下透明度的问题，...
- CSS元素居中方法完全指南
-
这里是工作狂的聚集地职场学术新媒体设计极客专门治愈处女座强迫症。本文为CSS入门翻译redman9原载CSS-Trick人们经常抱怨在CSS中居中元素的问题，其实这个问题并不复杂，只是因为方法众...
- CSS图像 hover 动画效果
-
点击页底“阅读原文”下载原码CSSHover在网页设计中是极为常用的一个CSS效果，只要你有创造力，都可以让Hover变得更多姿多彩，今天我们主要分享40多款使用CSSHOVER完成...
- 前端能限制用户截图吗?
-
摘要：在某些业务场景下，保护屏幕信息的私密性，防止用户随意截图分享，成为了前端开发者的一个棘手需求。但浏览器和操作系统的设计，真的允许网页开发者完全掌控用户的截图行为吗？本文将深入探讨前端限制截图的...
- 每天一个CSS小技巧 - 不规则投影
-
当我们想给一个矩形或者其他能用border-radius生成的形状加投影时，box-shadow的表现都很棒的。但是，当元素添加可一些伪元素或半透明的装饰之后，border-radius会无视这些。这...
- Web开发中10个有用的免费CSS代码
-
在本文中主要展示了在Web开发中一些免费但是非常有用的代码，开发人员可以下载它们来简化工作流程。在这个集合中的所有代码都是经过精挑细选的，对于开发人员来说非常有用。在开发一个网站时，这些代码将节省大量...
- 什么是伪类和伪元素?两者有什么区别?单一冒号和双冒号有何不同
-
https://juejin.im/post/5df1e312f265da33d039d06d?utm_source=bigezhang.com#comment伪类伪类存在的意义是为了通过选择器找到那...
- CSS2与CSS3中常用的伪类汇总大全
-
CSS2与CSS3中有非常多的伪类，可以用于实现各种强大的、酷炫的功能。有用于选择标签状态的，如：a:linka:hoverinput:checkedinput:focus等；也有用于根据结构选...
- 实用!这8个CSS工具可以提升编程速度
-
作为网页设计师，为了在预期的时间内能完成项目，前期肯定是要进行大量练习的。但是如果你花了大量的时间在编写CSS代码上，那无疑是浪费时间。工欲善其事必先利其器，聪明的设计师善于利用工具提升他们的编码效率...
- 《丝路传说怀旧版》宠物融合丹:属性加成与技能继承要点
-
在《丝路传说怀旧版》中，宠物融合丹是优化宠物属性与技能的核心道具，其使用需结合技能继承规则、品质提升机制及资源规划策略。以下是关键要点分析一、属性加成机制品质提升与属性增长品质阶梯：宠物分为白、绿、蓝...
- Python 3.14 t-string 要来了，它与 f-string 有何不同?
-
Python最近出了个大新闻：PEP-750t-string语法被正式采纳了！这意味着Python将在今年10月发布的3.14版本中引入一种新的字符串前缀t，称为模板字符串（Tem...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)