欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript(JS)的简单使用

程序员文章站 2022-03-22 12:01:05
一、什么是JS(Javascript)? Javascript是一种脚本语言,被广泛用于Web应用开发,常用来为网页添加各式各样的功能,为用户提供更加流畅的浏览效果。 Javascript严格区分大小写。 前端三剑客:html+css+js html:结构(房子) css:样式(装修) js:行为( ......

一、什么是js(javascript)?

  javascript是一种脚本语言,被广泛用于web应用开发,常用来为网页添加各式各样的功能,为用户提供更加流畅的浏览效果。

  javascript严格区分大小写。

前端三剑客:html+css+js

  html:结构(房子)
  css:样式(装修)
  js:行为(动态的修改行为和样式:房子的结构和装修想改就改)

 

使用js的三种写法:

  1、在标签内部完成(不常用

例:(alert("弹窗内容"):出现一个弹窗)

<a href="javascript:alert(0);">点我啊!</a>
<p onclick="alert('来啦老弟!')">请点击我!</p>

 

  2、在script标签中完成(注意:script标签可以写在html中的任意位置,但建议写在页面最底部,利于提高用户体验

<script type="text/javascript">
            alert("哈哈哈");
    </script>

 

  

  3、外连式(创建一个js文件,里边写的都是js代码,然后再html中引用)

html文件中引用js文件:

    <!-- 因为ha.js文件和咱们这个html文件在同一文件夹,所以路径直接写src="ha.js" -->
    <script type="text/javascript" src="ha.js"></script>    

 

js文件(后缀为.js的文件):

//js代码就写在这里,如下:


//当页面刷新就会弹窗以下弹框
window.onload=function(){
    //alert()是一个弹窗
    alert("欢迎您的到了!");
}

 

二、js的特性

  1、js的数据类型

  js中的数据类型只有三种:number,string,boolean

    number:所有数字类型的统称。

    string:字符串类型。

    boolean:布尔类型(true/false)

  2、特殊类型

    nan:出现非数字

    infinity:除数为0

    undefined:未定义

    null:空(必须主动赋值才会是null,没有赋值都为undefined)

  3、运算符

    ==:代表普通比较

    ===:代表全等

    " "和undefined表示没有值:null其实是一个值

    ||:或(注意:在java中,||返回的一定是boolean值,但在js中,返回的是第一个为true的值

 

三、具体实例

   1、js预编译    

    js的代码执行顺序是从上往下执行,但在代码执行之前js会事先大概扫描一遍,把所有变量的定义放到最前面(只是定义,不包括值)

<script type="text/javascript">

    //js的代码执行顺序是从上往下执行
    //但在代码执行之前js会事先大概扫描一遍,把所有变量的定义放到最前面(只是定义,不包括值)
    
    var use="23";
    console.debug(use);
    //结果为23
    
    var userna;
    console.debug(userna);
    //结果为undefined
    
     console.debug(us);
     var us;
     //结果为undefined
     
    console.debug(username);
     var username="23";
     //结果为undefined
     
     
     console.debug(usern);
     //直接报错,因为usern没定义
     
</script>

 

  2、对象三步曲

     1、创建对象

    2、设置对象的属性和方法:添加,修改,删除

    3、获取对象的属性和方法

<script type="text/javascript">
    //1、创建对象
    //var obj = new object();
    var obj = {};
    
    //2.设置对象的属性与方法(.和[]是一样的)
     //添加属性方法一:
    obj.name="小王"
    obj.age =23;
    obj.say = function(){
        console.debug("过来呀!");
        
    } 
    //添加属性方法二:
    obj["name"]="小王";
    obj["age"] =23;
    obj["say"]= function(){
        console.debug("过来呀!");
    } 
    
    /* 
        for...in是用于循环与遍历数组/对象的
        数组:key就是下标
        对象:key就是对象的属性
    */
    for(var key in obj){
        //key是下标
        //输出属性和属性类型
        console.debug(obj[key],typeof obj[key]);
        
        //如果obj对象的属性类型为方法,就输出
        if(typeof obj[key] == "function"){
            //输出属性
            console.debug(obj[key]);
            //调用对象中 的方法属性
            obj[key]();
        }  
    }
    
    
    //修改(修改与添加设置写法是一样的)
    obj.name="小李";
    
    //删除某一个属性
    delete obj.age;
    
    //3.获取属性和方法
     console.debug(obj.name);
    console.debug(obj.age);
    console.debug(obj.say);
    obj.say(); 
     
</script>

 

 

  3、arguments(获取到调用函数时传进去的所有参数) 

    js内置了很多对象(如:arguments ): 内置对象(js自动为你准备好的)

    arguments -> 每次调用方法都会在方法中创建这对象

    arguments -> 伪数组(它里面装的就是这个方法的所有参数)

<script type="text/javascript">
    /**
        js中调用函数(方法)和参数无关
        js内置了很多对象: 内置对象(js自动为你准备好的)
            arguments -> 每次调用方法都会在方法中创建这对象
            arguments -> 伪数组(它里面装的就是这个方法的所有参数)
    */
    function add(){
        //打印每次调用add方法时传的所有参数
        console.debug(arguments)
        var result = 0;
        for(var i=0;i<arguments.length;i++){
            //将传进add方法的参数全部加起来
            result += arguments[i];
        }
        return result;
    }
            
    console.debug(add(5));  //5
    console.debug(add(5,8));  //13
    console.debug(add(5,8,2));  //15
    console.debug(add(5,8,2,5));  //20

</script>

 

  4、js中调用函数(方法)和参数无关 

    注意:调用函数和参数无关,如果出现相同名字的方法,根据js代码从上往下执行的原则,下面的方法会覆盖上面的方法。

    返回值:想返回什么直接return 值 进行返回,如果没有return,自动返回undefined。

    js中一切都是对象

    函数就是方法,方法就是函数

 

    函数:面向过程的说法 ;方法:面向对象的说法

 

<script type="text/javascript">
    //一切都是对象
    //函数就是方法,方法就是函数
    // 函数:面向过程的说法  方法:面向对象的说法
    
    function say(){
        alert(0);
    }
    say(); //调用函数必须要加一个括号
    
    
    var say = new function("a","b","return a+b;");
    console.debug(say(4,6));    
    
    /**
        注意:调用函数和参数无关,如果出现相同名字的方法,根据js代码从上往下运行原则,下面的方法会覆盖上边的方法
        返回值:想返回什么直接return 值 进行返回,如果没有return,自动返回undefined
    */
    function say(a,b){
        alert(a+b);
    }
    
    console.debug(say(5,6));//控制台打印11
    console.debug(say(5));//控制台打印nan,因为第二个参数为undefined
    console.debug(say(5,6,7));//控制台打印11 

    say(4,6);
</script>

  

  5、动态调用方法

  使用.与[]是一个效果(就是说可以用.的都可以用[])

<script type="text/javascript">
    
    //我们拿一个对象的属性,使用.与[]是一个效果(就是说可以用.的都可以用[])
    console.debug(window.username);
    console.debug(window["username"]);
    //用[]调用方法,称为:动态调用(因为这样写方法名就可以随意更换了,但参数还在)
    window["say"](5,5);
    console.debug(window); 
    
</script>

 

  6、全局变量    

      window->我们在外部定义【全局变量:script标签里面,方法外面】的所有的变量以及方法都属于顶层对象,可以直接用window点出来

      注意:定义的全局变量请不要使用如:name,close,onclick,onclose........作为名字,它们都是js中的关键字,使用了会把js原有的名字覆盖,会出问题。

    查看js的关键字:console.debug(window);    这句代码会在浏览器控制台上打印出js中的关键字

<script type="text/javascript">

    var username = "张三";
    
    function say(a,b){
        alert(a+b);
    }
    console.debug(window);
    console.debug(username);
    console.debug(window.username);
    window.say(5,7);
    
</script>

  

  7、对象的拷贝

<script type="text/javascript">
    var obj01 = {
        name:"小八戒",
        age:34,
        email:"xxx@qq.com"
    }
    var obj02 = {
        name:"小悟空"
    };
    //遍历第一个对象,把它的所有属性交给第二个对象
    for(var key in obj01){
        //判断一个对象是否有这个属性
        // hasownproperty()来判断是否已经存在这个属性
        if(!obj02.hasownproperty(key)){
            obj02[key]= obj01[key];
        }
    }
    
    console.debug(obj01)
    console.debug(obj02)

</script>

 

  8、函数也是一个对象

    函数也是一个对象,也可以创建属性,还可以在自己基础上再创建方法

<script type="text/javascript">
    
    //函数也是一个对象
    function say(){
        alert(0);
    }
    //say()方法添加name,age,sex,hello()属性
    say.name = "haha"; //name是一个只读属性
    say.age = 5;
    say.sex = true;
    //创建hello()方法
    say.hello = function(){
        alert("hello...")
    }
    
    console.debug(say);
    //调用say方法的属性hello()方法
    say.hello();
    
</script>

 

  9、this

    this在js中是一个很重要,很常用的属性,谁调用,this就指向谁。

<script type="text/javascript">
    
    var obj01 = {
        name:"小张",
        age:12
    };
    var obj02 ={
        name:"小王",
        age:45
    }
    
    //谁调用,this就指向谁
    var say = function(a,b){
        console.debug(a,b);
        console.debug(this.name+","+this.age);
    }
    
        obj01.hello = say;
        obj01.hello();
        obj02.hello = say;
        obj02.hello();
    
    //改变this的指向
    /**
        call和apply都可以改变this的指向
            call:是可变 参数方案,直接传参
            apply:第二个参数必需是一个数组
    */
    say.call(obj01,3,6);
    say.apply(obj02,[4,6])
    
</script>

 

  10、prototype

<script type="text/javascript">
    /**
        prototype:为原生对象扩展一个方法(按照自己需要的格式显示时间)
    */
    date.prototype.format = function(){
        console.debug(this)
        //按照自己需要的格式显示时间
        return this.getfullyear()+"-"+(this.getmonth()+1)+"-"+this.getdate();
    }
    
    var date = new date();
     console.debug(date.getmonth())
     console.debug(date.getfullyear())
    
    console.debug(date.format());
    
</script>

 

  11、回调函数

<script type="text/javascript">
/**
 * 我们可以把一个函数当作另外一个函数的属性传过去,而传过去的这个函数我们把它称之为回调函数
 */
 /*
 var i = 0;
 setinterval(function(){
     console.debug(i++);
 },1000);
 */
 var i=0;
 function haha(){
     console.debug(i++)
 }
 //定时器:每过一秒把haha()函数当setinterval()函数的属性传回去再次执行
 setinterval(haha,1000);
 
</script>

 

  12、匿名函数

<script type="text/javascript">
/**
 * 匿名函数就是一个没有名称的函数
     
     它可以改变代码的作用域
     jquery $
 */
 (function(a,b){
    console.debug(a+b)    
 })(3,9)
 
</script>

 

  13、闭包

<script type="text/javascript">

//闭包,指的是语法。简单理解就是:函数中可以使用函数之外定义的变量。一种封装特性
var username ="王权富贵";
function say(){
    //这里的函数之外的变量指的是username
    console.debug(username);
}
//调用函数/方法
say();
 
</script>

 

  14、计数器

<script type="text/javascript">

(function(){
    var result = 0;
    window.getres = function(){
        result++;
        return result;
    }
})()


//让变量result的值只能通过方法修改,无法直接修改
console.debug(getres()); //1
console.debug(getres()); //2

console.debug(getres()); //3
console.debug(getres()); //4
console.debug(getres()); //5

</script>

 

  15、事件监听

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件监听测试</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
    $(function(){
        //"click.qing":给这个点击事件取一个名叫qing
        $("#mybtn").on("click.qing",function(){
            console.debug("明天天晴!!!");
        })
        
        $("#mybtn").on("click.feng",function(){
            console.debug("明天有风!!!");
        })
        
        $("#mybtn").on("click.guang",function(){
            console.debug("明天逛街!!!");
        })
        
        //取消逛街这个方法
        $("#mybtn").off("click.guang");
    })
</script>
</head>
<body>

<button id="mybtn">点我有惊喜哦!!!</button>

</body>
</html>

 

  16、jquery继承

<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
    $(function(){
        
        var obj =  {tel:"1836****000",sex:true};
        var obj1 = {name:"达康书记",age:100};
        var obj2 = {};
        //把第一个对象的属性,交给第二个对象
        //把后面的对象的属性,交给前面
        $.extend(obj2,obj1,obj);
        
        console.debug(obj2);
        
    })
</script>

 

  17、jquery自定义插件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义插件</title>
<script type="text/javascript" src="jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
    
    $.fn.changecolor = function(){
        //.hover():鼠标移上来与移出去的事件
        this.hover(
            function(){
                //鼠标移上来,class属性上再添加一个名字:youdiv
                 $(this).addclass("youdiv");
            },
            function(){
                //鼠标移出去,class属性上添加的名字删除
                $(this).removeclass("youdiv");
            }
        )
    }
    
    $(function(){
        //调用自定义的插件
        $("#mydiv").changecolor();
        
    })
</script>

<style type="text/css">
    .mydiv{
        width:100px;
        height:100px;
        background: red;
    }
    .youdiv{
        background: blue;
    }
</style>
</head>
<body>
<div id="mydiv" class="mydiv"></div>

</body>
</html>