javascript编程基本知识:JavaScript从小白到专家的学习系列笔记

首页综合资讯正文人气:124 ℃时间:2023-10-09 14:43:23

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>

3. JavaScript快速入门

JavaScript引入方式

  • 嵌入式

<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标签的属性值使用。

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>

为您推荐