JavaScript基本操作

最新推荐文章于 2022-04-18 14:43:01 发布

西西噜噜

最新推荐文章于 2022-04-18 14:43:01 发布

阅读量281

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_39915585/article/details/83449131

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、基础语法与简介

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

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

二、基础语法

1、输出

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

2、定义变量

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

var num=10;

console.log(typeof num);

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（鼠标进入时触发）、等等一堆

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

<img src="image/dog.jpg" onmousedown="loadHandle()">

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

5、例子：图片浏览器

html部分：

<img id="imgShow" src="jsList/image/dog.jpg" height="400">
<div>
    <button id="preImg">上一张</button>
     <button id="nextImg">下一张</button>
</div>

script部分：

window.onload=function(){ //这是一个匿名函数

    var preBut=document.getElementById("preImg");
    var nextBut=document.getElementById("nextImg");
    var imgEle=document.getElementById("imgShow");

    preBut.addEventListener("click",function(){
     if(foot<=0){
      foot=imgName.length-1;
    }
    imgEle.src="jsList/image/"+imgName[foot--];
    },false);

     nextBut.addEventListener("click",function(){

    if(foot>=imgName.length){
      foot=0;
    }
    imgEle.src="jsList/image/"+imgName[foot++];
    },false);
}

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

html部分：

<span id="info">
    <img id="imgShow" src="jsList/image/dog.jpg" height="400">
</span>

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();

西西噜噜

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基本操作

一、基础语法与简介说明：js和html可以写在一起，但javascript的代码不属于html语言，所以为了便于维护，所以将js和html分开写。练习用软件：Intelli Idea（推荐，带检查）、pycharm（无法检查script部分的语法）、editplus、sublime等等二、基础语法1、输出弹窗：alert("hello world"); 在浏览器中输出：...
复制链接

扫一扫

专栏目录