JavaScript从小白到专家的学习系列笔记（一）[通俗易懂]

云烟 • 2023年 8月 14日下午9:00 • 未分类 • 阅读 280

欢迎大家来到IT世界,在知识的湖畔探索吧!

1. 认识JavaScript

什么是JavaScript

web开发领域一种功能强大的前端编程语言，用于开发交互式的web页面。

Web页面是由多个网页组成的，网页制作涉及的技术：HTML、CSS和JavaScript。

HTML：代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。
CSS：代表了样式，样式是网页的外观，从审美的角度，美化页面。
JavaScript：代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。

JavaScript的历史

时间：1995年。

人物： Brendan Eich（布兰登·艾奇）。

地点： Netscape（网景）公司，现在的Mozilla。

事件：在网景浏览器上首次设计出了JavaScript。

名称： Netscape最初将这个脚本语言命名为LiveScript。

后来Netscape与Sun合作，因当时Java语言备受关注，Netscape为了营销将其改JavaScript（其实跟JAVA语言没任何关系）。

缺点：

JS一度遭人诟病：漂浮广告，弹窗，窃取用户网站信息，传播病毒

重新流行：

当AJAX兴起，浏览器可以和服务器异步交互，JS体验得到极大提升，再度火热，已不局限于浏览器前端使用了（Node.js使得开发人员可以服务器端编写JS代码）

JavaScript的特点

脚本语言

简单地说就是一条条的文本命令，按照程序流程执行。

如常见的脚本语言：JavaScript、VBScript、Perl、PHP、Python；

而常见非脚本语言：C、C++、Java等。

脚本语言与非脚本语言的区别：

非脚本语言一般需要编译、链接，生成独立的可执行文件后才能运行。

脚本语言依赖于解释器，只在被调用时自动进行解释或编译。

跨平台

JavaScript语言不依赖操作系统，仅需要浏览器的支持。几乎所有的浏览器，包括手机等各类移动设备都支持。

支持面向对象

面向对象是软件开发中的一种重要的编程思想，其优点非常多。

基于面向对象思想诞生了许多优秀的库和框架，可以使JavaScript开发变得快捷和高效，降低了开发成本。举例：除了经典的JavaScript库，又诞生了Bootstrap、AngularJS、Vue.js、Backbone.js、React、Wwebpack等框架和工具。

JavaScript与ECMAScript的关系

ECMAScript指的是Ecma（欧洲计算机制造协会）发布的浏览器脚本语言的标准。

JavaScript是网景公司在Navigator 2.0浏览器中内置的脚本语言。

它们是实现与标准的关系。

2. 开发工具

浏览器–用于执行和调试JS代码

代码编辑器--开发JS工具

常用的文本编辑器Notepad++即可开发js程序；

这里推荐用IDE（集成开发环境）：HBuilder X，集开发和运行于一体（去官网下载APP开发版）。

案例：第一个JS程序（JS脚本代码嵌入到宿主语言html中）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<script>
    alert("第一个JavaScript程序");
</script>
</head>
</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

3. JavaScript快速入门

JavaScript引入方式

嵌入式

欢迎大家来到IT世界,在知识的湖畔探索吧!<script type="text/javascript">
 
JavaScript语句;
 
</script>

外链式

JavaScript代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用<script>标签的src属性引入文件中：

HTML文件：
 ……
<script src="js/test.js"></script>
……
js/test.js文件：
……
alert('Hello');
……

相比嵌入式，外链式的优势：

嵌入式会导致HTML与JavaScript代码混合在一起，不利用修改和维护。
嵌入式会增加HTML文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存提高速度。
外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上，利用CDN的优势加快下载速度。

行内式

将JavaScript代码作为HTML标签的属性值使用。

欢迎大家来到IT世界,在知识的湖畔探索吧!e.g:
 
<a href="javascript:alert('Hello');">test</a>

注：

1）由于现代网页开发提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码，故避免直接用行内式，建议外链式。

2）html文件引用JS代码

存在的问题：引入JavaScript代码时，页面的下载和渲染都会暂停，等待脚本执行完成后才会继续（内嵌式或外链式）。

解决的办法1：对于不需要提前执行的代码，将<script>标签放在<body>标签的底部，可以减少对整个页面下载的影响。

解决的办法2：可用HTML5为<script>标签新增的两个可选属性：async和defer。

// 方式一：async
<script src="http://js.test/file.js" async></script>
// 方式二：defer
<script src="http://js.test/file.js" defer></script>
async异步加载，即先下载文件，不阻塞其他代码执行，下载完成后再执行。
defer用于延后执行，即先下载文件，直到网页加载完成后再执行。
共同点：即使文件下载失败，也不会阻塞后面的JavaScript代码执行。

常用输出语句

alert()：页面弹出警告框

console.log()：浏览器控制台日志输出，不会显示到html页面

document.write()：html页面输出

注释

单行：//
多行： /* */

数据与运算

数学运算
比较大小（数字、字符串）
字符串保存数据
字符串与数字的拼接
流程结构（顺序、选择、循环、跳出）
变量保存数据

函数

封装一段功能单一的代码实现复用

自定义函数

function sum(a, b) {
var c = a + b;
return c;
}
alert(sum(11,22));

对象

对象用途：面向对象的编程

常用内置对象：

window， document， String

事件

指可以被JS侦测到的交互行为：在网页中滑动，点击鼠标，滚动屏幕。敲击键盘等

事件绑定JS代码，实现网页交互效果：
<input type = "button" onclick = "alert("hello");" value = "test">

案例：验证用户输入的用户名和密码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>验证用户输入的密码</title>
  <script>
    var password = prompt('请输入密码：');
    if (password == '000000') {
         alert('password is success!');
     } else {
        alert('password is not correct!!!');
     }
  </script>
</head>
<body></body>
</html>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/22902.html