javascript 基础语法

js三种引用方式

          1.行内

• 写在标签上的 js 代码需要依靠事件（行为）来触发

• <!-- 写在 a 标签的 href 属性上 -->
  <a href="javascript:alert('我是一个弹出层');">点击一下试试</a>
  
  <!-- 写在其他元素上 -->
  <div onclick="alert('我是一个弹出层')">点一下试试看</div>
  
  <!--
  	注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
  -->

  2.内联
• 内嵌式的 js 代码会在页面打开的时候直接触发

  <!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
  <script type="text/javascript">
  	alert('我是一个弹出层')
  </script>
  
  <!--
  	注：script 标签可以放在 head 里面也可以放在 body 里面
  -->

  3.外链

• 外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发

// 我是 index.js 文件
alert('我是一个弹出层')

<!-- 我是一个 html 文件 -->

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>

<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

javascript 中的注释

1、单行注释

• 一般就是用来描述下面一行代码的作用

• 可以直接写两个 / ，也可以按 ctrl + /

例如 ：

// 我是一个单行注释

// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层'

2、多行注释

例如:

• 一般用来写一大段话，或者注释一段代码

• 可以直接写 /* */ 然后在两个星号中间写注释

例如：

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

/*
	注释的代码不会执行
	alert('我是一个弹出层')
	alert('我是一个弹出层')
*/
alert('我是一个弹出层')

补充一点：

• 各个编辑器的快捷键不一样，vscode 是 ctrl + shift + a
• 快捷键修改为： ctrl + shift + /
• vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键 → 回车确认

    重点  ：

JavaScript输入输出语句

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

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。document.write() 方法将内容写到 HTML 文档中。

什么是变量     

•   语法： var 变量名 = 值

•   白话：变量就是一个装东西的盒子。

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

• 重点：本质：变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间，一个房间就可以看做是一个变量。      
    变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
    也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他

定义变量及赋值

// 定义一个变量
var num;

// 给一个变量赋值
num = 100;

// 定义一个变量的同时给其赋值
var num2 = 200;

注意：

1. 一个变量名只能存储一个值

2. 当再次给一个变量赋值的时候，前面一次的值就没有了

3. 变量名称区分大小写（JS 严格区分大小写）

声明变量：

//  声明变量  
var age; //  声明一个 名称为age 的变量     

• var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

• age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

赋值

age = 10; // 给 age  这个变量赋值为 10   

• = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思

• 变量值是程序员保存到变量空间里的值

变量的初始化

var age  = 18;  // 声明变量同时赋值为 18
// 声明一个变量并赋值， 我们称之为变量的初始化。

变量语法扩展

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

var age = 66;

age = 666;   // 最后的结果就是666因为66 被覆盖  

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

var age = 10,  name = '千锋济南', sex = 2; 

• 声明变量特殊情况

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

扩展: 交换变量的值

方法一

 var v1 = 1;
    var v2 = 2;
    var temp = v1;
    v1 = v2
    v2 = temp

方法二

var num1 = 10;
var num2 = 20;

//把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量
num1 = num1 + num2;//30

//num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2
num2 = num1 - num2;//10

//num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1
num1 = num1 - num2;//20

console.log(num1, num2);

方法三

 var num1 = 10;
    var num2 = 20;
    num1 = num1 ^ num2;
    num2 = num1 ^ num2;
    num1 = num1 ^ num2;
    console.log(num1, num2);
    // 位运算 按位异或 了解 

下列尤为重要：

规则： 必须遵守的，不遵守就是错           

1. 一个变量名称可以由 数字、字母(a-zA-Z)、英文下划线（_）、美元符号（$） 组成,如：userrAge, num01, _name

2. 严格区分大小写 var qf; 和 var Qf;

3. 不能由数字开头 18age 是错误的

4. 不能是 保留字 或者 关键字 编辑器中高亮的部分

5. 不要出现空格

规范： 建议遵守的（开发者默认），不遵守不会报错

1. 变量名尽量有意义（语义化） nl → age

2. 遵循驼峰命名规则，由多个单词组成的时候

   大驼峰 UserName 小驼峰 userNameKangbazi

3. 不要使用中文

标识符

标识(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 等。

数据类型（重点）

• 为什么需要数据类型
•        在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
•        js是一个工具,为了解决生活中各种各样的需求,需要不同的数据类型 姓名 年龄 薪资等 
  简单来说，数据类型就是数据的类别型号。
•  变量的数据类型
•        变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

var age = 10;        // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串 

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

var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串 

数据类型的分类

• 基本数据类型 （Number,String,Boolean,Undefined,Null） 也可以叫简单

• 复杂数据类型 （object)

分为两大类 基本数据类型 和 复杂数据类型

基本数据类型

1. 数值类型（number）

   • 一切数字都是数值类型（包括二进制，十进制，十六进制等）

   • NaN（not a number），一个非数字

2. 字符串类型（string）

   • 被引号包裹的所有内容（可以是单引号也可以是双引号）

3. 布尔类型（boolean）

   • 只有两个（true 或者 false）

4. null类型（null）

   • 只有一个，就是 null，表示空的意思

5. undefined类型（undefined）

   • 只有一个，就是 undefined，表示没有值的意思

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

  •             数字字面量：8, 9, 10

  •             字符串字面量：'千锋济南', "大前端"

  •             布尔字面量：true，false

•   数字型 Number
• JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。

var age = 21;       // 整数
var Age = 21.3747;  // 小数     

1.数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

 // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num2 = 019;  // 对应十进制的19
 var num3 = 08;   // 对应十进制的8
  // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;   

现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

2.数字型范围

JavaScript中数值的最大和最小值

• 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

• 最小值：Number.MIN_VALUE，这个值为：5e-32

3.数字型三个特殊值

• Infinity ，代表无穷大，大于任何数值

• -Infinity ，代表无穷小，小于任何数值

• NaN ，Not a number，代表一个非数值

4.isNaN

用来判断一个变量是否为非数字的类型，返回 true 或者 false

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);          // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));// true ，"andy"是一个非数字

5.字符串型 String

字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号''

var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

6.字符串引号嵌套

JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)7.

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
//  常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

7.字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是 \ 开头的，常用的转义符及其说明如下：

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

3.字符串长度

         字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

var strMsg = "我是来自北方的狼，来南方寻找心爱的花姑娘！";
alert(strMsg.length); // 显示 21

    4.字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112