JavaScript基本操作

超、凢脫俗 2021-09-27 15:54 298阅读 0赞

### 一、基础语法与简介 ###

说明：js和html可以写在一起，但javascript的代码不属于html语言，所以为了便于维护，所以将js和html分开写。

练习用软件：**Intelli Idea（推荐，带检查）**、pycharm（无法检查script部分的语法）、editplus、sublime等等

### 二、基础语法 ###

**1、输出**

*  **弹窗**：alert("hello world");
 *  **在浏览器中输出**：document.write("<h2> 输出 <h2>");
 *  **后台输出**（可调试用）：console.log("这是后台输出");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70][]

**2、定义变量**

*  **语法**：var 变量名=变量值
 *  特点：不用特地说明是什么类型的数据，参数的类型由值来决定，和python很像，不用var也可以创建一个变量，不过是个全局变量，用的少。
 *  数据的类型有：number类、boolean、string类
 *  如何查看数据的类型：

var num=10;

console.log(**typeof num**);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 1][]

**3、定义函数**

function 函数名（参数）\{

\[return 返回值\]

**4、定义类（了解）**

*  规范的方式：

var myTitle;
    var myPrice;
    function Book(title, price){
        myTitle=title;
        myPrice=price;
    function getInfo(){
        return "title:"+myTitle+", price:"+myPrice;
    }
    return getInfo;
    }
    var book=new Book("java",19.9);
    alert(book());

*  原生的方式

function Book(title, price){
        this.title=title;
        this.price=price;
    }
    Book.prototype.getInfo=function(){  //prototype属于对原生的操作扩展
      return "title:"+this.title+", price:"+this.price;
    }
    var book=new Book("java",19.9);
    alert(book.getInfo());

5、判断字符串相等：**==**

4、数组的初始化：**var result=new Array();**

可以是混合类型，没有长度限制，是动态数组

### 三、前端事件处理-核心 ###

事件源的命名往往是onXxx() 的方式，例如：onClick()

有静态和动态两种方式，见下文：

**1、打开页面（onload）、关闭页面（onunload）**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript 第二课</title>
        <script type="text/javascript">
            function loadHandle(){
                alert("welcome!");
            }
            function closeHandle(){
                alert("goodbye");
            }
        </script>
    </head>
    <body onload="loadHandle();" onunload="closeHandle()">
    </body>
    </html>

注意：onunload在IE中能看出来，但是在谷歌浏览器中体现不出来。

**2、鼠标事件**：onmousedown（鼠标按下时触发）、onmouseenter（鼠标进入时触发）、等等一堆

具体处理函数就用上例中的弹窗。

**3、普通按钮点击事件：**分为单击、双击

按钮还有submit和reset等type，暂时没用到。

单击：<button type="button" onclick="loadHandle()">按我鸭</button>
    双击：<button type="button" ondblclick="loadHandle()" >双击我鸭</button>

**4、令表格在鼠标经过时变颜色**

**方法一：静态的方式**——**在标签元素的旁边直接写事件对应的函数**（实践中是不推荐这种的）

<head>
        <meta charset="UTF-8">
        <title>鼠标经过变色</title>
        <script>
            function changeColor(obj,color){
                obj.bgColor=color;
            }
        </script>
    </head>
    <body>
    
    <table border="1" cellpadding="10" cellspacing="0" bgcolor="F2F2F2">
        <tr onmousemove="changeColor(this,'white')" onmouseout="changeColor(this,'#F2F2F2')">
            <td>部门编号</td>
            <td>部门名称</td>
            <td>部门主管</td>
        </tr>
        <tr onmousemove="changeColor(this,'#FFFFFF')">
            <td>10</td>
            <td>技术部</td>
            <td>黑黑</td>
        </tr>
        <tr onmousemove="changeColor(this,'#FFFFFF')">
            <td>20</td>
            <td>美工部</td>
            <td>乐乐</td>
        </tr>
    </table>

**方法二：动态的方式——与标签元素的id绑定，在函数中响应该元素的事件，为元素写上唯一的id 值是核心所在！！**

script部分的代码：

window.onload=function(){ //这是一个匿名函数
        
        var imageElement=document.getElementById("image1"); //取得元素对象(不能有多余的空格，会报错)
        imageElement.addEventListener("click",loadHandle,false);  //触发类型（去掉on）、处理函数名称、触发时机（一般设置为false，表示在事件的触发过程进行处理，阻止事件冒泡）
    }

**5、例子：图片浏览器**

**html部分：**

**script部分：**

**6、例子改进：图片定时播放浏览器—— setTimeout( )**

**html部分：**

**script部分：**

var imgName=new Array("dog.jpg","dog2.jpg","dog3.jpg","pig.jpg");
    var foot=0;
    function setPic(){
        var imgEle=document.getElementById("imgShow");
        imgEle.src="jsList/image/"+imgName[foot++];
        if(foot>=imgName.length){
        foot=0;
        }
    
        setTimeout(setPic,1000);   //每隔一秒更新一次
    }
    setPic();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70]: /images/20210923/6325a362cf7d4bda9ef6072aeb8a2b59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 1]: /images/20210923/73b52aa391d8460a9750291c28f9172f.png