JavaScript 的初步学习上篇

previewfile_1954523327

JavaScript 的介绍

JavaScript 之父布兰登 . 艾奇 (Brendan Eich) ,1995 年, 用 10 天时间完成 JavaScript 的设计.

JavaScript 和 Java 的关系

两者之间就像老婆和老婆饼的关系,即毫无关系, JavaScript 最初的名字叫LiveScript,为了蹭 Java 热度,才改名为 JavaScript.JavaScript 最初只是为了进行前端页面开发,后来 JavaScript 被赋予了更多的功能,可以用来开发桌面程序,手机app,服务器端的程序…

JavaScript 和 HTML 和 CSS 之间的关系

HTML: 网页的结构(骨), CSS: 网页的表现(皮), JavaScript: 网页的行为(魂)

冷知识,三者注释的区别: HTML: , CSS: /* */ ,JavaScript: //,/* */

JavaScript 的运行

JavaScript/JS 是运行在浏览器上的, 比如 chrome浏览器里面专门有一个模块,就是 JS引擎, 就相当于JVM一样,能够解释执行 JavaScript 代码.后来就有大神把这部分代码单独拎出来了,封装成独立的程序了,被称为V8引擎, js适用范围因此也就更广泛了.

编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)

JavaScript 的组成

ECMAScript(简称 ES): JavaScript 语法
DOM: DOM API 是浏览器给提供的操作页面元素的API, 对页面中的元素进行操作.
BOM: BOM是浏览器提供给JavaScript的另一组操作浏览器窗口的API,对浏览器窗口进行操作.

正式开始 JavaScript 的学习

JavaScript 代码可以通过 script 标签嵌入到 html 里面.

JavaScript 的三种书写形式

已弹出一个简单的“hello world”对话框为例.
注: alert('hello')浏览器提供的API,通过这个API,能弹出一个对话框,并显示alert中的内容.
小知识: 有些对话框一弹出来就会阻止用户操作界面的其他部分,叫做模态对话框.

1.行内式

直接嵌入到 html 元素内部

2.内嵌式

写到 script 标签中

示例代码

运行效果

3.外部式

写成一个单独的 .js 文件,让 html 引入过来

示例代码

运行效果

输出: 使用js里的console.log就可以在开发者模式的控制台打印日志,类似于java 中的println一样,也是非常有用的调试手段.
示例: console.log(“这是一条日志”);
注意: 在 VSCode 中直接输入 “log” ,再按 tab 键, 就可以快速输入 console.log

输入: prompt 弹出一个输入框.
示例: prompt(“请输入您的姓名:”);

JavaScript 中的变量

var 是 JavaScript中的关键字, 表示这是一个变量.

var 变量名 = 初始值;

注: js 定义变量不必写类型,不写类型不意味着"没有类型",而是变量的类型,是通过初始化操作的值来确定的.

示例:

旧式写法(有坑!)

var a = 10; a 就是 number 类型(js 不区分int和double,统一都叫做number).
var b = 'hello'; b就是 string 类型.

新式写法(强烈推荐!!!)

~~ 规则更接近C++, Java主流语言.

let a = 10;
let b = 'hello';

JS 中的动态类型

示例代码

运行结果

一个变量在程序运行过程中，类型可以发生改变. => 动态类型, 比如: JS,Python, PHP, Lua…
一个变量在程序运行过程中，类型不能发生改变．=> 静态类型, 比如: C语言,Java,C++,Go…

动态类型的好处

好处: 代码非常灵活.
比如,写一个函数,计算两个数字的和.
如果使用Java,写个两个int相加的版本,写个两个double相加的版本,写个两个 long相加的版本…
但是使用动态类型的语言,只需要写一个函数即可.

动态类型的坏处

坏处: 一个变量当下到底是什么类型,里面存了什么样的值，里面提供了哪些方法,哪些属性…都是不确定的

现实应用:

动态类型的语言,特别适合初创型公司,规模小,产品特别赶时间.
使用动态类型的语言就很合适了.

如果是规模更大,业务更稳定的公司了,团队人多,产品没那么赶时间,同时维护工作比较多,使用静态类型语言就更合适.
字节, b站，豆瓣，知乎…初创的时候使用Python这种动态类型的语言来开发的产品.后面公司达到一定规模了,就逐渐使用静态类型的语言重构(Java,Go…).

JS 的基本数据类型

JS 中内置的几种类型

number: 数字, 不区分整数和小数.
boolean: true 真, false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined, 表示未定义的值.
null: 只有唯一的值 null, 表示空值

undefined, null 是 JavaScript 特有的数据类型.

举例理解: 大一刚开学的时候辅导员发了个表格,让大家来填写信息.
表格有: 学号,姓名,性别,班级,专业……

有同学表示,这里少了个"电话"这样的列这种情况,"电话"就是undefined .但是如果表格上本来有“电话"这一列,但是我们纷纷都没填,此时,"电话"就是null.

别的语言中,如果访问到某个东西没有定义,就会直接报错的.
但是JS不会报错,而是返回个undefined ,即JS把别的语言认为非法的行为,合法化.

JS 的运算符

JavaScript 中的运算符和 Java 用法基本相同

算术运算符:

\+, -, *, /, %

赋值运算符 & 复合赋值运算符

= ,+=, *=,/=,%=

自增自减运算符

++: 自增1, --: 自减1

比较运算符

\>, <=, \>=,
== 比较相等(会进行隐式类型转换)
!=,!==
=== 比较相等(不会进行隐式类型转换)

代码示例

运行效果

注解: console.log(a == b);

这个代码中就触发了"隐式类型转换",在JS语法内部中有一套隐式类型转换规则,会针对不相同的类型进行比较/运算,会尝试尽可能的转成相同类型.

像Java这种,不太支持隐式类型转换的语言,称为"强类型"语言.
像JavaScript这种,比较能支持隐式类型转换的语言,称为"弱类型"语言.

业界的共识: 强类型比弱类型好!
类型强,相当于不同类型之间的区分度就高,编译器能做的检查工作就更多,代码出错的概率就降低了.

逻辑运算符

&& => 逻辑与: 一假则假
|| => 逻辑或: 一真则真
! => 逻辑非

位运算

& 按位与 , | 按位或
~ 按位取反, ^ 按位异或

移位运算

<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)

条件语句: if 语句

三元表达式: 条件 ? 表达式1 : 表达式2

switch 语句

循环语句: while 循环, for 循环

continue 结束这次循环 , break 结束整个循环

注: 这些与Java的语法规则是一样,博主就不做过多讲解了.

JS数组

创建数组

方式一(很少这么写):

let arr = new Array();

方式二,常用,JS 中适用[]来表示数组:

let arr = [];,let arr = [1,2,3,4];
let arr3 = [1, 'hello', true,[]];JS中,数组的元素类型不要求统—,可以是任意类型!这个事情,不仅仅JS如此,动态类型的语言都是如此.
底层: 站在C语言的视角,每个js 中的变量(对象)都有一个地址(唯一身份标识),数组说是存储元素,其实是存的对应的身份标识.身份标识都是统一格式的内容.在底层用一个C的数组来存储这些身份标识,在上层js 这里就相当于是保存不同对象了.

操作数组: 通过下标访问

使用下标的方式访问数组元素
示例1代码

运行结果

示例2代码

运行结果

示例3代码

运行结果

JS 的数组,不仅仅是一个传统意义的数组(只能按下标来取元素)而是一个带有"键值对"性质的东西了,不如理解成,数组+Map 的混血儿.此时,数组也能够按照 Map,键值对的方式来组织数据!!
很多动态类型的语言都是如此,比如PHP.
注: JS的更高版本的语法中(ES6),引入了专门的map来表示键值对.