[JavaScript-1] JavaScript基础

悠悠 2022-11-26 05:59 259阅读 0赞

## 一、JavaScrip介绍 ##

### 1. JavaScript的定义 ###

JavaScript是运行在浏览器端的脚步语言, 是由浏览器解释执行的, 简称js, 它能够让网页和用户有交互功能, 增加良好的用户体验效果。

**前端开发三大块** 1、HTML：负责网页结构 2、CSS：负责网页样式 3、JavaScript：负责网页行为， 比如:网页与用户的交互效果

## 二、JavaScript使用 ##

### 1. 行内式（主要用于事件） ###

### 2. 内嵌式 ###

### 3. 外链式 ###

## 三、变量和数据类型 ##

### 1. 定义变量 ###

JavaScript 是一种弱类型语言，也就是说不需要指定变量的类型，JavaScript的变量类型由它的值来决定， 定义变量需要用关键字 ‘var’, 一条JavaScript语句应该以“;”结尾

**定义变量的语法格式:**

var 变量名 = 值;

var iNum = 123;
     var sTr = 'asd';
    
     //同时定义多个变量可以用","隔开，公用一个‘var’关键字
    
     var iNum = 45,sTr='qwe',sCount='68';

### 2. JavaScript注释 ###

JavaScript的注释分为单行注释(//注释内容)和多行注释(/*多行注释*/)

### 3. 数据类型 ###

js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)。

5种基本数据类型：  
1、number 数字类型  
2、string 字符串类型  
3、boolean 布尔类型 true 或 false  
4、undefined undefined类型，变量声明未初始化，它的值就是undefined  
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：  
1、object 后面的**数组、函数和JavaScript对象**都属于复合类型

//1.1 数字 number
    var iOne = 10.1;
    
    //1.2 字符串 string
    var sStr = '1234';
    
    //1.3 布尔 boolean; 
    var bIsTrue = false;
    
    //1.4 未定义 undefined
    var unData;
    
    //1.5 null 表示空对象
    var nullData = null;
    
    //1.6 object 表示对象类型
    var oObj = { 
       name:"隔壁老王",
       age:88
    }
    // 获取变量的类型
    var type = typeof(oObj);
    alert(type);
    // 获取对象的name属性
    alert(oObj.name);

### 4. 变量命名规范 ###

1、区分大小写  
2、第一个字符必须是字母、下划线（\_）或者美元符号（$）  
3、其他字符可以是字母、下划线、美元符或数字

### 5. 匈牙利命名风格 ###

对象o Object 比如：oDiv  
数组a Array 比如：aItems  
字符串s String 比如：sUserName  
整数i Integer 比如：iItemCount  
布尔值b Boolean 比如：bIsComplete  
浮点数f Float 比如：fPrice  
函数fn Function 比如：fnHandler

## 四、函数定义和调用 ##

### 1. 函数定义 ###

函数就是可以**重复使用的代码块**, 使用关键字 **function** 定义函数。

### 2. 函数调用 ###

函数调用就是**函数名加小括号**，比如:函数名(参数\[参数可选\])

### 3. 定义有参数有返回值的函数 ###

定义函数时，函数如果有参数，**参数放到小括号里面**，函数如果有返回值，返回值通过 **return** 关键字来返回

**函数中’return’关键字的作用:**  
1、返回函数中的值  
2、执行完return函数执行结束

## 五、变量作用域 ##

### 1. 变量作用域的介绍 ###

变量作用域就是变量的使用范围，变量分为:

*  局部变量
 *  全局变量

### 2. 局部变量 ###

局部变量就是在函数内使用的变量，只能在函数内部使用。

### 3. 全局变量 ###

全局变量就是在函数外定义的变量，可以在不同函数内使用。

## 六、 条件语句 ##

### 1. 条件语句的介绍 ###

条件语句就是通过条件来控制程序的走向

### 2. 条件语句语法 ###

1.  if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
2.  if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
3.  if…else if…else 语句 - 使用该语句来判断多条件，执行条件成立的语句

### 3. 比较运算符 ###

假如 x = 5, 查看比较后的结果:

<table> 
 <thead> 
  <tr> 
   <th align="left">比较运算符</th> 
   <th align="left">描述</th> 
   <th align="left">例子</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">==</td> 
   <td align="left">等于</td> 
   <td align="left">x == 8 为 false</td> 
  </tr> 
  <tr> 
   <td align="left">===</td> 
   <td align="left">全等(值和类型)</td> 
   <td align="left">x === 5 为 true; x === “5” 为 false</td> 
  </tr> 
  <tr> 
   <td align="left">!=</td> 
   <td align="left">不等于</td> 
   <td align="left">x != 8 为 true</td> 
  </tr> 
  <tr> 
   <td align="left">&gt;</td> 
   <td align="left">大于</td> 
   <td align="left">x &gt; 8 为 false</td> 
  </tr> 
  <tr> 
   <td align="left">&lt;</td> 
   <td align="left">小于</td> 
   <td align="left">x &lt; 8 为 true</td> 
  </tr> 
  <tr> 
   <td align="left">&gt;=</td> 
   <td align="left">大于或等于</td> 
   <td align="left">x &gt;= 8 为 false</td> 
  </tr> 
  <tr> 
   <td align="left">&lt;=</td> 
   <td align="left">小于或等于</td> 
   <td align="left">x &lt;= 8 为 true</td> 
  </tr> 
 </tbody> 
</table>

**比较运算符示例代码:**

### 4. 逻辑运算符 ###

假如 x=6, y=3, 查看比较后的结果:

<table> 
 <thead> 
  <tr> 
   <th align="left">比较运算符</th> 
   <th align="left">描述</th> 
   <th align="left">例子</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">&amp;&amp;</td> 
   <td align="left">and</td> 
   <td align="left">(x &lt; 10 &amp;&amp; y &gt; 1) 为 true</td> 
  </tr> 
  <tr> 
   <td align="left">||</td> 
   <td align="left">or</td> 
   <td align="left">(x == 5 || y==5) 为 false</td> 
  </tr> 
  <tr> 
   <td align="left">!</td> 
   <td align="left">not</td> 
   <td align="left">!(x==y) 为 true</td> 
  </tr> 
 </tbody> 
</table>

**逻辑运算符示例代码:**