哪有时间学JavaScript ①JS入门

yanqiu12138

已于 2022-12-01 08:56:06 修改

阅读量181

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-11-25 23:32:31 首次发布

本文链接：https://blog.csdn.net/yanqiu12138/article/details/128042839

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本栏学习笔记通过尚硅谷JavaScript基础&实战总结

一何为JavaScript

1.1 JavaScript的起源

JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。后端程序也可以进行这些验证，但你要清楚，当时网速是非常慢的，向后端发送一个请求，浏览器很久才能得到响应，那这无疑是一种非常不好的用户体验。

为了解决前端验证的问题，当时的浏览器巨头NetScape（网景）公司就开发出一种脚本语言，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。

在1996年，微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。

网景最先将JavaScript作为草案提交给欧洲计算机制造商协会，也就是ECMA组织，为了确保不同浏览器运行的JavaScript版本一致，制定了JS的标准名ECMAScript。
因为Java是SUN的商标，SUN授权了NetScape可以叫JavaScript，但是ECMA没有SUN的授权就不能叫JavaScript，ECMAScript这个名字就定下来。

1.2 JavaScript的组成

ECMAScript是一个标准，而这个标准需要由各个厂商去实现，不同的浏览器厂商对该标准会有不同的实现。
不同厂商对ECMAScript标准的实现方式

一个完整的JavaScript实现应该由以下三个部分构成：

①ECMAScript——JS标准
②DOM——如何通过JS操作网页
③BOM——如何通过JS操作浏览器

1.3 特点

①解释型语言

JavaScript是一门解释型语言，所谓解释型语言是指不需要被编译为机器码（二进制）再执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。

②动态语言

JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JavaScript可能是运行速度最快的动态语言了。

③类似于 C 和 Java 的语法结构

JavaScript的语法结构与C和Java很像，向for、if、while等语句和Java的基本上是一模一样的。所以有过C和Java基础的同学学习起来会轻松很多。不过JavaScript和与Java的关系也仅仅是看起来像而已。

④基于原型的面向对象

JavaScript是一门面向对象的语言。

Java也是一门面向对象的语言，但是与Java不同JavaScript是基于原型的面向对象语言。

二开始编写JavaScript

2.1编写方式

2.1.1 直接编写

在HTML中在script标签中就可以编写JavaScript代码

    <script>
        // 填入JS代码
    </script>

2.1.2 引用编写

在JS文件中编写JavaScript代码，然后在HTML文件中使用script标签进行引用

    <script src="yanqiu.js"></script>
    <!-- 引用yanqiu.js -->

这种编写方式可以被多次引用，方便维护，推荐使用；
但是此时该标签内部编写代码失效，如需编写要另起一个<script>

2.1.3 属性编写

可以将JS编写到按钮的onclick属性标签、超链接的href等中，当点击是会执行JS代码。

<body>
    <button onclick="alert('yanqiu');">点我一下</button>
    <!-- 弹出窗口输出 -->
    <a href="javascript:alert('what a beautiful language');">点我</a>
    <!-- 弹出窗口输出 -->
    <a href="javascript:alert;">也点我一下</a> 
    <!-- 点完无反应 -->
</body>

注意：在双引号中使用单引号。超链接中需加javascript:
这种写法属于结构与行为耦合，不方便代码的维护，故不建议

2.2 JavaScript的输出

2.2.1 页面输出

在<body>中写内容

	<script>
    	document.write("Hello,World!");
	</script>

在这里插入图片描述

2.2.2 控制台输出

浏览器按F12弹出控制台

	<script>
    	console.log("输出一条日志/内容");//最常用
    	console.info("输出一条信息");
    	console.warn("输出一条警告");
    	console.error("输出一条错误");
	</script>

在这里插入图片描述

2.2.3 弹出窗口输出

    <script>
        alert("雁丘");
    </script>

在这里插入图片描述

2.3 提供返回值的输出

prompt函数会弹出一个文本框，用户可以在文本框输入字符串，返回一个String类型

    <script>
        var day = prompt("你学了几天JavaScript：");
    </script>

三基本语法

3.1 JavaScript的注释

注释中的内容不会被解析器解析执行，但是会在源码中显示，我们一般会使用注释对程序中的内容进行解释。

3.1.1 单行注释

// 注释内容

<script>
    // 这是注释内容
</script>

3.1.2 多行注释

/* 注释内容 */或者

<script>
    /*
     这是注释内容
     */
	 <!-- 这是注释内容 -->
</script>

3.2 语句语法

3.2.1 分号

实际编写中如果没有写分号会自动添加，但会消耗一部分系统资源
有些时候浏览器会加错分号

3.2.2 分隔符

JS会忽略空格符、分行符，所以可以用空格符、分行符美化代码

四关于vscode中出现Code language not supported or defined的解决方式

vscode下载
①安装Code Runner扩展

②“文件”-＞“首选项”-＞“设置”；搜索“Code-runner:Executor Map”，点击“在setting.json中编辑”；
在这里插入图片描述

③找到“code-runner.executorMap”的位置，添加你自己电脑上chorme的安装位置，如：
【“html”:““C:\ProgramFiles\Google\Chrome\Application\chrome.exe””,】
注意是两个/与平时的位置表示略有不同
另外观察是否有【“javascript”: “node”,】，没有就添上，有就不用；
在这里插入图片描述