js基础(一)总结

男娘i 2022-02-17 14:54 262阅读 0赞

# js基础 #

## 一、js简介 ##

### 1. 什么是js ###

*  JS：全拼是JavaScript。是web开发中不可缺少的脚本语言，不需要编译就能运行（解释型语言）。它“寄生”在html体内，随网络传输到客户端，在浏览器里运行。

### 2. js有什么作用 ###

*  实现页面的动态效果的
    
     *  操作浏览器
     *  操作网页

### 3. js的语法组成 ###

网景，NetScape，网景浏览器，Firefox，LiveScript，Microsoft的IE，JScript，ECMA

*  ECMAScript：规定了js的基本语法
 *  BOM：Browser Object Model，浏览器对象模型。js可以调用BOM对象，来操作浏览器
 *  DOM：Document Object Model，文档对象模型。js可以调用DOM对象，来操作网页

### 4. js的引入方式 ###

<script>
        alert();
    </script>
    
    
    <script src="js文件路径"></script>

*  注意：
    
     *  一个script标签的功能要单一
     *  js越晚加载越好，建议放在body结束标签之前

## 二、js的基本语法 ##

### 1. 基本语法 ###

1.1 变量定义

> js是弱类型语言

*  js里一切变量定义，都作用：var

1.2 数据类型

> js是动态类型语言

*  boolean：布尔类型，true/false
 *  number：数字类型，一切数字都是number类型
 *  string：字符串类型
 *  object：对象类型，包含任意对象和null
 *  undefined：未定义类型，值只有一个：undefined

1.3 运算符

*  js也有：`+,-,*,/,%,+=,-=,*=,/=,%=,++,--,>,<,=,>=,<=,==,!=,&&,||,!`
 *  需要说明的有：
    
     *  `==`和`===`：
        
         *  `==`：比较值。只要值一样，就是true
         *  `===`：比较值和类型。只有值和类型都一样，才是true
     *  `-*/`：
        
         *  如果是数字，正常运算
         *  如果不是数字，js会尝试转换成数字再运算
         *  如果转换不成功，结果是NaN
         *  如果除数是0，结果是Infinity

1.4 流程控制语句

*  js也有：`if, else, else if, while, switch, for`
 *  特殊的是：if判断时，false, 0, "", null, undefined是false，其它是true

### 2. ==函数== ###

2.1 普通函数

//1.定义一个普通函数
    function 函数名(形参1, 形参2, ...){
        //函数体
        //如果需要返回值，就return；否则就不return
    }
    //2.调用 一个普通函数
    var result = 函数名(实参1，实参2, ...);

2.2 匿名函数

//1. 把匿名函数赋值给一个变量，通过变量名调用匿名函数
    var fn = function(a, b){
        return a+b;
    }
    var result = fn(1, 2);
    
    //2. 把匿名函数作为另外一个函数的实参
    setInterval(function(){
        alert();
    },  2000);

2.3 注意事项

*  js的函数没有重载，同名函数会覆盖掉，最后一个有效
 *  js的形参个数和实参个数无关，在函数里可使用使用隐含的arguments（实参数组）获取所有的实参值

### 3. ==事件== ###

3.1 相关的概念

*  事件源：被监听的对象，通常是html标签
 *  事件(监听器)：用于监听事件源状态变化的组件，由js提供的不同的事件（监听器），用于监听不同的状态变化
 *  响应行为：监听到事件源状态变化、或者发生了动作，要执行的代码，我们自己编写

3.2 常见的事件

<table> 
 <thead> 
  <tr> 
   <th>事件(监听器)</th> 
   <th>描述，监听什么</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>onclick</strong></td> 
   <td>监听鼠标单击</td> 
  </tr> 
  <tr> 
   <td>ondblclick</td> 
   <td>监听鼠标双击</td> 
  </tr> 
  <tr> 
   <td><strong>onsubmit</strong></td> 
   <td>监听表单提交了</td> 
  </tr> 
  <tr> 
   <td><strong>onchange</strong></td> 
   <td>监听域内容改变，通常用于监听下拉框的选项变化</td> 
  </tr> 
  <tr> 
   <td><strong>onload</strong></td> 
   <td>监听加载完成，通常用于监听浏览器加载完了页面</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>监听获取焦点（光标）</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>监听失去焦点（光标）</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>监听键盘按键按下</td> 
  </tr> 
  <tr> 
   <td>onkeypress</td> 
   <td>监听键盘按键按下或按住</td> 
  </tr> 
  <tr> 
   <td>onkeyup</td> 
   <td>监听键盘按键弹起</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>监听鼠标按键按下</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>监听鼠标按键弹起</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>监听鼠标移入</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>监听鼠标移出</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>监听鼠标移动</td> 
  </tr> 
 </tbody> 
</table>

3.3 事件绑定

*  普通函数方式

<input type="button" value="点击弹窗1" οnclick="show1()">
    <script>
        function show1() {
            alert("点我干嘛");
        }
    </script>

*  匿名函数方式

<input type="button" value="点击弹窗2" id="btn2">
    <script>
        document.getElementById("btn2").onclick = function(){
            alert("点我干嘛");
        }
    </script>

## 三、js操作浏览器（bom） ##

### 1. bom简介 ###

*  BOM：Browser Object Model，浏览器对象模型。
 *  目的：让js代码调用bom对象的方法，来操作浏览器
 *  有哪些bom对象：
    
     *  window：浏览器窗口对象，是其它bom对象的顶级对象
     *  location：浏览器地址对象，可以实现网页跳转
     *  history：浏览器历史记录对象，可以实现历史记录切换
     *  screen：浏览器的屏幕显示信息对象，可以操作浏览器窗口大小、位置、颜色等信息
     *  navigator：浏览器信息对象，只读的。可以获取浏览器的内核、版本、操作系统等信息

### 2. 使用bom操作浏览器 ###

2.1 window对象

2.1.1 让浏览器弹窗

*  普通弹窗：alert(string)，没有返回值
 *  **确认弹窗**：confirm(string)，返回boolean：点击确定返回true，点击取消返回false
 *  输入弹窗：prompt(string)，返回string：点击确定返回输入的内容，点击取消返回null

2.1.2 让浏览器开启定时器

*  执行多次的定时器：
    
     *  开启：`var timer = setInterval(函数对象, 间隔毫秒值)`
     *  清除：`clearInterval(timer)`
    
        //开启定时器
        var timer = setInterval(function () {
            alert();
        }, 3000);
        
        //清除定时器
        clearInterval(timer);
 *  执行一次的定时器（延时器）：
    
     *  开启：`var timer = setTimeout(函数对象, 延迟毫秒值)`
     *  清除：`clearTimeout(timer)`
    
        //开启定时器
        var timer = setTimeout(function(){
            alert();
        }, 2000);
        
        //清除定时器
        clearTimeout(timer);

2.1.3 提供了一些函数

*  `parseInt(string)`：转换成整数
 *  `parseFloat(string)`：转换成小数
 *  `eval(string)`：把字符串作为js代码执行一次

2.2 location对象

*  获取网址：`var url = location.href;`
 *  **网址跳转**：`location.href = "http://www.baidu.com"`
 *  刷新页面：`location.reload()`

2.3 history对象

## 四、js操作网页 ##

# 内容回顾 #

1.  知道js的作用：实现页面动态效果
    
     *  操作浏览器
     *  操作网页
2.  了解js的基本语法：
    
     *  变量定义：var
     *  数据类型：boolean, number, string, object, undefined
     *  运算符：+-\*/><.....
        
         *  `==`：比较值，值一样就是true； `===`比较值和类型，都一样才是true
         *  `-*/`：js会转换成数字再运算。如果转换不成功结果是NaN
     *  流程控制语句：`if, else, else if, for, while, switch`
        
         *  `if`判断：false, 0, "", null, undefined是false，其它是true
3.  ==掌握js的函数定义和调用==
    
     *  普通函数
     *  匿名函数
     *  js的函数没有重载
4.  ==掌握事件的绑定==
    
     *  普通函数方式
     *  匿名函数方式
5.  js如何操作浏览器
    
     *  通过window对象操作浏览器窗口
        
         *  让浏览器弹窗：`alert()`, `confirm()`, `prompt()`
         *  让浏览器开启定时器：`setInterval()`， `setTimeout()`
         *  提供了一些方法
     *  通过location对象操作地址
        
         *  获取网址：`location.href`
         *  网址跳转：`location.href = ""`
         *  刷新页面：`location.reload()`