【前端学习】D1:JavaScript入门


前言

这篇文章为我跟随pink老师重新系统学习前端时做的一些笔记。

1 编程语言

1.1 编程

编程:就是让计算机为解决某个问题而是用某种程序设计语言编写程序代码,并最终得到结果的过程。
计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
程序员:从事编程的人员。
上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机、ATM机、黑莓PI、服务器等。

1.2 计算机语言

计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介。
计算机语言的种类非常多,总的来说可以分成机器语言、汇编语言和高级语言三大类。
实际上计算机最终所执行的都是机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础。

1.3 编程语言

可以通过类似于人类语言的“语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming Language)。
编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。
如今通用的编程语言有两种形式:汇编语言和高级语言。

  • 汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
  • 高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

1.4 翻译器

高级语言所编制的程序不能直接北计算机识别,必须经过转换才能被执行,为此我们需要一个翻译器。
翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化。

1.5 编程语言和标记语言的区别

  • 编程语言有很强的逻辑和行为能力。在编程语言里,会有许多if else、for、while等具有逻辑性和行为能力的指令,这是主动的。
  • 标记语言(HTML)不用于项计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的,是被动的。

2 计算机基础

2.1 计算机组成

  • 计算机由硬件与软件构成。
  • 硬件由输入设备(鼠标、键盘、手写板、摄像头等)、输出设备(显示器、打印机、投影仪等)、CPU(负责处理数据与运算)、硬盘和内存(负责存储数据,硬盘永久存储数据,内存暂时存储数据)组成。
  • 软件可分为系统软件(操作系统)和应用软件。

2.2 数据存储

  1. 计算机内部使用二进制0和1表示数据。
  2. 所有数据,包括文件、图片等最终都是以二进制数据(0和1)的形式存放在硬盘中的。
  3. 所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时说的安装软件,其实就是把程序文件复制到硬盘中。
  4. 硬盘、内存都是保存的二进制数据。

2.3 数据存储单位

bit < Byte < KB < GB < TB < …

  • 位(bit):1 bit可以保存一个0或1(最小的存储单位)
  • 字节(Byte):1 B = 8 bit
  • 千字节(KB):1 KB = 8 B
  • 兆字节(Byte):1 MB = 8 KB
  • 吉字节(KB):1 GB = 8 MB
  • 太字节(Byte):1 TB = 8 GB

2.4 程序运行

  1. 打开某个程序时,先从硬盘中把程序的代码加载到内存中。
  2. CPU执行内存中的代码。

3 初识JavaScript

3.1 JavaScript历史

略。

3.2 JavaScript是什么

  • 世界上最流行的语言之一,是一种运行在客户端的脚本语言。
  • 脚本语言:不需要编译,运行过程中由JS解释器(JS引擎)逐行来进行解释并执行。
  • 现在也可以基于Node.js技术进行服务端编程。

3.3 JavaScript的作用

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

3.4 HTML/CSS/JS的关系

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

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

JS脚本语言——编程类语言

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

3.5 浏览器执行JS简介

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

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

3.6 JS的组成

  • ECMAScript:JavaScript语法
  • DOM:页面文档对象模型
  • BOM:浏览器对象模型
  1. ECMAScript:是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两者是ECMAScript语言的视线和扩展。ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
  2. DOM:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
  3. BOM:浏览器对象模型(Browser Object Model,简称BOM),提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。

3.7 JS初体验

JS有3种书写位置,分别为行内、内嵌和外部。

  1. 行内式JS
    <input type="button" value="点我试试" onclick="alert('Hello World')" />
    
    • 可以将单行或少量JS代码写在HTML标签的事件属性(以on开头的属性)中,如onclick
    • 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
    • 可读性差,在HTML中编写大量JS代码时,不方便阅读
    • 引号易错,引号多层嵌套匹配时,非常容易弄混
    • 特殊情况下使用
  2. 内嵌式JS
    <script>
    	alert('Hello World');
    </script>
    
    • 可以将多行JS代码写到<script>标签中
    • 内嵌式JS是学习时常用的方式
  3. 外部JS文件
    <script src="my.js"></script>
    
    • 利用HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
    • 引用外部JS文件的<script>标签中间不可以写代码
    • 适合于JS代码量较大的情况

3.8 JS注释

  1. 单行注释
// 单行注释 ctrl + /
  1. 多行注释
/*
   多行注释 默认快捷键:shift + alt + a / ctrl + shift + /
*/

3.9 JS输入输出语句

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

4 变量

4.1 什么是变量

变量是用于存放数据的容器。我们通过变量名获取数据,甚至可以修改数据。

4.2 变量在内存中的存储

本质:变量是程序在内存中申请的一块用来存放数据的空间。

4.3 变量的使用

变量在使用时分为两步:1. 声明变量; 2. 赋值

4.3.1 声明变量

var age;	// 声明一个名称为age的变量
age = 18;	// 赋值
console.log(age)	// 输出结果
  • var是一个JS关键字,用来声明变量(variable)。使用该关键字声明变量后,计算机会自动为变量分配内存空间。
  • age是定义的变量名,要通过变量名来访问内存中分配的空间。

JavaScript中let和var区别详解

4.3.2 赋值

age = 18;	// 赋值
console.log(age);	// 输出结果
  • =用来把右边的值赋给左边的变量空间中,此处代表赋值
  • 变量值是保存到变量空间的值

4.3.3 变量初始化

声明变量并赋值称之为变量的初始化。

var age = 18;
console.log(age);

4.3.4 案例

var name = prompt('请输入您的名字');	// 弹出输入框
alert(name);	// 弹出对话框

4.4 变量语法扩展

4.4.1 更新变量

一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。

var age = 18;
age = 81;

4.4.2 同时声明多个变量

同时声明多个变量时,只需要写一个var,多个变量名之间使用英文逗号隔开。

var age = 18, name = 'Alice', gender = 'Female';

4.4.3 声明变量的特殊情况

情况说明结果
var age; console.log(age)只声明,不赋值undefined
console.log(age)不声明,不赋值,直接使用报错
age = 10; console.log(age)不声明,只赋值10

4.5 变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成,如usrAge,num01,_name
  • 严格区分大小写。var app;和var App;是两个变量
  • 不能以数字开头。18age是错误的
  • 不能是关键字或保留字。例如var、for、while
  • 变量名必须有意义。nl --> age
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName
  • 推荐翻译网站:有道,爱词霸
  • 尽量不要直接使用name命名变量(在一些浏览器中name有含义,不声明不赋值时控制台直接打印为空,不报错)

4.6 交换两个变量的值

思路:使用一个临时中间变量。

var temp;	//声明了一个临时变量为空
var apple1 = '青苹果';
var apple2 = '金苹果';
temp = apple1;
apple2 = apple1;
apple1 = temp;
console.log(apple1);
console.log(apple2);

5 数据类型

5.1 为什么需要数据类型

在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
简单来说,数据类型就是数据的类别型号。比如姓名“张三”与年龄18的数据类型不一样。

5.2 变量的数据类型

变量是用来存储至的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定

// int num = 10;	// java
var num;	// 这里的num不确定属于哪种数据类型
var num = 10;	// num属于数字型
var str = 'pink';	// 字符串型

在代码运行时,变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的,运行完毕之后,变量就确定了数据类型。
JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型:

var x = 6;	// x为数字
var x = 'Bob';	// x为字符串

5.3 数据类型的分类

JS把数据类型分为两类

  • 简单数据类型(Number,String,Boolean,Undefined,Null)
  • 复杂数据类型(Object)

5.3.1 简单数据类型

简单数据类型说明默认值
Number数字型,包含整型值和浮点型值,如21、0.210
Boolean布尔值类型,如true、false,等价于1和0false
String字符串类型,如"张三"(JS中字符串都带引号)“”
Undefinedvar a; 声明了变量a但是没有赋值,此时a=undefinedundefine
Nullvar a = null; 声明了变量a为控制null

5.3.2 数字型Number

  1. 数字型进制
    最常见的进制有二进制、八进制、十进制、十六进制
    var num1 = 0b11;	// 数字前面加0b表示二进制
    console.log(num1);	// 0b11二进制转换为十进制就是3
    var num2 = 010;		// 数字前面加0表示八进制
    console.log(num2);	// 010八进制转换为十进制就是8
    var num3 = 0xa;		// 数字前面加0x表示十六进制
    console.log(num3);  // 0xa十六进制转换为十进制就是10
    
  2. 数字型范围
    console.log(Number.MAX_VALUE);	// 1.7976931348623157e+308
    console.log(Number.MIN_VALUE);	// 5e-324
    
  3. 数字型三个特殊值
    • Infinity,代表无穷大,大于任何数值
    • -Infinity,代表无穷小,小于任何数值
    • NaN,Not a Number,代表一个非数值
    console.log(Infinity);	// Infinity
    console.log(-Infinity);	// -Infinity
    console.log(NaN);		// NaN
    console.log('abc'-100);		// NaN
    
  4. isNaN()
    该方法用于判断一个变量是否为非数字的类型,并且返回一个值。如果是数字返回的是false,如果不是数字返回的是true。
    console.log(isNaN(100));	// false
    console.log(isNaN('abc');	//true
    

5.3.3 字符串型String

字符串型可以是引号中的任意文本,其语法为双引号""和单引号’'。因为HTML标签里面的属性使用的是双引号,JS这里更推荐使用单引号。

  1. 字符串引号嵌套
    JS可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)。
  2. 字符串转义符
    类似HTML里面的特殊字符,字符串中也有特殊字符,称之为转义符。转义符都是 \ 开头的,常用的转义符及其说明如下:
    转义符解释说明
    \n换行符,n是newline的意思
    \\,斜杠
    ',单引号
    "",双引号
    \ttab,缩进
    \b空格,b是blank的意思
  3. 字符串长度
    字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
    var str = 'my name is Alice';
    console.log(str.length);	// 16
    
  4. 字符串的拼接
    • 多个字符串之间可以使用+进行拼接,其拼接方式为字符串+任何类型=拼接之后的新字符串。
    • 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串。
    console.log('沙漠' + '骆驼');	// 沙漠骆驼
    console.log(13 + '时');	// '13时',字符串型
    console.log(true + '骆驼');	// 'true骆驼',字符串型
    console.log(13 + 13);	// 26,数字型
    console.log('13' + 13);	// '1313',字符串型
    
  5. 字符串拼接加强
    • 经常会将字符串和变量拼接,因为变量可以很方便地更新。
    • 变量是不能添加引号的,因为加引号的变量会变成字符串。
    var year = 2023;
    console.log('今年是year年');	// 今年是year年
    console.log('今年是' + year + '年');	// 今年是2023年
    

5.3.4 布尔型Boolean

  • 布尔类型有两个值:true和false,其中true表示真(对),而false表示假(错)。
  • 布尔型和数字型相加时,true的值为1,false的值为0。
var flag1 = true;
var flag2 = false;
console.log(flag1 + 1);	// 2
console.log(flag2 + 1);	// 1

5.3.5 Undefined和Null

  • 一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时,注意结果)。
  • 一个声明变量给null值,里面存的值为空。
var str;
console.log(str);	// undefined
var variable = undefined;
console.log(variable + 'abc');	// undefinedabc
console.log(variable + 1);	// NaN
var space = null;
console.log(space + 'abc');	// nullabc
console.log(space + 1);	// 1

5.4 获取变量数据类型

5.4.1 获取检测变量的数据类型

typeof可用来检测变量的数据类型

var num = 10;
console.log(typeof num);	// number
var str = 'abc';
console.log(typeof str);	// string
var flag = true;
console.log(typeof flag);	// boolean
var vari = undefined;
console.log(typeof vari);	// undefined
var timer = null;
console.log(typeof timer);	// object
var age = prompt('请输入您的年龄')
console.log(age);	// 20
console.log(typeof age);	// string

5.4.2 字面量

字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。

  • 数字字面量:8,9,10
  • 字符串字面量:‘abc’,‘def’
  • 布尔字面量:true,false

5.5 数据类型转换

5.5.1 什么是数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单地进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

5.5.2 转换为字符串

方式说明案例
toString();转成字符串var num = 1; console.log(num.toString());
String()强制转换转成字符串var num = 1; console.log(String(num));
加号拼接字符串和字符串拼接的结果都是字符串,隐式转换var num = 1; console.log(num + ‘’);

5.5.3 转换为数字型(*)

方式说明案例
parseInt(String)函数将String类型转换为整数数值型parseInt(‘78’)
parseFloat(String)函数将String类型转换为浮点数数值型parseFloat(‘78.21’)
Number()强制转换将String类型转换为数值型Number(‘12’)
JS隐式转换利用算术运算(-,*,/)隐式转换为数值型‘12’ - 0
console.log(parseInt('3.14'));	// 3
console.log(parseInt('3.94'));	// 3
console.log(parseInt('120px'));	// 120
console.log(parseInt('rem120px'));	// NaN
console.log(parseFloat('3.14'));	// 3.14
console.log(parseFloat('120px'));	// 120
console.log(parseFloat('rem120px'));	// NaN
console.log('123' - 0);	// 123
console.log('123' - '120');	// 3
console.log('123' * 1);	// 123

5.5.4 转换为布尔型

  • 代表空、否定的值会被转换为false,如’'、0、NaN、null、undefined
  • 其余值都会被转换为true
    | 方式 | 说明 | 案例 |
    | – | – | – |
    | Boolean()函数 | 其他类型转成布尔值 | Boolean(‘true’); |

5.6 扩展阅读

5.6.1 解释型语言和编译型语言

  1. 概述
    计算机不能直接理解任何除机器语言以外的语言,所以必须要把程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具,被称为翻译器。
    • 翻译器翻译的方式有两种:一个是编译,另一个是解释。两种方式之间的区别在于翻译的时间点不同。
    • 编译器是在代码执行之前进行编译,生成中间代码文件。
    • 解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行的时候,也称之为解释器)。
  2. 执行过程
    略。

5.6.2 标识符、关键字与保留字

  1. 标识符
    标识符:就是指开发人员为变量、属性、函数、参数取的名字。
    标识符不能是关键字或保留字。
  2. 关键字
    关键字:是指JS本身已经使用了的字,不能再用它们充当变量名、方法名。
    包括:break、case、catch、continue、default、dele、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。
  3. 保留字
    保留字:实际上就是预留的关键字,也不能用它们充当变量名、方法名。
    包括:boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。

6 总结

因为已经有了其他语言的基础,之前也写过一些JS代码片,所以目前觉得JS的学习难度不是很大。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值