码迷,mamicode.com
首页 > 编程语言 > 详细

js(javascript)的总结 d2

时间:2017-11-07 22:18:59      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:src   方式   同名   增加   定义   忽略   运行   nbsp   对象   

一.javascript

1.java是编译解释型语言基于类的语言,而javascript是直译的脚本语言(运行一行读一行),是一种动态类型,弱类型的语言,内置支持类型,他的解释其是浏览器的一部分,最早用来给html增加动态功能,可以作为前端的验证和交互。他只有一个变量类型var类型,可以指定成字符串,对象,布尔。

2.js的三种使用方式以及比较。

     首先,第一种直接写在<button id="btn" onclick="alert(‘你点我干嘛‘)">haa</button>,onclick就是js。这种方式将html和js写在一起了,骨架和行为分离。

  其次,第二种写在html的底部或者<head>里,还是在html里不过已经将两者分开了,由于html是从上一行一行向下编译读取的,如果将html放在head里面的话,前面需要增加一些操作,即widnows onload 等操作,当页面加载完成后才执行这段代码可以很简单,这种方式用于教学。

  最后一种是写在一个css文件里,在html中body里写一个脚本,再调css里,用了src,这种方式常用于工程,需要注意的是一个页面只能被加载执行一次,因此如果用到了外联css同时内部css也用到了加载,那么他只会默认选择前面的进行操作,而不会出现相同名字的替代。

第一个·为用html,第二个为第一个调的scc.js需要注意的是他们在相同文件夹下。

 

  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"  src="scc.js"></script>
<script type="text/javascript">
    window.onload=function(){
        var btnf=document.getElementById("btn1");
        btnf.onclick=function(){
            alert("你点我");
        }
    };    
</script>
</head>
<body>
    <button id="btn" onclick="alert(‘你点我干嘛‘)">haa</button>
    <button id="btn1" >a</button>
    <button id="btn2" >ff1</button>
    <button id="btn3" >b</button>
    <script type="text/javascript">
    var    btn1=document.getElementById("btn2");
        btn1.onclick=function(){
            alert("你点我啊");
        }
        </script>
</body>
</html>
window.onload=function(){
    var btn=document.getElementById("btn3");
    btn.onclick=function(){
        alert("哈哈");
    }
};

用于两边都用了加载,所以在运行的时候会运行前面的也就是调用css。js而不会用到btn1相关的按钮了,因此执行会出现不兼容,要想改变必须放在一起加载或去掉一个。

3.js函数

  首先明确js里的变量的命名都用var,无论是方法还是布尔,还是字符串都是一样的,这就是他与java的区别之一,这就会出现一个问题输入一个东西他到底是什么类型的,该如何判断,js里定义了一个函数也就相当于java里的类的概念,但是他不会存在函数的加载,如果存在两个函数同名,他会顺着浏览器执行,由下面的函数替换上面的函数,相当于完成了一次覆盖,如果出现了函数里的形参和实参数量不一致,也是可以运行的,但是在java里是不允许的。具体的操作如下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script type="text/javascript">
        function sum(a,b){
            alert(a+b);
        }
        sum(2,3);
        var a1=function(a,b){
            return a+b;
        }
        alert(a1(4,6));
        function sum2(a,b,c){
            sum=a+b+c;
            //return有两个作用,1终止函数的执行。2将函数的结果返回给调用者。
            return sum;
        }
        // 不存在重载。
        alert(sum2(123,552,true));
        alert(sum2(123,"aa",true));
        alert(sum2(2,5,5,6));
    </script>
</head>
<body>
</body>
</html>

输出的框依次是5,10,676,123aatrue,12。这个并没有提供覆盖,名字不相同。值得注意的是当 true前面接的是数字时它就会变成真也就是01中的1,而前面连接的是字符串时就会出现字符串true,这个地方只等注意。而最后一个也就忽略了6这个参数只进行前面三个参数的相加,这个在java里不允许的,是区别于java的特点,不存在重载。重载指的是,方法名相同,里面形参的数量类型或者顺序不同,或者是返回的值不同。

4.js对象

与java的类相似,定义一个对象,对象具有一些属性,通过调用一些属性来达到一些效果,是以键值对的形式保存的,键值对之间用“,”这却别与css和html“;”需要注意,他同时也可以调用函数,需要注意的是function函数需要在调用的地方的前面否则会出现没定义,然后报错。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script type="text/javascript">
    /*
        js中创建对象的两种方式:
            1.var obj =new Object();
            2.var  obj={};
    */
        var obj={};
        alert(obj);
    /*
        给对象动态的添加属性或者方法。
    */
        obj.name="张三";
        obj.age=12;
        alert(obj.name);
        alert(obj.age);
        function sum(a,b){
            var sum=a+b;
            alert(sum);
        }
        obj.fun=sum(2,3);
        var obj1={
                name:"aa",
                job:"bb",
                school:function(){
                    alert("helleo");
                }
        }
        alert(obj1.name);
        alert(obj1.job);
        obj1.school();
        var b=function(){
            alert("helleo");
        }
        var obj2={
                name:"as",
                job:"ss",
                school:b
        }
        alert(obj2.name);
        alert(obj2.job);
        obj2.school();
        
    </script>
</head>
<body>

</body>
</html>

 

js(javascript)的总结 d2

标签:src   方式   同名   增加   定义   忽略   运行   nbsp   对象   

原文地址:http://www.cnblogs.com/guomingyt/p/7800906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!