2022-07-11 第十组 Myy 学习笔记_JavaScript

JavaScript

 

JavaScript（JS）

编程语言，脚本语言。依赖于某种容器来运行。浏览器来解释执行。

 

 

编程语言的分类 

1.解释型：JS Python 

2.编译型：C++ C#

3.半解释半编译：Java

 

JS是运行在浏览器上的，可以帮助我们去控制页面。

JS的框架：vue.js react.js jQuery.js angular.js

node.js前端的服务器语言

 

 

JS解释器

火狐：spidermonkey

谷歌chrome、node：v8

苹果safari：JavaScriptcore

edge：chakra

 

JS可以在哪里执行？写在网页的什么位置？

JS是给网页加功能的

JS放在结束body标签的上方

外部引入JS和使用外部：script

 

 

 

跟路径有关的标签url、herf、src之间的区别

 1.url(uniform resource locator)   统一资源定位符

url是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

url是互联网上标准资源的地址，≈“地址”，不是属性。

url语法规则:
    scheme://host.domain:port/path/filename

　　    - scheme - 定义因特网服务的类型,最常见的类型是 http
　　    - host - 定义域主机（http的默认主机是www）
　　    - domain - 定义因特网域名，比如 w3school.com.cn
　　    - port - 定义主机上的端口号（http的默认端口号是80）
　　    - path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）
　　    - filename - 定义文档/资源的名称 

2.href(hypertext reference) 超文本引用

href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。若在文档中添加 ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。

 

href用来建立与网络资源的联系，让当前标签能够链接到目标地址。

 

常见于:
  //相对地址
　　<link rel="stylesheet" type="text/css" href="theme.css"/>
　　　　* href 规定被链接文档的位置。 
　　　　* rel 规定当前文档与被链接文档之间的关系。
  //绝对地址
　　<a href="http://www.w3school.com.cn">W3School</a>
  //锚点链接
　　<a href="#" onclick="return false"></a>
　　　　* href 规定链接指向的页面的 URL。 

3.src(source) 嵌入当前资源到当前文档元素定义的位置

src指向外部资源的位置，在请求src 资源时会将其指向的资源下载并应用到当前文档元素定义的位置(替换当前内容)。在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。

src用来替换当前元素

 

常见于：
　　<script type="text/javascript" src="js/tools.js"></script>
　　　　* src 规定外部脚本文件的 URL。
　　<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
　　　　* src 规定显示图像的 URL。

 

JS的简单数据类型

1.数字（number）：整数、正数、小数、负数

2.字符串（string）：英文、中文、符号

3.布尔型（Boolean）：true false

4.空（null）：相当于声明了值为空

5.undefined：未定义，没有值

 

 

定义变量

变量：开发中尽量减少使用字面量，否则后期出现维护困难的问题

 

在ES6中（JS的新版本）中，新推出了两个词来代替var

1.let：变量用let声明，无法重复定义的

2.const：有let的特点，const声明的变量就是一个常量，不可修改

 

 

JS的复杂数据类型

1.数组：一个变量对应多个值

（1）使用数组函数ch03

 

 

⭐函数（方法）：定义一个函数，用来执行一系列代码。

函数定义后不会自己使用，需要我们自己手动调用函数

函数类型：无参无返回值，无参有返回值，有参有返回值，有参无返回值

函数内部不可以再声明函数，但是可以调用函数。调用方式和正常调用方式相同。

return除了可以返回结果，还可以终止函数的执行。开发中尽量不要在return后面继续写语句。

 

 

 

弹窗：实质上就是函数 \n换行符，弹窗里的换行

1.alert：警告弹窗

2.confirm：带有确定和取消的弹窗，有返回值。确定返回ture，取消返回false

3.prompt：带有文本框的弹窗，有返回值，就是文本框输入的内容。

 

逻辑判断，流程控制 

夹杂着去说运算符

JS的一个原理解析：

所有的非空的变量都会被解析成1->true

 

三元运算符（三目运算符）

语法是是固定的，只能由一个条件，两个选项

 

 

+号的特殊性

+号除了做加法之外，还有连接符的作用。

如果先入为主的认为+号为连接符，那它就一直是连接符，

- * / % 可以进行类型转换，如果转不了，运行结果为NaN

 

 

 

 

逻辑判断

1、if...else结构

语法：if（条件表达式）{

要执行的代码；

}else{

要执行的代码；}

if...else结构和多重if结构有什么区别？

if...else结构中，if和else后面的语句是具有互补互斥关系的。

多重if结构中，每个if后面的语句是可以没关系的。

if...else是可以嵌套的，可以无限嵌套。原则上不要超过三层。

 

2.switch...case结构

语法：

switch（表达式）{

case 选项1：

要执行的代码；

case 选项2：

要执行的代码；

......

default :（除上述选项外的所有情况）

要执行的代码；

}

 

当表达式的值在case中匹配成功，会执行对应的代码，但是停不下来，后面的代码会继续执行。

 

这两种结构如何选择呢？

1.当需求为区间范围时，switch...case根本无法使用

2.if...else基本上啥都能干

3.switch...case的效率很高

4.当需求为固定值，且值不多，switch...case

5.能用switch...case解决的，不要用if...else

 

相似之处

1.几乎所有的switch...case都可以转化为if...else

2.default几乎相当于else

3.case几乎相当于if

4.都可以无限嵌套

 

不同之处

1.switch需要break

2.switch里面的选项可以杂乱无章

 

()[]{}的意思

1.[]有两个用途，一是声明数组时使用，表示数组的长度，例如int a = new int[5],声明了长度为5的数组。
二是在正则表达式中，表示一个范围，例如：[a-z]表示取值在小写a到小写z之间copy
2.{}是一个语句体，他是一段程序的边界，

 

作业小练习

 

 

 

 

总结回顾：

1.JS的引入，应该写在什么位置

2.JS的数据类型（数组）

3.变量的定义和声明 var let const

4.三种弹窗

5.函数

6.return的作用

7.变量的作用域

8.运算符

9.typeof isNaN

10.三元运算符（无限个表达式，两个选项）

11.流程控制语句，两个流程控制之间的互相配合嵌套关系