JavaScript（一）

程序员文章站 2022-06-18 16:13:39

一、JavaScript简介 1.1网页分层 web前端一共分三层：结构层 HTML ：负责搭建页面结构样式层 CSS ：负责页面的美观行为层 JavaScript ：负责页面的交互效果，提高用户体验如果用舞台来进行比喻： HTML 是演员：div，a CSS 是化妆师：负责给每个演员 ......

一、javascript简介

1.1网页分层

web前端一共分三层：

结构层 html ：负责搭建页面结构

样式层 css ：负责页面的美观

行为层 javascript ：负责页面的交互效果，提高用户体验

如果用舞台来进行比喻：

html 是演员：div，a

css 是化妆师：负责给每个演员添加装饰效果

javascript是剧本：负责描述每个演员之间的交互

1.2 javascript诞生

javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html网页上使用，用来给html网页增加动态效果。js在web浏览器端的地位，无人可以撼动；

【作用】：数据验证、读写html元素、前后台数据交互、网页交互效果、web游戏制作、桌面应用开发（electron）、基于node.js技术服务器端开发。

javscript，jscript，actionscript等脚本语言都是基于ecmascript标准实现的。

在javascript，jscript和actionscript中声明变量，操作数组等语法完全一样，因为它们都是ecmascript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。

javascript是由ecmascript，dom和bom三者组成的。

JavaScript（一）

ecmascript是一种标准，描述了该语言的语法和基本对象。

文档对象模型（document object model简称dom），描述处理网页内容的方法和接口。

浏览器对象模型（browser object model简称bom），描述与浏览器进行交互的方法和接口。

简单来说ecmascript不是一门语言，而是一个标准。ecmascript是javascript的标准，现在我们学习的版本的ecmascript4、5。

ecmascript在2015年6月，发布了ecmascript 6版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。这些新的特性。

1.3总结

学习：语言核心、dom、bom、页面特效

ecmascript 是javascript语言的标准

dom 通过javascript操作网页元素

bom 通过api（应用程序接口）操作浏览器

1.4学习方法

● 要多去“品”程序，多去思考内在逻辑，读懂每一行代码！

● js机械重复性的劳动几乎为0，基本都是创造性的劳动。html、css都是重复的劳动，margin、padding挤来挤去。

● 永远不要背程序，每一个程序都必须自己会写。

好学的点是什么：

javascript是有界面效果：不像c语言，黑底白字，很枯燥的。

javascript的语法来源于c和java：有c和java的经验同学好学很多。

javascript是弱变量类型的语言，动态数据类型语言。

javascript运行在宿主环境中，不关心内存，垃圾回收。

不好学的点是什么：

兼容性问题： ie8是个怪胎，很多东西都不一样，所以就要写兼容写法，不怕造*，多写几遍

花式写法很多，抽象：从简单入手，细细品味代码

二、javascript基本语法

2.1 javascript书写位置

这事儿吧，挺有意思，就是学习任何的语言，我们都喜欢在屏幕上直接输出一点什么，当做最简单、最基本的案例。输出什么大家随意，但是很多人都习惯输出“hello world”，世界你好。感觉自己很有情怀的样子。

alert("hello world!");

</script>

初学者在学习js时，一般将js代码写在html结构中，书写位置在一对script标签内。标签书写位置可以是html结构中的任意位置。

type属性：规定的是标签内部书写的是纯文本类型的js代码。

2.2注释

html的注释：

css的注释：

/*css注释*/

js注释：多行注释、单行注释

单行注释：注释作用范围只有一行，如果换行了那么不能注释。

//这是单行注释

多行注释：

这是js的块级注释

可以注释多行

这些注释不会进行加载

注释快捷键：

ctrl+/ 单行注释

ctrl+shift+/ 多行注释

alert()语句

实际上这条语句，在运行一个内置函数，运行函数就要加圆括号，不要纠结这个对象，学所有语言，都是从模仿开始，前期，不要纠结语法的机理是什么，只要模仿，做就行，你模仿了，就能实现效果，随着课程的深入，你将知道每一条语句的机理是什么。

alert("内容");

window.alert("hello world！");

alert()其实是window对象的一个方法，只不过window对象可以不写而已。

程序从上到下执行，从左到右顺序执行，任何程序都是这样的。

语句要遵循语法。

alert()作为一个函数，自定义的内容加引号，单双引号都可以，所有符号都必须是英文的（js建议用单引号，html用双引号，这是不成文的规定）。

注意事项：分号不写就报错。

alert("从前有坐上")alert("山上有座庙")

JavaScript（一）

如果正确换行不会报错。

alert("从前有坐上")

alert("山上有座庙")

alert("庙里有个老和尚")

原因：js解析器在解读代码时，会去根据语境的结尾划分语句，如果有分号自动默认是语句的结束，会将后面的语句作为一条新语句解读。如果没有分号，解析器*的解读代码结尾，默认为换行是一条语句的结尾，没有换行也没有分号导致报错。

在后期上传代码前需要压缩代码，压缩后会将所有代码的换行、空格都删除，此时js代码变成一行，所以会报错。

prompt()对话框

prompt：提示的意思。

prompt语句也是一个js内置的功能，可以传递两个参数，自定义参数内容。一般参数都加引号，两个参数之间用逗号隔开。

prompt("请输入年龄：","18");

以上两个参数不是必须，可以省略参数不写。

JavaScript（一）

重点：带圆括号的都叫“函数”或“方法”，而且括号内肯定可以填写参数，至于有多少个参数（每个方法规定不一样）。

2.3 console控制台

控制台是浏览器“检查”里面的功能，快捷键是f12，英文叫做“console”。js程序员常用的调试程序错误的面板。程序的所有错误，都会在控制台中输出（显示），控制台是调试代码的一个利器。

作用1：可以显示错误个数，错误类型，错误的代码位置。

JavaScript（一）

作用2：可以在控制台进行代码编辑，直接在控制台执行，也可以在控制台输出内容。

JavaScript（一）

通过一条console.log()方法，可以在控制台输出自定义的内容。

console本身是js内置对象，内部有大量的方法和属性，其中有一个log()方法(函数)，可以帮我们在控制台输出一些对象，并且console.log()方法参数可以有多个。

console.log("这里的内容是打印在控制台的！");

console.log(100-50);

console.log(100*50);

console.log("%c 大家好：scarf666@163.com","color:red;font-size:30px;");

1 console.log() 用于在console窗口输出信息

2 console.dir() 可以显示一个对象的所有属性和方法。

3 console.table() 会以表格的形式呈现打印的内容

4 console.warn() 在控制台输出一条警告信息

5 console.error() 在控制台输出一条错误消息

6 console.info() 在控制台输出一条通知信息

console.log的占位符：

1 %s 格式化字符串

2 %d 格式化整数

3 %i 格式化整数

4 %f 格式化浮点数

5 %o 可扩展的dom节点格式化

6 %o 可扩展的javascript对象格式化

7 %c css格式字符串

console.log('%s + %s', 1, 1, '= 2');

console.log("%d年%d月%d日",2018,8,8);

JavaScript（一）

2.4 document对象

document.write() 方法，用来向网页文档中（body）输出内容

JavaScript（一）

二、字面量

字面量（literals）：有些书叫做“直接量”、“常量”；

看见什么，它就是什么。用于表达一个固定值的表示法。

比如想在程序中表示一个数字，那就写一个数字就好了。

比如想在程序中表示“你好”，那就要加双引号。

这些书写上的规矩，就是所谓的字面量。

通俗理解：字面量就认为是字面上的意思，所见即所得。计算机在遇到字面量时，立即知道数据类型是什么，数据的值是什么。

3.1数字字面量

表示数学概念中数字的表示方法。

数字字面量：整数字面量、浮点数（小数）字面量、特殊值字面量。

js中有自己的数字字面量表示法，不需要添加任何辅助符号。

3.1.1整数字面量

数字字面量，就是这个数字自己，不需要任何的符号来界定这个数字。

javascript中，数字的字面量可以有三种进制：

10进制：普通的数字（0~9）就是十进制，逢十进一（满十进一）

8进制：以0或以0o、0o开头的都是八进制，八进制只能用0~7表示，逢八进一（满八进一）

16进制：以0x或以0x开头的都是16进制，16进制只能用(0~9和字母a~f/a~f)表示，逢十六进一（满十六进一）

【十进制】：

console.log(123);

console.log(-123);

【八进制】：

以0或0o、0o开头的都是八进制，显示的时候会以10进制显示。

 console.log(0o36);   //3 * 8 + 6 = 30

 console.log(0o27);   //2 * 8 + 7 = 23

 console.log(0o17);   //1 * 8 + 7 = 15

 console.log(017);    //1 * 8 + 7 = 15

 console.log(010);    //1 * 8 + 0 = 8，以0开头是八进制，会以10进制显示

 console.log(0100);   //8 * 8 + 0 = 64

 console.log(01000);  //64 * 8 + 0 = 512

 console.log(010000); //512 * 8 + 0 = 4096

 console.log(0100000); //4096 * 8 + 0 = 32768

 console.log(01000000); //32768 * 8 + 0 = 262144

注意：八进制只能用0~7之间的数，如果不合法，那么js认为你写错了，从而用10进制来显示。

console.log(088);

JavaScript（一）

但是以0o、0o开头的，如果写错了，控制台报错。

console.log(0o88);

JavaScript（一）

【16进制】：

逢16进1，每个位数必须是0~9、a~f/a~f之间，以0x、0x开头，后面的数字是16进制的数，计算的时候需要转10进制计算。

console.log(0xff); //15 * 16 + 15 = 255

console.log(0x2b); //2 * 16 + 11 = 43

console.log(-0x2b); //2 * 16 + 11 = -43

console.log(0x11); //1 * 16 + 1 = 17

console.log(0xf); //15

如果位数出现大于f的字母，直接报错：

console.log(0xfg);

JavaScript（一）

console.log(0x10); //1 * 16 + 0 = 16，以0x开头是16进制，会以10进制显示

console.log(0x100); //16 * 16 + 0 = 256

console.log(0x1000); //256 * 16 + 0 = 4096

console.log(0x10000); //4096 * 16 + 0 = 65536

3.1.2浮点数字面量

浮点数字面量，就是数学上的“.”点。计算机中，浮点数也称为“小数”。

允许使用e来描述乘以10的几次幂：

 console.log(3.1415926535898);

 console.log(-3.1415926535898);

 console.log(0.55);

 console.log(.55); //.55如果整数位是0，可以不写

 console.log(500000);

 console.log(5e5); //500000,允许使用e来描述乘以10的几次幂（次方）

 console.log(5.6e5); //560000

 console.log(1e-5);  //0.00001

只有10进制有小数的字面量，八进制、十六进制没有小数字面量。 JavaScript（一）

科学计算法：e计算法。

console.log(1e-5); //0.00001

console.log(1.2e6); //1200000

console.log(1200000000000000000000000); //1.2e+24

JavaScript（一）

3.1.3特殊值字面量

包含：infinity（无穷大）、nan（不是一个数）

infinity：无穷大的意思，区分正、负

计算机计算能力有限，如果超过了最大计算值不会显示具体数值，直接显示为正数无穷大infinity，如果低于了最小计算值会显示负数的无穷-infinity

infinity可以是某个超级大的数，或者本身就是一个infinity特殊值：

console.log(188888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888); //infinity

console.log(1.2345e309); //infinity

console.log(-1.2345e309); //-infinity

console.log(infinity); //infinity

console.log(-infinity); //infinity

console.log(10/0); //infinity

console.log(nan); //nan

console.log(0/0); //nan

nan：not a number 不是一个数，其实还是一个数学字面量，表示的值不是一个正常的数，不能用前面的正规表示法的数。

总结：

数字字面量有：整数字面量（8进制、10进制、16进制）

浮点数字面量：小数、e、infinity、nan

3.2 字符串字面量

字符串是一个术语，就是人类说的话。

组成：字母、数字、文字、特殊符号、空白符等。

字符串字面量：将人类说的语言放到一对引号中

字符串可以写任意的字符：

console.log("这是汉字字符串");

console.log("hello world!");

console.log("123456"); //数字引号括起来，那么就不是数字了，而是字符串

console.log("!@#$%^&*(");

console.log(" ");

JavaScript（一）

有一些符号有特殊作用，不能在字符串中写：

解方法：将特殊字符进行“\”转义

在字符串中可以使用以下特殊符号，比如：

\n 换行

\t tab缩进

\' 单引号

\"" 双引号

\\ 反斜杠

\n换行，\t缩进示例：

console.log("床前明月光\n疑是地上霜");

console.log("床前明月光\t疑是地上霜");

JavaScript（一）

二、变量

4.1变量语法

变量（variables），相当于一个容器，内部可以放任何类型的数据，和高中代数学习x、y、z很像。它们不是字母，而是蕴含值的符号。它和字面量不同，字面量5就是数字5，字面量“你好”就是字符串“你好”。现在这个变量不一样了，你看见一个a，实际上不是字母a，而是蕴含着不同的值。

变量内的数据是可以变化的，根据存放的内容发生变化

变量的数据只能存放一个，旧的数据会被新的数据替代

【整体感知】：

var a; //定义了一个a变量

a = 100; //给a变量赋值

console.log(a); //输出变量a

</script>

【语法】：

声明：var 变量名;

赋值：变量 = 变量值;

【实例】：

声明：var a; //定义了一个a变量

赋值：a = 100; //给a变量赋值

简化后的代码：

var a = 100;

通过“=”号给变量内部存储数据，专业叫法“变量赋值”。

你的电脑内存中，就会开辟一个空间，用来存放这个变量a，把右边的值，赋值给左边的变量名，var是声明变量的意思。

4.2变量必须先声明，才能使用

变量声明又叫做“变量定义”或“创建变量”。使用关键字var，后面定义变量的名字（名称自定义）。变量名定义需要遵循一个标识符命名规范。

var这个过程可以叫做声明（declaration），也可以叫做定义（definition）

直接运行以下代码：

console.log(a);

JavaScript（一）

4.3命名规范

程序中的命名规范：一般使用驼峰命名法或其他（第一个单词首字母小写，后面每个单词首字母大写）

var mynameis;

var my_name_is;

1、必须以字母、“_”或“$”符号开头，后面可以是数字、字母、下划线等

2、变量名不能包含空格或加减号或特殊符号

3、javascript变量名是严格区分大小写，例如a和a代表不同的变量

4、不能使用javascript中关键字和保留字

关键字：javascript中具备特殊意义的词，已经被js占用，不能用来命名

保留字：现在没有特殊功能，但是未来可能成为关键字

关键字：

break　　do　　instanceof　　typeof　　case　　else　　new　　var　　catch　　finally　　return　　void　　continue　　for　　switch　　while　　debugger*　　 function　　this　　with　　　　default　　if　　throw　　delete　　in　　try　

保留字：

abstract　　enum　　int　　short　　boolean　　export　　interface　　static　　byte　　extends　　long　　super　　char　　final　　native　　class

synchronized　　float　　package　　throws　　const　　goto　　private　　transient　　debugger　　implements　　protected　　volatile　　double　　

import　　public

【合法的变量名举例】：

var a;

var a888;

var _888;

var $888;

var $o0o_$;

var _____;

【不合法的变量名举例】：

var 123;

var 123abc;

var abc@126;

var abc￥;

var var; //不能使用关键字

var class; //不能使用保留字

4.4变量赋值

如果一个变量，仅仅被var了，但是没有赋值，此时这个变量的值是undefined。undefined是变量默认的初始值，代表未定义。

var a; //声明a变量，为赋值

console.log(a); //undefined

JavaScript（一）

变量的赋值用“=”等号，“=”就是赋值符号，在js中“=”号没有其他含义，就表示赋值。使用变量时用的不是变量名，而是内部赋的值。

等号右侧赋的值可以是任意类型，甚至还可以是一个变量。

var a; //声明a变量，为赋值

 console.log(a); //undefined

 a = 100;

 console.log(a); //100

 var b;

 b = "你好";

 console.log(b);

 var c;

 c = a; //把a变量的值，赋值给c变量

 console.log(c); //输出100

var a = 1;
var b = 2;
var c = 3;
var d = 4;
a = b; //把b的值赋值给a，所以a就替代初始值1变成2
b = a; //目前a变量值是2，把a的值赋值给b，所以b也是2
c = b; //目前b变量值是2，把b赋值给c，所以c就是2
d = a + b + c + d; // 4个变量值相加
console.log(a);//2
console.log(b);//2
console.log(c);//2
console.log(d);//10

变量内部存储的数据可以动态发生改变，变化的方式是通过赋值运算进行赋值。

变量数值发生变化，不需要进行多次var，变量一次定义，可以多次改变。

4.5变量声明的提升

这是javascript特有的一个特点，其他编程语言没有。

javascript 变量的另一特别之处是，你可以引用稍后声明的变量，而不会引发异常。这一概念称为“变量声明提升(hoisting)”；javascript 变量感觉上是被“举起”或提升到了所有函数和语句之前。然而提升后的变量将返回 undefined 值，所以即使在使用或引用某个变量之后存在声明和初始化操作，仍将得到 undefined 值。

现在我们先去改变变量的值，然后声明变量，由于js有一个机制，叫做“变量声明”提升，所以现在在程序执行前会已经看见这个程序有一行声明变量的代码，所以就会被提升到程序开头去运行。

console.log(a); //输出undefined

var a; //这行声明变量的代码会自动提升到所有执行语句之前。

记住js只能提升变量的声明，不能提升变量的赋值：

console.log(a); //输出undefined

var a; //这行声明变量的代码会自动提升到所有执行语句之前。

a = 100; //变量的赋值不能被提升，所以输出undefined

console.log(b); //undefined

var b = 100; //虽然合着写，但变量赋值依然不能被提升，只能提升变量声明

等价于：

var b; //自动提升到前面

console.log(b); //undefined

b = 100; //赋值还在原地

4.6 不写var的情况

a = 100;

console.log(a);//100

定义a变量的时候没有写var，程序没有报错，说明这个a变量已经被定义成功并赋值，现在看不出来不写var和写var有什么区别。但是后面随着深入，你将知道，不写var其实是定义了一个全局变量，作用域是不能控制的。

4.7用逗号隔开多个变量

一个var关键字定义多个变量：

逗号“,”表示法，只能用于变量的连续定义，可以用于赋初始值，不要瞎用。

var a = 10,b = 20,c = 30;
console.log(a);
console.log(b);
console.log(c);
console.log(a+b+c); //30，数学相加
console.log(a,b,c); //10 20 30多个参数用逗号隔开一起输出

JavaScript（一）

4.8区分变量和字面量

使用变量的时候，不能加引号，如果变量加上引号，就变成“字符串”字面量。

var a = 100;

console.log(a); //变量 100

console.log('a'); //“字符串”字面量 a

JavaScript（一）

引号是“字符串”的定界符，所以引号里面的a语句失去了变量的意思，变成字面量的字符串a了。

五、数据类型

5.1数据类型分类

数据：计算机看到的所有对象都是数据，数据分很多类，都会分类保存。

javascript中的值：无论是字面量还是变量，都有明确的类型。

简单的基本数据类型有5种：

number 数字类型，不区分整数、浮点数、特殊值、进制

string 字符串类型，所有有引号的数据都是字符串类型

boolean 布尔类型，仅有两个值true（真）和false（假）

undefined undefined类型，变量未定义时的值，这个自己是一种类型。

null object类型，这个值自己是一种类型，null本身是个空对象。

5.2数据类型检测

用typeof这个关键字可以检测变量的值是什么类型。

var a = 123456;   //number类型

 var b = "123456"; //string类型

 var c = true;     //boolean类型

 var d = null;     //null类型（空对象）

 var e;            //undefined类型

 console.log(typeof a);

 console.log(typeof b);

 console.log(typeof c);

 console.log(typeof d);

 console.log(typeof e);

JavaScript（一）

语法是以下两种都可以：

typeof 值;

打赏

微信扫一扫

springboot activiti 整合项目框架源码 shiro 安全框架 druid windows10风格

官网：www.fhadmin.org 此项目为Springboot工作流版本 windows 风格,浏览器访问操作使用，非桌面应用程序。 1.代码生... [阅读全文]
[Intern][2019.03.16]针对已有的HTML如何只凭JS改动？

刚入职的时候看到公司用的HTML日志生成工具附带的Panel，工具不够用，找个Fail还要找半天，于是自己琢磨着添砖加瓦。以前也是个半吊子前端工程师... [阅读全文]
a标签伪类选择器以及伪元素:hover的案例

1.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面 2.在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式/宽度/宽度） 3... [阅读全文]
教你如何一键反编译获取任何微信小程序源代码（图形化界面，傻瓜式操作）

一键获取微信小程序源代码前言最近开始学习微信小程序的开发，可是苦于（自学），很多东西看了也不太会。发现小程序的坑远比想象的要多的多！！看到人家上... [阅读全文]
前端vue系列-起始篇 vue的基本认知

hi,大家伙，我是佛系大大，很高兴与你们一起沟通，学习，进步。很久不更新博客了，现在回来再写博客，尽然是有些怀念的感觉，幸福的感觉。因为写博客，内... [阅读全文]