1-JavaScript简介

JavaScript简介

JavaScript是什么

JavaScipt是运行在客户端(浏览器)上的一种编程语言(脚本语言)

注:脚本语言:不需要编译,运行过程中由js解释器逐行解释并且执行

现在也可以基于node.js技术进行服务器编程

浏览器分成两部分∶渲染引擎和JS引擎

  • 渲染引擎︰用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
  • JS引擎∶也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8 浏览器本身并不会执行IS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。

JavaScript的作用

  • 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • App(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

JavaScript的组成

JavaScript 包括 ECMAScriptWebAPI ( DOMBOM)

  • ECMAScript:JavaScript 的语法标准。包括变量、表达式、运算符、函数、if 语句、for 语句等。

  • DOM:Document Object Model(文档对象模型),JS 操作页面上的元素(标签)的 API。比如让盒子移动、变色、改变大小、轮播图等等。

  • BOM:Browser Object Model(浏览器对象模型),JS 操作浏览器部分功能的 API。通过 BOM 可以操作浏览器窗口,比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

    通俗理解就是:ECMAScript 是 JS 的语法;DOM 和 BOM 是浏览器运行环境为 JS 提供的 API。

HTML/CSS/JS 的关系

HTML/CSS 标记语言–描述类语言

  • HTML 决定网页结构和内容( 决定看到什么 ),相当于人的身体
  • CSS 决定网页呈现给用户的模样( 决定好不好看 ), 相当于给人穿衣服、化妆

JS 脚本语言–编程类语言

  • 实现业务逻辑和页面控制( 决定功能 ),相当于人的各种动作

JS入门

JS的引入位置

JS 代码的书写位置在哪里呢?这个问题,也可以理解成:引入 JS 代码,有哪几种方式?有三种方式:(和 CSS 的引入方式类似)

方式1:行内式
<input type="button" value="点我点我" onclick="alert('this is 方式1')" />

解释:

  • 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中(以 on 开头的属性),比如放在上面的 onclick点击事件中。
  • 这种书写方式,不推荐使用,原因是:可读性差,尤其是需要编写大量 JS 代码时,很难维护;引号多层嵌套时,也容易出错。
  • 关于代码中的「引号」,在 HTML 标签中,我们推荐使用双引号,JS 中推荐使用单引号。
方式2:内嵌式(内联式)

我们可以在 HTML 页面的 <body> 标签里放入<script type=”text/javascript”></script>标签对,并在<script>里书写 JavaScript 代码:

<script type="text/javascript">
      // 在这里写 js 代码
      alert('this is 方式2');
      console.log('this is 方式2');
</script>

解释:

  • tyue属性中的text 表示纯文本,因为 JavaScript 代码本身就是纯文本。当然,type属性可以省略,因为 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
  • 可以将多行 JS 代码写到 <script> 标签中。
  • 内嵌式 JS 是学习时常用的书写方式。
方式3:外链式(引入独立的JS文件)

新建一个demo.js

alert('this is out js file')

在html文档中像css引入样式文件一样引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 外链式:引入外部的 js 文件:这个 demo.js 文件与当前的 html 文件,处于同一级目录 否则要写相对路径-->
    <script src="demo.js"></script>
  </body>
</html>

解释:

  • 上面这段代码,依然是放到 body 标签里,可以和内嵌的 JS 代码并列。
  • 上方代码的 script 标签已经引入了外部 JS 文件,所以这个标签里面,不可以再写 JS 代码。
  • 方式2和方式3不能混用。

我们在实战开发中,基本都是采用方式 3,因为将 html 文件和 js 文件分开的方式,有利于代码的结构化和复用,符合高内聚、低耦合的思想。很少会有人把一大堆 JS 代码塞到 单个 html 文件里。

扩展知识

window.onload:先加载,最后执行

上面的三种方式,有个共同的地方是:JS 代码都是写在 body 标签中的,准确来说,是在页面标签元素(比如 title 标签)的后面,在 </body>结束标签的前面。

为什么一般是按这样的顺序来写呢?这是因为:浏览器默认遵循HTML文档的加载顺序,即按照从上至下的加载顺序解析网页(这句话很重要)。所以,通常情况下,我们会把JS代码写在 body 内部的末尾。

然而,当你需要通过 JS 来操作界面上的标签元素时,假如将 JS 代码或者<script>标签写到<head>标签中,或者写在HTML标签元素的前面,那么这样的 JS 是无效的,因为标签元素在此时都还没来得及加载,自然无法操作这个元素。

重点来了:当你需要通过 JS 来操作界面上的标签元素时,如果实在想把 JS 写到<head>标签中,那么就必须用 window.onload 将 JS 代码进行包裹。代码格式如下:

<head>
  window.onload = function(){
    // 这里可以写操作界面元素的JS代码,等页面加载完毕后再执行。这里面的JS代码,会延迟执行。
    ...
  }
</head>

window.onload 的含义是:等界面上所有内容都加载完毕后(不仅要等文本加载完毕,而且要等图片也要加载完毕),再执行window.onload 内部的代码。做到了先加载,最后执行,也就是:延迟执行,等页面加载完毕后再执行。我们可以根据具体需要来决定,将 window.onload 写在 <head>标签中,或者写在<script>标签中。

<noscript> 标签:浏览器不支持JS脚本时的降级方案

<noscript> 标签是一种HTML标签,用于提供在浏览器禁用JavaScript或无法执行JavaScript脚本时的替代内容。它允开发者在需要时向用户显示备用内容。这有助于提高网站的可访问性和用户体验。

如果有些浏览器不支持 JS 脚本,或者用户禁用了浏览器的JS脚本(如下图),那么,该如何给用户提供一个友好的提示呢?我们可以通过 <noscript> 标签作为降级的处理方案。

<noscript>
  <!-- 降级方案:这里放置备用内容,当浏览器禁用 JS 或者浏览器不支持 JS 时将显示 -->
  <p>请启用JavaScript以获得最佳网站体验。</p>
</noscript>

说明:

  • <noscript> 标签内部可以包含任何HTML内容,通常包括用于向用户传达信息或提供备用功能的文本、图像、链接等。
  • <noscript> 标签的内容仅在浏览器不支持或禁用 JS 的情况下才会显示。换而言之,如果用户的浏览器支持JS脚本,则<noscript> 标签里的内容将无法显示,会被忽略;如果用户的浏览器不支持JS脚本(或者关闭了JS脚本),则会显示<noscript> 标签的内容

JS简单语法规则

注释

注释:即解释、注解。注释有利于提高代码的可读性,且有利于程序员之间的沟通和工作交接。

注释可以用来解释某一段代码的功能和作用;通过注释,还可以补充代码中未体现出来的部分。代码只是开发工作的结果,注释可以阐述开发工作的过程、思路、注意事项,以及踩过的坑。

注释可以是任何文字,可以写中文。

我们不要把 HTML、CSS、JavaScript 三者的注释格式搞混淆了

HTML 的注释

<!-- 我是 HTML 注释  -->

CSS注释

/* 我是 CSS 注释 */

JavaScript注释

单行注释:
// 我是注释
多行注释:(写法1)
/*
 多行注释1
 多行注释2
*/
多行注释:(写法2)
/**
 * 多行注释1
 * 多行注释2
 */

VS Code 中,单行注释的快捷键是「Ctrl + /」,多行注释的默认快捷键是「Alt + Shift + A」。

当然,如果你觉得多行注释的默认快捷键不方便,我们还可以修改默认快捷键。操作如下:

VS Code --> 首选项 --> 键盘快捷方式 --> 查找“注释”这两个字 --> 将原来的快捷键修改为其他的快捷键,比如「Ctrl + Shift + /」。

文档注释(JSDoc)

JSDoc 是 JavaScript 中用于文档注释的一种标准化格式。写完 JSDoc 的注释之后,再通过相关工具,开发者便可以为函数、方法、类和变量等添加注释,以便生成可读性强的API文档

/**
 * 这是一个示例函数,用于求两个数字的和。
 * @param {number} num1 - 第一个数字
 * @param {number} num2 - 第二个数字
 * @returns {number} - 两个数字的和
 */
function sum(num1, num2) {
  return num1 + num2;
}

换行以及大小写

  1. JS 对换行、缩进、空格不敏感。每一条语句以分号结尾。

  2. 每一条语句末尾建议加上分号

    当存在换行符(line break)时,大多数情况下可以省略分号,JavaScript 会将换行符理解成“隐式”的分号,进而自动添加分号。

    也就是说,分号不是必须加的,如果不写分号,浏览器会在换行符的位置自动添加分号,但是会消耗一些系统资源和性能,甚至有可能添加错误,导致一些奇怪的bug。

  3. 所有的符号都是英文的,比如括号、引号、分号。

  4. JS 严格区分大小写。HTML和CSS不区分大小写,但是 JS 严格区分大小写。

输入输出语句

为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:

方法说明归属
alert(msg);浏览器弹出警示框浏览器
console.log(msg);浏览器控制台打印输出信息浏览器
prompt(info);浏览看弹出输入框,用户可以输入浏览器
alert()

如果写了两个 alert()语句,则网页的效果是:弹出第一个警告框,点击确定后,继续弹出第二个警告框。

补充:该方法只能传入一个参数。

console.log()

用于在浏览器的控制台中输出信息,里面可以传入一个或多个参数,常用于代码调试和测试。console 表示“控制台”,log 表示“输出”。括号里可以写字符串、数字、变量、表达式等。

alert() 主要用来显示消息给用户,console.log() 用来给程序员做调试用。

confirm()

弹窗上有“确认”和“取消”两个按钮,点击“确定”返回 true,点击“取消”返回 false

prompt()

prompt()就是专门弹出能够让用户输入内容的对话框。用得少,测试的时候偶尔会用。

alert()和 prompt()的区别:

  • alert() 语句中可以输出数字和字符串,如果要输出字符串,则必须用引号括起来;prompt()语句中,用户不管输入什么内容,都是字符串。
  • prompt() 会返回用户输入的内容。我们可以用一个变量,来接收用户输入的内容。
document.write()

该方法的作用是向网页中写入文本内容,可以是 HTML 代码。传入的参数可以是一个或者多个字符串。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值