初识JavaScript(变量、数据类型)


提示: 在JavaScript中,所有代码指令都会以分号结尾 ; 如果忘记加分号,你的单行代码可能执行正常,但是在多行代码在一起的时候就可能出错。所以,最好是养成主动以分号作为代码结尾的习惯。

一、计算机编程基础

1、编程语言

编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。

计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

注意:上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机、ATM机、黑莓PI、服务器等等。

计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介

计算机语言的种类非常的多,总的来说可以分成机器语言汇编语言高级语言三大类。

实际上计算机最终所执行的都是 机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础。

0 = 0000 00001 = 0000 00012 = 0000 00103 = 0000 00114 = 0000 0100
5 = 0000 01016 = 0000 01107 = 0000 01118 = 0000 10009 = 0000 1001

可以通过类似于人类语言的 ”语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言Programming Language)。
编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。
如今通用的编程语言有两种形式:汇编语言高级语言
汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。

C语言: puts("你好");
PHP: echo "你好";
JavaSystem.out.println("你好");
JavaScriptalert("你好";

高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个翻译器
翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化。 记住1和 0。
在这里插入图片描述
编程语言有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while等具有逻辑性和行为能力的指令,这是主动的。
标记语言html)不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。

2、计算机基础

在这里插入图片描述
数据存储

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

数据存储单位

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

程序运行

  • 打开某个程序时,先从硬盘中把程序的代码加载到内存中
  • CPU执行内存中的代码
  • 注意:之所以要内存的一个重要原因,是因为 cpu 运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所以,才使用存取速度更快的内存来保存运行时的数据。(内存是电,硬盘是机械)

二、初识JavaScript

1、初识JavaScript

  • 布兰登·艾奇(Brendan Eich,1961年~),神奇的大哥用10天完成 JavaScript 设计。最初命名为 LiveScript,后来在与 Sun 合作之后将其改名为 JavaScript
  • JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思)。
  • 脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行。现在也可以基于 Node.js 技术进行服务器端编程。

JavaScript的作用

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

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

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

JS 脚本语言–编程类语言

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

浏览器执行 JS 简介

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

JS组成
在这里插入图片描述

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

2、JavaScript书写位置

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

(1)行内式JS

  • <input type="button" value="唐伯虎" onclick="alert('秋香姐')">

  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick

  • 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

  • 可读性差, 在html中编写JS大量代码时,不方便阅读;

  • 引号易错,引号多层嵌套匹配时,非常容易弄混;

  • 特殊情况下使用

(2)内嵌JS

<script>
    alert('沙漠骆驼');
</script>
  • 可以将多行JS代码写到 <script> 标签中
  • 内嵌 JS 是学习时常用的方式

(3)外部JS文件

  • <script src="my.js"></script>
  • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style></style>
    <!-- 2.内嵌式的js -->
    <script>
        alert('沙漠骆驼');
    </script>
    <!-- 3. 外部js script 双标签 -->
    <script src="my.js"></script>
</head>

<body>
    <!-- 1. 行内式的js 直接写到元素的内部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>

</html>

3、JavaScript注释

(1)单行注释

  • // 我是单行注释

(2)多行注释

/*
	我是多行注释
	我是多行注释
	我是多行注释
*/

4、JavaScript输入输出语句

方法说明归属
alert(msg)浏览器弹出警示框浏览器
console.log(msg)浏览器控制台打印输出信息浏览器
prompt(info);浏览器弹出输入框,用户可以输入浏览器
  • alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。

三、变量

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

1、声明变量

  • var age;let age;(推荐使用)
  • var 与 let 的区别见详情

2、赋值

  • age = 30;

3、变量的初始化

  • let myName = 'Chris';
  • 声明一个变量并赋值, 我们称之为变量的初始化。
<script>
    // 1. 用户输入姓名  存储到一个 myname的变量里面
    let myname = prompt('请输入您的名字');
    // 2. 输出这个用户名
    alert(myname);
</script>

4、变量的语法扩展

  • 一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
<script>
   let myname = 'pink老师';
   console.log(myname);  //pink老师
   myname = '迪丽热巴';
   console.log(myname);  //迪丽热巴
</script>
  • 同时声明多个变量时,只需要写一个 let, 多个变量名之间使用英文逗号隔开。
<script>
    let age=10,myname,sex='女';
    console.log(age,myname,sex); // 10 undefined '女'
</script>
情况说明结果
let age;console.log(age);只声明,不赋值undefined
console.log(myAge);不声明,不赋值 ,直接使用报错 (myAge is not defined )
age = 10;console.log(age);不声明,只赋值10(未报错,但不推荐)

5、变量命名规范

  • 字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
  • 严格区分大小写var app;var App; 是两个变量
  • 不能 以数字开头18age 是错误的
  • 不能 是关键字、保留字。例如:varforwhile
  • 变量名必须有意义
  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
  • 推荐翻译网站: 有道 爱词霸

6、交换两个变量

<script>
    // js 是编程语言有很强的逻辑性在里面
    // 1. 我们需要一个临时变量帮我们
    // 2. 把apple1 给我们的临时变量 temp 
    // 3. 把apple2 里面的苹果给 apple1 
    // 4. 把临时变量里面的值 给 apple2 
    let temp; // 声明了一个临时变量为空
    let apple1 = '青苹果', apple2 = '红苹果';
    temp = apple1; // 把右边给左边
    apple1 = apple2;
    apple2 = temp;
    console.log(apple1);//红苹果
    console.log(apple2);//青苹果
</script>

四、数据类型

  • JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
  • JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型
 let a = 1;  //a为数字
 a = '书';   //a为字符串
  • JS 把数据类型分为两类: 简单数据类型Number,String,Boolean,Undefined,Null复杂数据类型object)

1、简单数据类型

简单数据类型说明默认值
Number数字型,包含整型值和浮点型值,如21、0.210
Boolean布尔值类型,如true、false,等价于1 和 0false
String字符串类型,如"张三",注意js里面,字符串都带引号""
Undefinedlet a;声明了变量 a,但是没有赋值,此时 a = undefinedundefined
Nulllet a = null; 声明了变量 a为空值null

(1)数字型Numeber

let a = 12; //a为整数
let b = 23.134; //a为小数

数字型进制

  • 最常见的进制有二进制、八进制、十进制、十六进制。
  • 现阶段我们只需要记住,在JS中八进制前面加0,十六进制前面加 0x
// 1.八进制数字序列范围:0~7
let num1 = 07;   // 对应十进制的7

// 2.十六进制数字序列范围:0~9以及A~F
let num = 0xA;  // 10

数字型范围

  • 最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
  • 最小值:Number.MIN_VALUE,这个值为:5e-32
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324

数字型三个特殊值

  • Infinity ,代表无穷大,大于任何数值
  • -Infinity ,代表无穷小,小于任何数值
  • NaN ,Not a number,代表一个非数值
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN

isNaN()

  • 用来判断一个变量是否为非数字的类型,返回 true 或者 false
  • isNaN(X) , X是数字,返回 false;X不是数字,返会 true
console.log(isNaN('andy')); // true,'andy'是一个非数字
console.log(isNaN(13)); // false,13不是一个非数字

(2)字符型String

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

字符串引号嵌套

  • JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)
let strMsg = '我是"高帅富"程序猿';   // 可以用''包含""; 我是"高帅富"程序猿
let strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''; 我是'高帅富'程序猿
//  常见错误
let badQuotes = 'What on earth?"; // 报错,不能 单双引号搭配

字符串转义符

转义符解释说明
\n换行符,n 是 newline 的意思
\\斜杠\
\''单引号
\""双引号
\ttab缩进
\b空格,b 是 blank 的意思

在这里插入图片描述

alert('酷热难耐,火辣的太阳底下,我挺拔的身姿,成为了最为独特的风景。\n 我审视四周,这里,是我的舞台,我就是天地间的王者。\n这一刻,我豪气冲天,终于大喊一声:"收破烂啦~"');

字符串长度

  • 字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
let strMsg = "我是帅气多金的程序猿!";
console.log(strMsg.length); // 显示 11
let strMsg1 = "hello world";
console.log(strMsg1.length); // 显示 11

字符串拼接

  • 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
// 字符串的拼接 + 只要有字符串和其他类型相拼接 
console.log('沙漠' + '骆驼'); // 字符串的 沙漠骆驼
console.log('pink老师' + 18); // 'pink老师18'
console.log('pink' + true); // pinktrue
console.log(12 + 12); // 24
console.log('12' + 12); // '1212'
console.log('12' + undefined); // '12undefined'
console.log('12' + null); // '12null'

字符串拼接加强

  • 我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值
  • 变量是不能添加引号的,因为加引号的变量会变成字符串
  • 如果变量两侧都有字符串拼接,口诀“引引加加 ”,删掉数字,变量写加中间
<script>
    console.log('pink老师' + 18); // pink老师18
    console.log('pink老师' + 18 + '岁'); //pink老师18岁
    
    let age = 19;
    console.log('pink老师age岁'); //pink老师age岁

    // 我们变量不要写到字符串里面,是通过和 字符串相连的方式实现的
    // 变量和字符串相连的口诀:  引引加加
    console.log('pink老师' + age + '岁'); //pink老师19岁
</script>

(3)布尔型Boolean

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

(4)Undefined 和 Null

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

2、获取变量数据类型

  • typeof 可用来获取变量的数据类型
let num = 18;
console.log(typeof num) // 结果 number      
类型结果
Stringtypeof "小白""string"
Numbertypeof 18"number"
Booleantypeof true"boolean"
Undefinedtypeof undefined"undefined"
Nulltypeof nullobject

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

  • 数字字面量:8, 9, 10
  • 字符串字面量:‘黑马程序员’, “大前端”
  • 布尔字面量:true,false

3、数据类型转换

(1)转换为字符串类型

  • 第一种:toString(),例:let num = 10; let str = num.toString();

  • 第二种:String(),强制转换,例:let num = 10;console.log(String(num));

  • 第三种:+拼接字符串,例:let num = 10;console.log(num + '');

  • toString()String() 使用方式不一样。

  • 三种转换方式,第三种加号拼接字符串转换方式, 也称之为隐式转换

(2)转换为数字型

  • 第一种:parseInt(string)函数,将string类型转换成整数数值型
  • 第二种:parseFloat(string)函数,将string类型转换成浮点数数值型
  • 第三种:Number()强制转换函数,将string类型转换成数值型
  • 第四种:js隐式转换( - * / ),利用算数运算隐式转换为数值型
  • 注意 :parseIntparseFloat 单词的大小写
  • 隐式转换是我们在进行算数运算的时候,JS 自动转换了数据类型
// 1. parseInt(变量)  可以把 字符型的转换为数字型 得到是整数
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('3.94')); // 3 取整
console.log(parseInt('120px')); // 120 会去掉这个px单位
console.log(parseInt('rem120px')); // NaN
// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN
// 3. 利用 Number(变量) 
let str = '123';
console.log(Number(str));// 123
console.log(Number('12'));// 12
// 4. 利用了算数运算 -  *  /  隐式转换
console.log('12' - 0); // 12
console.log('123' - '120');// 3
console.log('123' * 1);// 123
console.log('123' / 2);// 61.5

(3)转换为布尔型

  • Boolean()函数,其它类型转换成布尔型
  • 代表否定的值会被转换为 false ,如 ''、0、NaN、null、undefined
  • 其余值都会被转换为 true
<script>
    console.log(Boolean('')); // false
    console.log(Boolean(0)); // false
    console.log(Boolean(NaN)); // false
    console.log(Boolean(null)); // false
    console.log(Boolean(undefined)); // false
    console.log('------------------------------');
    console.log(Boolean('123'));// true
    console.log(Boolean('你好吗'));// true
    console.log(Boolean('我很好'));// true
    console.log(Boolean(12));// true
</script>

五、扩展

1、解释型语言和编译型语言

  • 翻译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译的时间点不同
  • 编译器是在代码执行之前进行编译,生成中间代码文件
  • 解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行的时候,也称之为解释器)
    在这里插入图片描述

2、标识符、关键字、保留字

  • 标识(zhi)符:就是指开发人员为变量、属性、函数、参数取的名字。
  • 标识符不能是关键字或保留字
  • 关键字:是指 JS本身已经使用了的字,不能再用它们充当变量名、方法名。
  • 关键字包括break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等
  • 保留字:实际上就是预留的“关键字”,意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名。
  • 保留字包括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 等。
  • 注意:如果将保留字用作变量名或函数名,那么除非将来的浏览器实现了该保留字,否则很可能收不到任何错误消息。当浏览器将其实现后,该单词将被看做关键字,如此将出现关键字错误。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值