JavaScript基础知识

一、初识JavaScript

1、浏览器执行JS简介

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

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

2、Js的组成

JavaScript是由：ECMAScript语法、DOM页面文档对象模型、BOM浏览器对象模型三部分组成。

ECMAScript

ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一-i门编程语言,这种语言在万维网上应用广

泛,它往往被称为JavaScript或JScript ,但实际上后两者是ECMAScript语言的实现和扩展。

JavaScript ：网景公司

Jscript ：微软公司

ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

3、JS的书写

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

1、行内式JS

<input type="button" value="点我试试" onclick="alert('Hello World')" />

1.可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性) ,如: onclick
2.注意单双引号的使用:在HTML中我们推荐使用双引|号, JS中我们推荐使用单引号
3.可读性差,在htmI中编写JS大量代码时,仿便阅读;
4.引号易错,引号多层嵌套匹配时,非常容易弄混;
5.特殊情况下使用

2、内嵌式

<script>
	alert('hello world')
</script>

将多行js代码写在标签中。

3、外链式

<script src="my.js"></script>

• 利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
• 引用外部JS文件的script标签中间不可以写代码
• 适合于JS代码量比较大的情况

4、javaScript输入输出语句：

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

5、变量

变量就是存放数据的容器，我们通过变量名获取数据，甚至修改数据。

6、变量的命名规范：

1.由字母(A-Za-z)、数字(0-9)、 下划线( )、美元符号($ )组成,如: usrAge, num01,_ name

2.严格区分大小写。var app;和var App;是两个变量

3.不能以数字开头。

4.18age是错误的

5.不能是关键字、保留字。例如: var、for、 while

6.变量名必须有意义。MMD BBD

7.遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName

7、数据类型

变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机

的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型

会被自动确定。

在代码运行时,量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的,运行完毕之后,变量就确定

了数据类型。

JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型:

基本数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

8、函数

① 函数的概念

在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。

虽然for循环语句也能实现一些简单的重复操作 ,但是此较具有局限性,此时我们就可以使用JS中的函数。

② 函数的使用

函数的使用分为两步：声明函数和调用函数

声明函数的语法 ：

<script>
    function 函数名(){
    // 这里面是函数体
}
// 需要调用函数:函数名();
</script>

例如：

<script>
    function eat(){
   	console log('hallo');
}
// 需要调用函数
	eat();
</script>

注意：

• function 声明函数的关键字全部小写
• 函数是做某件事情，函数名一般是动词
• 函数不调用，自己不执行

③ 函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

④ 函数的参数

在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为：形参

而在调用该函数时,同样也需要传递相应的参数,这些参数被称为：实参

函数参数的语法：

<script>
    function eat(形参1,形参2...){
}
// 需要调用函数
	eat(实参1,实参2...);
</script>

⑤ 函数形参和实参个数不匹配的问题

例如：

<script>   
   function he(num1 , num2){
        console.log(num1 + num2);
    }
    he(15 , 20 , 30); // 35
    he(15); // NaN
</script>

参数个数	说明
参数个数等于形参个数	输出正确结果
参数个数大于形参个数	只取到形参的个数
参数个数小于形参个数	多的形参定义为underfined，结果为：NaN

⑥ arguments 

伪数组，并不是真正意义上的数组

具有数组的length属性

按照下标进行存储的

它没有真正数组的一些方法：pop push…

9、javaScript作用域

• 就是代码名字(变量)在某个范围内起作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突
• js的作用域(es6) 之前:全局作用域 局部作用域
• 全局作用域: 整个script标签或者是个单独的js文件
• 局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用

<script>   
    // 全局作用域
   let num = 20;
	 	console.log(num);

   function he(){
    // 局部作用域
    	let num = 20;
        console.log(num);
    }
    he(); 
</script>

 

变量作用域

在JavaScript中,根据作用域的不同,变量可以分为两种:

1.全局变量
2.局部变量

在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。

1.全局变量在代码的任何位 置都可以使用
2.在全局作用域下var声明的变量是全局变量

3.特殊情况下,在函数内不使用var声明的变量也是全局变量以不建议使用)

全局作用域和局部作用域的区别：

1.全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
2.局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间