JS(3)

最新推荐文章于 2022-06-14 21:16:58 发布

John_boom

最新推荐文章于 2022-06-14 21:16:58 发布

阅读量923

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/John_boom/article/details/78013179

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

复习

一、提示框

1. 弹出警示框   alert();      window.alert();   window 窗口   
2. 控制台输出   console.log() 
3. 文档打印    document  文档     document.write();

下面哪种JavaScript语法格式是正确的（）

A．echo "I enjoy JavaScript";                             
B．document.write( I enjoy JavaScript)
C．response.write("I enjoy JavaScript ");   
D．alert("I enjoy JavaScript ");

d是对的。
二、变量
字母 _ $ 开头
var dd=100,ee=10声明多个变量逗号隔开
Javascript中, 以下声明变量语句中哪个不正确？

A、var aa;   
B、var bb=3; cc='good';  
C、var dd = ee = 100;  
D、var ff=3, gg='he's good';

D 错， gg的格式错误
三、事件三要素
事件源 被触发的对象名词

事件动词 onclick onmouseover onmouseout

事件处理程序 放到函数里面就行了

事件源.事件 = function(){ 语句; }
入口函数:window.onload = function(){ }
四、
行内式
<div onclick=”alert(11)”>
内嵌式
外链式
<script type=”text/javascript” src=”xx.js”></script>
五、数据类型
Number string boolean null undefined

函数(function)

函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数的声明

函数使用跟变量一样，需要声明

自定义函数

function fun(){
    alert("我是自定义函数")
}
fun();  // 函数不调用，自己不执行

函数直接量声明

var fun1 = function(){
    alert("直接量声明")
}
fun1();  也需要调用

利用Function 关键字声明

var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

变量声明提升

什么是变量提升

1   function fun(){
2          console.log(num);
3          var num = 20;
4  }

相当于 —

5  function fun(){
6          var num;
7          console.log(num);
8          Num = 20;
9  }

在函数体内部，声明变量，会把该声明提升到函数体的最顶端。只提升变量声明，不赋值。

var a = 18;
f1();
function f1(){
    var b=9;
    console.log(a);
    console.log(b);
    var a = '123';
}

结果是： undefined 9

函数参数

arguments是存储了函数传送过过来实参
Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例.
arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同
arguments对象的长度是由实参个数而不是形参个数决定的

    <script>
    function fn(a,b)
    {
        console.log(fn.length); //得到是 函数的形参的个数
        //console.log(arguments);
        console.log(arguments.length); // 得到的是实参的个数
        if(fn.length == arguments.length)
        {
            console.log(a+b);
        }
        else
        {
            console.error("对不起，您的参数不匹配，正确的参数个数为:" + fn.length);
        }
        //console.log(a+b);
    } 
    fn(1,2);
    fn(1,2,3);
</script>

var a = 10, b = 20;
等价的
var a = 10;
var b = 20;

案例鼠标展示

代码：

var box = document.getElementById("box");
function fn(liid,bg){  // 封装函数  参数的传递
    var obj = document.getElementById(liid);
    obj.onmouseover = function(){
        box.style.backgroundImage = bg;
    }
}
fn("li01","url(images/01big.jpg)"); // 实参
fn("li02","url(images/02big.jpg)");
fn("li03","url(images/03big.jpg)");
fn("li04","url(images/04big.jpg)");
fn("li05","url(images/05big.jpg)");

案例函数传递控制盒子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin:20px;
            display: none;
        }
    </style>
    <script>
        window.onload = function(){}
       //功能相同的   都是显示某个盒子
        function fn(obj){  //形参  目的 是为了 接受 实参  有接就有送
            var target = document.getElementById(obj);
            target.style.display = 'block';
        }

    </script>
</head>
<body>
<button onclick = "fn('demo1');">第1个按钮</button>
<button onclick = "fn('demo2');">第2个按钮</button>
<button onclick = "fn('demo3');">第3个按钮</button>
<button onclick = "fn('demo4');">第4个按钮</button>
<div id="demo1">1</div>
<div id="demo2">2</div>
<div id="demo3">3</div>
<div id="demo4">4</div>
</body>
</html>

$id函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="demo"></div>
<div id="test"></div>
<div id="another"></div>
<script>
    /*var demo = document.getElementById("demo");
    var test = document.getElementById("test");
    var another = document.getElementById("another");*/
    function $(id){
     return document.getElementById(id);
    }
    $("demo").style.backgroundColor = 'purple';
    $("test").style.backgroundColor = "blue";

</script>
</body>
</html>

把获得元素封装成函数，起到简化书写的作用。

返回值 return

定义：
一个函数实际上就是一个计算过程，计算完成之后的结果就是返回值。
定义函数的返回值：
在函数内部用return来设置返回值，一个函数只能有一个返回值。
同时，终止代码的执行。
所有的自定义函数默认没有返回值；
return 后面不要换行

function $(id){
 return document.getElementById(id);
}
$("demo").style.backgroundColor = 'purple';
$("test").style.backgroundColor = "blue";

以下代码执行的结果是多少？请分析为什么？

1   var total=10;
1   var number = square(5);
2   alert(number);
3   function square(n) {
4       total = n*n;
5       return total;
6  }

结果是 25

算术运算符

+ - * / % ^
1+1 = 2
5%2 == 1
2%5 == 2
2^3
a++ ++后置每次自加1 先运算后自加

++a ++前置每次自加1 先自加后运算

分析代码，得出正确的结果。

var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e);

result: 77

条件语句(if)

If(条件表达式) { 语句;}
If() {}else {}
If() else if(){} else if(){} else {}

实例：检验是否中奖

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
       window.onload = function(){
           function $(id){ return document.getElementById(id);}
           $("btn").onclick = function(){
               //alert(11);
               //alert($("txt").value); // 获得表单的值
               if($("txt").value == "刘德华")
               {
                   alert("恭喜");
               }
               else
               {
                   alert("查无此人");
               }
           }
       }
    </script>
</head>
<body>
<input type="text" id="txt" value="请输入.."/> <button id="btn">查询</button>
</body>
</html>

获得焦点失去焦点事件

我们前面学过了 onclick 点击 onmouseover onmouseout’
获得焦点: onfocus
失去焦点: onblur

两个表单小方法：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
            var sele = document.getElementById("select");
            txt.focus(); //自动获得焦点
            sele.onmouseover = function(){
                this.select(); //选择
            }
        }
    </script>
</head>
<body>
自动获得焦点:
<input type="text" id="txt"/>

鼠标经过选择表单:
<input type="text" id="select"/>
</body>
</html>

 <script>
    window.onload = function(){

        var txt = document.getElementById("txt");

        txt.onfocus = function(){ //得到焦点
            //alert("得到了焦点");
            //什么时候该清空呢
            //用户没有输入的时候，用户第一次使用的时候
           // 如果 这里input 里面的文字 是 请输入...  说明用户没有用过，就应该清空
            if(txt.value == "请输入...")
            {
                txt.value = "";
                txt.style.color = "#333";
            }
        }

        txt.onblur = function(){ //失去焦点
            //alert("失去了焦点");
            //什么时候再还原呢？
            //input的值是 空的时候，我们再复原
            if(txt.value == "")
            {
                txt.value = "请输入...";
                txt.style.color = "#ccc";
            }
        }
    }
</script>

this (自己的)

指的是本身
This 主要是指事件的调用者。

className 类名
$("result").className ="wrong";
innerHTML
更换盒子里面的内容文字标签都换.
表单更换内容
input.value
isNaN(“12”) 如果里面的不是个数字返回 true 否则返回false

属性和方法

手机
黑色的 5.5寸的
外在特性
属性
手机的颜色是黑色的。
Iphone.color = “red”; 属性给值一定是等号
方法：
手机打电话发短信玩游戏聊QQ 看电影
动词可以干什么
Iphone.tel();
方法和属性的区别：
方法一律带有小括号 isNaN( ); 动词
方法给值：isNaN（“值”）;

表单自动获得焦点

Txt.focus(); 方法
onfocus 事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
            txt.focus(); //自动获得焦点
        }
    </script>
</head>
<body>
自动获得焦点:
<input type="text" id="txt"/>
</body>
</html>

鼠标经过选择表单

 sele.onmouseover = function(){
    this.select(); //选择
}

方法.select(); 选择功能

For 循环

getElementsByTagName() 获取某类标签

前面我们可以得到一个盒子通过 id 获得
getElementById() 只得到一个盒子
我们想要获取某类标签比如说所有的div li span
getElementsByTagName(); 很多个所以是复数很多个
得到的是一个伪数组。
Lis 数组
Lis[索引号] 一个

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>

        window.onload = function(){
            var lis = document.getElementsByTagName("li");
           // lis[1].innerHTML = "abc";
            //alert(lis.length);
            for(var i=0; i<lis.length-1;i++)
            {
                lis[i].innerHTML = "abc";
            }

        }
    </script>
</head>
<body>
<ul id="btn">
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
</body>
</html>

作业

1.编写一个程序，计算增加后的工资。要求工龄满5，增加20%工资；若2—4，则增加15%；若小于2，则增加10%工资。
2. 编写一个程序，用户输入一个数，可以求出这个数的阶乘。
3. 利用for循环遍历京东背景图片。

案例

鼠标展示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;}
        #box {
            height: 70px;
            width: 360px;
            padding-top: 360px;
            border:1px solid #ccc;
            margin:100px auto;
            overflow: hidden;
            background: url(images/01big.jpg) no-repeat;
        }
        #box ul{
            overflow: hidden;
            border-top:1px solid #ccc;
        }
        #box li {
            float: left;
        }
    </style>
    <script>
        window.onload = function(){
           /*  一共有五组   这些有哪些相同的部分：
              鼠标经过   背景更换图片    我们可以吧这两个放到一个函数里面 重复使用就可以*/
            //事件源    li   事件  鼠标经过   事件处理程序   box 更换背景
          /*  var li02 = document.getElementById("li02");
            var box = document.getElementById("box");
            li02.onmouseover = function(){
                box.style.backgroundImage = "url(images/02big.jpg)";
            }
            var li01 = document.getElementById("li01");
            var box = document.getElementById("box");
            li01.onmouseover = function(){
                box.style.backgroundImage = "url(images/01big.jpg)";
            }*/
            var box = document.getElementById("box");
            function fn(liid,bg){  // 封装函数  参数的传递
                var obj = document.getElementById(liid);
                obj.onmouseover = function(){
                    box.style.backgroundImage = bg;
                }
            }
            fn("li01","url(images/01big.jpg)"); // 实参  调用函数
            fn("li02","url(images/02big.jpg)");
            fn("li03","url(images/03big.jpg)");
            fn("li04","url(images/04big.jpg)");
            fn("li05","url(images/05big.jpg)");

        }
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li id="li01"><img src="images/01.jpg" alt=""/></li>
        <li id="li02"><img src="images/02.jpg" alt=""/></li>
        <li id="li03"><img src="images/03.jpg" alt=""/></li>
        <li id="li04"><img src="images/04.jpg" alt=""/></li>
        <li id="li05"><img src="images/05.jpg" alt=""/></li>
    </ul>
</div>
</body>
</html>

核心思想：封装函数，达到简化代码的效果

点击隐藏文字的效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input,button {
            border:0 none;
            padding:0;
        }
        .search {
            width:258px;
            height:40px;
            margin: 100px auto;
            background-color: pink;
        }
        .search input {
            width:208px;
            height: 40px;
            background: url(images/left.jpg) no-repeat;
            outline-style: none;
            padding-left: 8px;
            color: #ccc;
            float: left;
        }
        .search button {
            height: 40px;
            width: 42px;
            background: url(images/right.jpg) no-repeat;
            float: left;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){

            var txt = document.getElementById("txt");
            txt.onfocus = function(){ //得到焦点
                //alert("得到了焦点");
                //什么时候该清空呢
                //用户没有输入的时候，用户第一次使用的时候
               // 如果 这里input 里面的文字 是 请输入...  说明用户没有用过，就应该清空
                if(txt.value == "请输入..."  )
                {
                    txt.value = "";
                    txt.style.color = "#333";
                }
            }
            txt.onblur = function(){ //失去焦点
                //alert("失去了焦点");
                //什么时候再还原呢？
                //input的值是 空的时候，我们再复原
                if(txt.value == "")
                {
                    txt.value = "请输入...";
                    txt.style.color = "#ccc";
                }
            }
        }
    </script>
</head>
<body>
<div class="search">
    <input type="text" value="请输入..." id="txt"/>
    <button></button>
</div>
</body>
</html>

简单验证表单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            text-align: center;
            margin:100px auto;
        }
        span {
            display: inline-block;
            width: 150px;
            height: 20px;
            border: 1px solid #ccc;
            font-size:12px;
            line-height: 20px;
            text-align: left;
            padding-left: 20px;
            background-color: #eee;
            color:#999;
        }
        .right {  /*正确的*/
            color: #5EFF5E;
            background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
            border: 1px solid #ACFFAC;
        }
        .wrong {  /*错误的*/
            background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
            border: 1px solid #FFAC91;
            color: #FF6B39;
        }
    </style>
    <script>
        window.onload = function(){
            function $(id){ return document.getElementById(id);}
            $("txt").onblur = function(){   // 离开焦点判断
                // alert($("txt").value);
                 //alert(this.value);
                if(this.value == "")
                {
                    $("result").className ="wrong";
                    $("result").innerHTML = "内容不能为空";
                }
                else if(isNaN(this.value))  // 判断不是数字
                {
                    $("result").className ="wrong";
                    $("result").innerHTML = "请输入数字思密达";
                }
                else if(this.value >150 || this.value<0)
                {
                    $("result").className ="wrong";
                    $("result").innerHTML = "请输入合理的范围";
                }
                else
                {
                    $("result").className ="right";
                    $("result").innerHTML = "输入正确";
                }
            }

        }
    </script>
</head>
<body>
<div class="box">
    语文: <input type="text" id="txt"/>  <span id="result">请输入成绩</span>
</div>
</body>
</html>

初次学习，这几个例子一定要熟练掌握。

John_boom

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS(3)

复习一、提示框1. 弹出警示框 alert(); window.alert(); window 窗口 2. 控制台输出 console.log() 3. 文档打印 document 文档 document.write();下面哪种JavaScript语法格式是正确的（）A．echo "I enjoy JavaScript";
复制链接

扫一扫