Js 基础入门

发表于

javaScript 简介

如果说 ajax 让 JavaScript 有了新生， 那么最近几年，HTML5 和 node 的兴起，让 JavaScript 有了质的飞越，如果以后我们想从事前端方向的发展，你务必要学好 JavaScript。

JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。

JavaScript 在用户浏览器内部运行，JavaScript 能够检测和响应特定的用户操作，比如鼠标点击和键盘操作。更重要的是： 几乎每种 Web 浏览器都支持 JavaScript。

1
2
3
4
课下阅读：
JavaScript 的祖先可以追溯到 20 世纪 90 年代中期，首先是 Netscape Navigator 2 引入了 1.0 版本。 随后，“欧洲计算机制造商协会”（ECMA）开始介入，制定了 ECMAScript规范，奠定了JavaScript迅猛发展的基础。与此同时，微软开发了自己版本的 JavaScript：jScript，在 IE 浏览器上使用。

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。最终的结果JavaScript和java的关系就是： 雷锋和雷峰塔、周杰和周杰伦的关系啦！

javaScript 是脚本语言

脚本英文为 Script。脚本简单地说就是一条条的文字命令，并按程序顺序执行。比如 php 也是脚本语言。

它和 java 等编程语言不同的是，JavaScript 语法比较松散。要求的不像编程语言那么严格。

比如 java： var num:int = 10;

而 JavaScript： let num = 10;

1
2
3
4
5
6
7
8
9
拓展阅读：

1.脚本语言(JavaScript,VBscript等)介于HTML和C,C++,Java,C#等编程语言之间。 HTML通常用于格式化和链结文本。而编程语言通常用于向机器发出一系列复杂的指令。

2.脚本语言与编程语言也有很多相似地方，其函数与编程语言比较相象一些,其也涉及到变量。与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些.

3.与程序代码的关系:脚本也是一种语言，其同样由程序代码组成。 注：脚本语言一般都有相应的脚本引擎来解释执行。 他们一般需要解释器才能运行。JAVASCRIPT,ASP,PHP,PERL都是脚本语言。C/C++编译、链接后，可形成独立执行的exe文件。

4.脚本语言是一种解释性的语言,例如vbscript,javascript,installshield script等等,它不象c\c++等可以编译成二进制代码,以可执行文件的形式存在. 脚本语言不需要编译，可以直接用，由解释器来负责解释。

javascript 组成

第一部分：ECMAScript

又 ECMA 组织制定语句，语法。它定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准，JavaScript 就是这样：

第二部分：BOM

broswer object model：浏览器对象模型

比如：

1.弹出新的浏览器窗口 2.移动、关闭浏览器窗口以及调整窗口大小 3.提供用户屏幕分辨率详细信息的屏幕对象

第三部分：DOM

document object model：文档对象模型.

DOM 将把整个页面规划成由节点层级构成的文档。

javaScript 作用

对于制作一个网页而言！

HTML:给网页添加结构的；骨骼

CSS:给网页添加样式的；外观

Javascript:给网页添加功能，交互的；行为

学习 JavaScript 你要知道的

JavaScript 在页面的位置、书写规范、执行顺序和环境等。

在 Web 页面里添加 JavaScript

JavaScript 代码是和页面内容一起发送给浏览器的, 可以把 JavaScript 代码集成到 HTML 页面：

(1). 嵌入式

JavaScript 语句直接包含在 HTML 文件里，语法结构如下：

1
<script type="text/javascript">javascript语句;</script>

(2). 外链式

把 JavaScript 代码保存到单独的文件，然后利用 script 标签的 src（源）属性把这个文件包含到页面里。

1
<script type="text/javascript" src="js/demo.js"></script>

JavaScript 基本格式

JavaScript 程序是由一些单独的指令组成的，这些指令被称为“语句”。为了能够正确地 解释语句，浏览器对语句的书写方式有所要求。

第一种方式是把每个语句一行：

语句 1

语句 2

另一种方式是在同一行里书写多个语句，每个语句以分号表示结束。

语句 1; 语句 2;

为了提高代码的可读性，也为了减少无意中造成的语法错误，最好是结合上述两种方式 的优点，也就是一行书写一个语句，并且用分号表示语句结束：

语句 1;

语句 2;

还需要注意： JavaScript 严格区分大小写。 myName 和 myname 是不一样的。

与用户交互

alert 弹出警示框

1
alert("内容");

prompt 弹出输入框

1
prompt("参数1", "参数2");

说明： 如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

console.log 控制台输出

console.log(“内容”) 的功能是在控制台打印括号内内容。

1
console.log('content');

document.write 文档打印输出

1
document.write("你好！");

变量

定义:用于保存特定的数据的容器。

变量声明

因为页面中的数据量很大，我们需要很多容器才能装下这些数据，怎么区分这么多的容器呢？ 简单，给每个容器（我们的变量）起一个不同的名字就可以了。

语法：

let num = 10;

以上语句，声明了一个名字为 num 的变量。 同时赋予了一个值为 10。

恩， 还有一点，这个变量只能保存一次最近的数据。 以前的数据将被替换，不存在了。

变量名的命名规范

变量可以用任何方式进行命名，但我们一般只使用字母、数字、美元符号（$）和下划线。

1.变量命名必须以字母或是下标符号”_”或者”$”为开头。

2.变量名长度不能超过 255 个字符。

3.变量名中不允许使用空格。

4.不能使用脚本语言中保留的关键字及保留符号作为变量名。

5.变量名区分大小写。(javascript 是区分大小写的语言)

数据类型

  • 数值型: Number
  • 字符型: String 只要添加了引号的都是字符型！
  • 布尔型: Boolean true\false
  • 未定义型: Nndefined -> let num; 比如我们声明了变量，但是没有给值；
  • 空型: Null -> let num = null;

检测数字类型 typeof 运算符

1
console.log(typeof 10); // number

操作符

如果不能通过计算操作变量里保存的值，那么这些值的作用就是十分有限的。

算术操作符

(1). 基本算术操作符 进行加、减、乘、除、取模（取余）等。

对应的是： +, -, *, /, %

(2). 一元操作符 自加、自减

对应的是： ++, - -

比较操作符

<、>、>=、<=、!=、==、===、!==

所有的比较操作符只返回一个结果要么真 true 要么假 false（布尔值）

== 和 ===有何区别？

== ：判断值是否相等

===：判断值相等类型也相同

逻辑操作符

包含三个操作符 与(&&) 或(||) 非(!)

逻辑运算符的操作对象是布尔值。

每个逻辑运算数返回一个布尔值 true 或者是 false。

赋值操作符

作用：将等号右边结果赋值给等号左边的变量。

1
2
3
4
5
const num;

num = 10 + 10;

num += 10;

逗号操作符

1
2
3
const a = 10,
  b = 10,
  c = 10;

数据类型转换

转换为字符型

使用运算符方法转换字符型（隐式转换）

字符串加数字,数字就会转成字符串。 + 加号

比如:

1
2
3
console.log(123 + "");

console.log(18 + "岁");
String() 函数转换（显示转换）

语法：

String(数值) –> 可以转换为字符型

比如 String(123); –> 结果为字符型的 “123”

toString()函数转换

语法：

数值.toString();

比如：

const num = 123;

num.toString() –> 输出的结果为： 字符型的 “123”;

转换为数值型

使用运算符方法转换数值型（隐式转换）

数字减字符串，字符串转成数字。乘，除等跟减的转换也是一样。都可以实现隐式数据类型转换。

比如：

1
2
3
'20' - 10 // 10
10 * '20' // 200
'20' / '10' //2

注意： 如果你不想让值发生变化，就直接减去 0 就好了。

利用 Number() 数据类型转换 （显示转换）

Number()可以把任意值转换成数值。

比如：

1
2
3
Number('123')     //结果就是 数值型的 123
Number('中国')    //结果是 NaN
Number('22px')   //结果是 NaN 注意和下面 parseInt 的区别
利用 parseInt、 parseFloat 函数转换

parseFloat()把字符串转换成浮点数（小数）

parseInt()把字符串转换成整数

1
2
3
4
parseInt('22') // 22
parseInt('22px') // 22 这样是允许的 注意和上面 Number 的区别
parseInt('hello22'); // NaN 里面的数值内容必须以数字开头
parseInt(22.94); // 22 只会留下整数部分

转换为布尔型

以下值转换为布尔型:

1
// false、undefined 、null、0、""、NaN 结果为 false;

以下值转换为布尔型:

1
// true、1 结果为 true;
使用运算符方法转换布尔型（隐式转换）

!! 使用这个符号就可以，转换为布尔型

1
2
console.log(!!"123") // true
console.log(!!1) // true
利用 Boolean() 数据类型转换 （显示转换）
1
console.log(Boolean("123")) //返回 true

条件语句

顺序、选择、循环是结构化程序的基本结构。 我们前面执行的都是顺序结构， 我们现在开始学习根据不同条件而去选择执行不同的语句， 这类语句我们称为条件语句或者选择语句。

if 条件语句

1
2
3
4
5
6
7
8
9
10
if（表达式） {

  语句段１； ......

}
else {

  语句段２； ..... 　

}

功能：

如果表达式为 true，则执行语句段１；否则执行语句段２。 最终只能二取一， 有你没我，有我没你。

说明：

  • 可以只使用 if 省略 else 。
  • if 后面有小括号加表达式，而 else 是没有的。
  • 表达式里面可以是判断表达式语句或者是布尔值等。
  • 如果 if 和 else 里面只有一句执行的话，可以省略花括号，否则一定要加上花括号。 建议大家还事都带上花括号。

总结：

if-else 语句是 JavaScript 中最基本的控制语句，通过它可以改变语句的执行顺序。 表达式中必须使用关系语句，来实现判断，它是作为一个布尔值来估算的。

例子：

1
2
3
4
5
if (5 > 3) {
  console.log("正确");
} else {
  console.log("错误");
}

执行情况是这样的： 先判断 if 里面的表达式的布尔值 结果是 true 则返回 if 里面的语句 console。 else 就不再执行。

Javascript 三元操作符

如名字表示的三元运算符需要三个操作数。有时候也成为三目运算符 。 它实际等价于 if else 的简写。

i++ 一元运算符

a+b 二元运算符

1
num ？ a : b ; // 三元运算符

语法格式：

条件表达式 ? 结果 1 : 结果 2;

当满足条件时返回结果 1 否则返回结果 2。

1
2
3
4
const b=5;
(b == 5) ? a="true" : a="false";
document.write(“ ————————— “+a);
结果： ————————— true

多分支 if 语句

if…else 语句只能选择两种结果：要么执行真，要么执行假。但有时会出现两种以上的选择，例如：

一个班的考试成绩，如果是 90 分以上，则为“优秀”；

如果是 60 ～ 90 分之间的，则为“良好”；

如果低于 60 分，则为“不及格”。

这时可以使用 elseif（也可以写作 else if）语句来执行，该语法格式为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

if（表达式1） {

  语句段１； ......

}
else if(表达式2) {

  语句段２； ..... 　

}

else if(表达式3)

{

语句段3； .....

}

......

else {

    语句段n;
}

功能：

如果表达式 1 为 true，则执行语句段１；

如果表达式 1 为 false，则继续判断表达式 2 是否为 true， 如果为 true，则执行语句段 2;

如果表达式 2 为 false，则继续判断表达式 3 是否为 true， 如果为 true，则执行语句段 3;

以此类推，如果以上表达式都为 false，最后执行 else 里面的语句，结束程序。

案例：

1
2
3
4
5
6
7
8
9
const age = 20;

if (age < 18) {
  alert("你还未成年！请长大以后再来报考驾照");
} else if (age < 70) {
  alert("恭喜您成功报考驾照！");
} else {
  alert("您年纪太大了！已经超过了报考驾照的年纪，请安全出行！");
}

switch case 多分支判断语句

多分支判断选择语句 。

语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
switch(n){

case 1:
  执行代码块 1
break;

case 2:
  执行代码块 2
break;
...
default:
 剩余的代码;
}

功能：

首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行。从上往下一次执行，如果都没找到匹配选项，则执行 default 里面的语句。

当表达式的值与某一个 case 后面的常量表达式的值相等时，就执行此 case 后面的语句，若所有的 case 中的常量表达式的值都没有与表达式的值匹配的，就执行 deafault 后面的语句。

注意：

每一个 case 的值必需互不相同，否则会出现互相矛盾的结果.

执行完一个 case 分支后，使流程跳出 switch 结构，即终止 switch 语句的执行。

可以用 break 语句来实现这个目的。最后一个语句可以不加 break 语句。

循环语句

for 循环

1
2
3
for (循环的初始; 循环的条件; 循环的增量) {
  需执行的代码;
}

例子：

1
2
3
for (变量 = 初始值; 变量 <= 结束值; 变量 = 变量 + 步进值) {
  需执行的代码;
}

双重 for 循环

1
2
3
4
5
for (外循环的初始; 外循环的条件; 外循环的增量) {
  for (内循环的初始; 内循环的条件; 内循环的增量) {
    需执行的代码;
  }
}
  • 内层循环可以看做外层循环的语句。
  • 内层循环执行的顺序也要遵循 for 循环的执行顺序。
  • 外层循环执行一次，则内层循环要执行全部次数（跑完毕）。

while 循环

基本格式：

1
2
3
while(条件表达式){ 
  语句集;
}

该语句与 For 语句一样，当条件为真时，重复循环，否则退出循环。

For 与 while 语句

两种语句都是循环语句，使用 For 语句在处理有关数字时更易看懂，也较紧凑；

而 while 循环对复杂的语句效果更特别。

do-while 循环

基本格式：

1
2
3
4
do {
  console.log("i");
  i++;
} while (i < 20);

break 和 continue 语句

break 语句使得循环从 For 或 while 中跳出，continue 使得跳过循环内剩余的语句而进入下一次循环。

函数 function

函数:相当于一个工具，比如螺丝刀，当我们想使用的时候拿出来用，当我们不想使用的时候就放在那不起作用。而这个工具是由我们自己来创造的。
函数名:就是我们为工具起的名字
语句块:就是我们造的工具要实现的功能。

函数的声明

跟 let 一样声明变量一样的。 我们的函数也需要一个关键字来进行声明，具体格式如下：

1
2
3
4
5
6
7
const fun = () => {
  代码块；
}
// or
function fun() {
  代码块；
}

function 是小写，注意区分。
函数名是自己定义的名字。 比如 fun 、 myFun 等。
函数不调用， 自己是不执行的。

函数的调用

函数声明完毕之后， 需要调用函数，才会执行函数里面的语句块。

格式:函数名();

1
2
3
4
5
6
function fun() {
  //  函数声明
  alert("函数使用");
}

fun(); // 函数调用

函数的参数

函数有了参数，才有了灵魂， 可以实现多次重复使用了。

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

1
2
3
4
5
function fun(形参1,形参2...) {   //  函数声明
  alert("函数使用");
}

fun(实参1，实参2..);  // 函数调用

函数的返回值

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

在函数体内部用 return 定义返回值，一个函数只能有一个返回值。

比如：

1
2
3
4
5
function fun(num1,num2) {   //  函数声明
  return  num1 + num2;  // 返回值
}

fun(1,2);  --->  返回值结果就是 3
  • 求任意两个数的最大值。
  • 求一个长方体的体积。

数组(Array)

数组的作用是:使用单独的变量名来存储一系列的值。

数组定义声明

两种方式:

1
2
3
let arr = new Array();

let arr = [];

数组赋值或者修改

声明定义的时候直接给值。

1
2
3
let arr = new Array("张三", "李四");

let arr = ["张三", "李四"];

先声明空数组，后给值。

1
2
3
4
5
let arr = [];

arr[0] = "张三";

arr[1] = "李四";

修改也是如此执行。

数组访问

通过指定数组名以及索引号码，你可以访问某个特定的元素。

格式： 数组名[索引号]

比如我们已经声明了： const arr = [“张三”,”李四”];

要想使用张三，就用数组名配合索引号: arr[0];

注意： 我们的数组索引号 是从 0 开始 以此类推。李四就是 arr[1].

数组长度

我们可以通过 length（长度） 这个属性来检测数组的长度，就是里面有几个值。

let arr = [“张三”,”李四”];

arr.length; 结果是 2 里面就是 2 个值的意思。

注意： arr 的 索引号 是 0 1 ， 但是 arr 的长度是 2。

数组遍历

遍历： 就是从头到尾打量一遍。

比如遍历查找，就是说从第一个值一直查到最后一个值。

谁可以实现这个操作，对啦，就是我们前面学过的 循环，最常用的是 for。

1
2
3
4
5
let arr = ["张三", "李四"];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Javascript 数据类型

前面我们讲过的数据类型是基本数据类型。

基本数据类型

字符型 string

数值型 number

布尔型 boolean

空型 null

未定义型 undefined

复杂数据类型（object）

复杂数据类型就一个是 object 对象（通常我们也成为 引用数据类型）

刘德华信息如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
原名：刘福荣

身高：174

出生年：1961年

生肖：牛

祖籍：广东省江门市

歌曲： 冰雨、恭喜发财等

电影： 无间道、 天下无贼等

如果你要用一个数组表示 ，别人一般是看不懂的。

const arr = [“刘德华”, “牛”, “冰雨”,”天下无贼”];

因为信息非常的复杂了，就不要用变量去存储了，这里我们可以用 复杂数据类型 object 来存储复杂数据。

应该这样表示:

1
2
3
4
5
6
7
刘德华.年龄

刘德华.生肖

刘德华.唱歌

刘德华.演戏

object 对象的声明

具体语法格式如下：

1
let 对象名 = new Object();

比如：

1
let andy = new Object();

此时我们就声明了一个 andy 的对象。

object 对象的赋值

属性赋值：

1
2
3
andy.age = 55;

andy.weight = 140;

方法赋值：

1
2
3
4
5
6
7
andy.sing = function() {
  alert("冰雨");
};

andy.movie = function() {
  alert("无间道");
};

object 对象的访问

利用点来访问即可。

对象.属性 比如 andy.age arr.lenght

对象.方法 比如 andy.sing() window.alert();

由上面可以得到 属性和方法最大的区别在于 属性没有括号，方法有括号。

常用的对象方法

javascript 给我们提供了很多的内置对象，方便我们进行操作。

内置对象，类似我们手机，买来之后，手机里面是不是已经装有打电话功能了，发短信功能了，甚至 聊天 的， 上网的功能都给我们集成了。

不需要我们自己安装而直接使用功能的，我们称之为内置功能。

不需要我们自己定义而直接使用对象的，我们称之为内置对象。

其实我们前面接触过太多了， window.alert() document.write()

数学对象 Math

因为后期我们 JavaScript 使用数学公式和计算的地方太多了，因此这里不需要我们自己声明对象，JavaScript 直接给我们内置好了数学对象 Math 对象，我们可以使用它的内置方法来帮助我们进行计算，如果你数学没学好，那就请你记住这些数学对象方法的使用。

数组方法 Array

push：向数组的末尾增加一项

unshift：向数组开头增加一项

pop:删除数组的末尾项

shift:删除数组开头项

拼接:

concat:把一个数组和另一个数组拼接在一起

join:把数组中的每一项 按照指定的分隔符拼接成字符串

排序:

reverse:倒序数组 返回值倒序数组 原有数组改变

sort:根据匿名函数进行冒泡排序 b-a 倒序 a-b 升序