浅学一下JavaScript

超、凢脫俗 2024-03-26 19:55 76阅读 0赞

## 一、JavaScript ##

### **1.1 JavaScript简介** ###

JavaScript一种解释性脚本语言，是一种动态类型、**弱类型**、基于原型继承的语言，内置支持类型。  
它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

### **1.2 JavaScript组成部分** ###

ECMAScript语法

文档对象模型（DOM Document Object Model）

浏览器对象模型(BOM Browser Object Model)

<table style=""> 
 <tbody> 
  <tr> 
   <td style="width:213px;vertical-align:top;height:106px;"><p style="text-align:left;"><span style="font-size:13pt;"><span style="font-weight:bold;">var 全局变量</span></span></p><p style="text-align:left;"><span style="font-size:13pt;"><span style="font-weight:bold;">let 局部变量</span></span></p><p style="text-align:left;"><span style="font-size:13pt;"><span style="font-weight:bold;">const 常量</span></span></p></td> 
  </tr> 
 </tbody> 
</table>

## 二 JS的引入 ##

### **2.1 在标签内写js** ###

alert(' ') 或者 alert(" ") （**单引号、双引号都可以**）

### **2.2 在文件使用<script>标签引入js** ###

css写样式,需要把style标签写在head标签内

但是写js代码的script标签,可以写在html页面的**任何位置**,head标签内,body标签内都可,但是**一般建议放在后面,越晚加载越好**

### **2.3 独立的js文件** ###

1.  创建一个后缀为.js的文件

1.  文件内写js代码

1.  在html文件内使用<script>标签引入该js文件

1.  引入js文件的位置,在html中也是任意的

1.  作为引入js文件的<script>标签,不能在其中间写js代码

## 三 JavaScript基本语法 ##

### **3.1 变量** ###

在JavaScript中，**任何变量都用var**关键字来声明，var是variable的缩写。

var是声明关键字，a是变量名，语句以分号结尾(其实可有可无)。

这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中不可以写"int int=1;"一样。

#### JavaScript的部分关键字： ####

<table style=""> 
 <tbody> 
  <tr> 
   <td style="width:712px;vertical-align:top;height:51px;"><p style=""><span style="font-size:13pt;">abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。</span></p></td> 
  </tr> 
 </tbody> 
</table>

JavaScript是弱类型语言,**声明时不需要设置变量的类型**,赋值时就可以赋值任何类型

// js是弱类型，变量声明不需要数据类型，直接用var
    var a = 1;
    // 将结果输出到控制台
    console.log(a);
    a = "aa";
    console.log(a);
    a = 'a';
    console.log(a);
    a = true;
    console.log(a);
    a = new Date();
    console.log(a);
    var n = true;
    console.log(typeof (n));
    console.log(typeof (a));

### **3.2 基本数据类型** ###

1.  基本类型有五种

1.  数字(number)

1.  字符串(string)

1.  布尔型(boolean)

1.  未定义(undefined)

1.  空(null)

变量有不同的类型,不同类型使用的作用不一样

• number类型,数字,那就可以做算术,逻辑运算等 (后续运算时使用)

• boolean类型,那就可以用于逻辑判断,分支语句,循环等 (后续分支循环时使用)

• string类型,那就可以使用字符串的方法,对字符串操作(跟java中String操作很像)

完整的string操作,可以查看APIJavaScript 字符串方法 ([w3school.com.cn][])

var y = "Java-Script"; // string类型
          var j = y.charAt(0); // 根据下标找字符
          console.log(j);
          console.log(y.indexOf("a")); // 找到第一个指定字符的下标
          console.log(y.lastIndexOf("a")); // 找到最后一个指定字符的下标
          console.log(y.split("-")); // 根据指定字符,拆分字符串,返回字符串数组
          console.log(y.substring(5)); // 根据指定截取字符串,直到末尾
          console.log(y.substring(5, 8)); // 根据指定下标截取字符串,[begin,end)
          // length不是方法,是属性,调用时不用()
          console.log(y.length); // 获得字符串长度

### **3.3 引用类型** ###

其实引用类型是借鉴Java中的对象的思想.

JS中的**引用类型其实就是JSON**,全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。

语法格式：

JSON对象使用大括号,\{\}

大括号内,是键值对,键值对使用是**冒号**分割**.\{key:value\}**

键正常写,值得写法区分数字,字符串,布尔值,数组,对象等

*  \{id:18\} 数字直接写

*  \{name:"张三"\} 字符串需要双引号

*  \{sex:true\} 布尔值直接写

*  \{arr:\[1,2,3\]\} 数组使用\[\]

*  \{obj:\{\}\} 对象使用\{\}

大括号内,可以同时写多个键值对,中间使用**逗号隔开**

\{id:18,name:"李四",sex:true\}

// JSON对象
    var jsonObj = {
        id: 1,
        name: "aa",
        sex: false,
        phone: ["110", "120", "119"],
        address: {
            contrary: "bb",
            provinceL: "cc",
            city: "dd"
        }
    };
    // 获取对象属性
    console.log(jsonObj.id);
    console.log(jsonObj.sex);
    console.log(jsonObj.address);
    
    // 修改
    jsonObj.id = 3;
    console.log(jsonObj.id);

### **3.4 数组类型** ###

数组是用来存储多个数据

*  创建时可以是空数组,后面也可以继续赋值

*  数组没有长度限制

*  数组存储的类型没有限制

创建数组的语法：

*  var 名字 = \[\]

*  var 名字 = new Array()

取值赋值的语法：

*  数组名\[下标\]

// 数组类型
    var arr1 = [];
    console.log(typeof (arr1));
    arr1[0] = 2;
    arr1[1] = 3;
    arr1[6] = 3;
    console.log(arr1);
    
    var arr2 = new Array();
    console.log(arr2);
    
    var arr3 = new Array(1, 2, "{", { id: 1 });
    console.log(arr3);
    arr3[3] = 1;
    console.log(arr3);
    
    var arr4 = [1, 2, "{", { id: 1 }];
    console.log(arr4);
    
    console.log("----------------");
    // js中创建的对象都有自己的方法可以调用 
    var arr5 = [1, 2, 3];
    console.log(arr5);
    // 添加元素到末尾
    arr5.push(4);
    console.log(arr5);
    // 添加元素到开头
    arr5.unshift(0);
    console.log(arr5);
    // 删除最后一个元素
    arr5.pop();
    console.log(arr5);
    // 删除第一个元素并返回
    arr5.shift();
    console.log(arr5);

### **3.5 日期类型** ###

创建日期对象,  
日期对象提供了方法可以获得/设置日期信息

### 3.6运算符、分支、循环 ###

此三种操作同Java：

*  算术运算

*  关系运算

*  逻辑运算

*  三目运算

*  if

*  if-else

*  if-elseif-elseif-else

*  switch

*  while

*  dowhile

*  for

### **3.9 函数(重点)** ###

函数就是java中方法的概念,用来完成某些功能的.  
定义函数的语法：

<table style=""> 
 <tbody> 
  <tr> 
   <td style="width:451px;vertical-align:top;height:51px;"><p style=""><span style="font-size:13pt;">function 函数名(参数1,参数2,...) { </span></p><p style=""><span style="font-size:13pt;">// 执行代码</span></p><p style=""><span style="font-size:13pt;">}</span></p><p style=""><span style="font-size:13pt;">/*</span></p><p style=""><span style="font-size:13pt;">1. function是固定,每个方法都需要设置</span></p><p style=""><span style="font-size:13pt;">2. 没有定义返回值类型,也没有void</span></p><p style=""><span style="font-size:13pt;">3. 函数名,见名知意</span></p><p style=""><span style="font-size:13pt;">4. 参数直接写参数名,没有 数据类型,也没有var</span></p><p style=""><span style="font-size:13pt;">5. 如果要返回数据,通过return 值;返回</span></p><p style=""><span style="font-size:13pt;">*/</span></p></td> 
  </tr> 
 </tbody> 
</table>

script>
          // 1 无参无返回值
          function fun1() {
            console.log("无参无返回值...");
          }
          // 调用方法,方法名直接调用
          fun1();
    
          // 2 有参无返回值
          function fun2(a) {
            console.log("fun2执行");
            console.log(a);
          }
          // 方法有参数,调用时不传参数,方法能执行,但是变量显示未定义
          // 方法有参数,调用时实参多于形参,方法能执行,多余的参数无意义
          fun2(10, 20);
    
          // 3 无参有返回值
          function fun3() {
            return 200;
          }
    
          var result = fun3();
          console.log(result);
    
          // 4 有参有返回值
          // 设计方法,传入2个参数,相加后返回
          
        </script>

#### 匿名函数（直接用var接收） ####

// 5 匿名函数,主要用于配合事件操作
          var obj = function () {
            console.log("匿名函数");
          };

## 四、常见的弹窗函数 ##

### **4.1 警告框（alert）** ###

<button onclick="alert('你干嘛~哎呦')">按钮 </button>
    
    <script>
         alert("你干嘛~哎呦");
    </script>

<button id="btn-1">我是js方法写的</button>
    <script>
        // 1.找到btn-1
        var btn = document.getElementById("btn-1");
        btn.onclick = function () {
            alert("第二种方案弹");
        };
    </script>

### **4.2 确认框 （confirm）** ###

### **4.3 输入框（prompt）** ###

[w3school.com.cn]: https://w3school.com.cn