网站首页 网站导航 课程中心
新闻中心
您所在的位置:Web前端培训 > 新闻中心 > 【web前端培训】javascript快速入门(一)

【web前端培训】javascript快速入门(一)

来源:中软卓越 日期:2018-05-03 15:38 人气:
标签:
中软国际教育集团Python+大数据课程入驻大武汉啦!!!
在网页中使用JavaScript
 
在网页中使用javascript有两种方式
 
直接在script标签中书协javascript代码

<script type="text/javascript">
window.onload = function() {
    alert("write in javascript label");
}
</script>

这里就是直接在script标签中书写的JavaScript代码,window.onload表示当前页面加载完毕执行的代码。
 
引入外部js文件 
同样,我们可以将所有当前页面需要用到的JavaScript代码书写到js文件中,然后在该页面中引入即可。

<script type="text/javascript" src="out.js"></script>

javascript函数
 
在JavaScript中使用函数之前,必须要先定义好函数,才可以调用。函数的定义格式如下:

function 函数名(参数) {
    函数体
    return
}

<script type="text/javascript">
        function writeHello() {
            //给页面中输出hello world
            document.write("hello world");
        }
 
        writeHello();
        writeHello();
    </script>

这里我定义了一个简单的方法,然后调用两次。
 
自调用匿名函数

<script type="text/javascript">
        (function(param) {
            alert("param is :"+param);
            alert("hello world");
        })(22);
</script>

这里我写了一个匿名函数,并且传入参数调用了自己,这里注意: 
function() {} :相当于返回函数的首地址 
(function(){}) : 把这部分看成一个整体 
(function(){}) () : 根据返回的首地址,调用该函数。 
自调用匿名函数的优点:可以避免代码中的函数有重命名问题,并且以上代码只会执行一次,一般用作初始化工作。
 
javascript变量作用域

<script type="text/javascript">
        first = 22; //全局的
        var second = 33; //
        function sayHello() {
            var num = 44; //局部的
            numglobal = 55; //全局的
        }
</script>

这里可以看出,我们在函数内部定义的变量就是局部的,否则就是全局的,这里的定义是通过var类型来声明的变量。其实在javascript中方法也可以理解是一个类,这里就相当于private和public类型的变量。举个例子吧:

<script type="text/javascript">
        first = 22; //全局的
        var second = 33; //
        function sayHello() {
            var first = 44;//这里的first是局部变量,不影响全局变量
            second = 55;//这里的second是全局变量,更改了该值,全局second也跟着更改
        }
        sayHello();
        alert("first is:"+first+"==second is:"+second);
        //此时alert的结果first=22,second=55
</script>

在js中,如果某一个变量没有var声明,会自动到上一层的作用域中查找该变量的声明语句,如果找到,就使用,如果没有找到,继续向上查找,一直查找到全局作用域位置,如果全局作用域也没有找到,则系统会自动在全局作用域进行声明该变量。这就是js的作用域链。

JavaScript参数

在javascript中声明的方法是可以带参数的,这里的参数一数组的形式来存放。
 
<script type="text/javascript">
        function hello(first,second) {
            for(var i=0; i< arguments.length;i++) {
                alert(arguments[i]);
            }
        }
        hello("hello","world");
</script>
 
这里我声明了一个函数,并且调用了该,传入了声明的参数。首先遍历打印每一个参数值。可以发现,系统会自动将传递的所有参数存放到一个arguments的数组里边,这里,我们可以借助该参数实现不确定参数时候的需求。

JavaScript数组
 
由于JavaScript是弱类型语言,因此在JavaScript中创建数组的时候,无需指定数组的数据类型,无需指定数组长度,并且可以存储任何类型的数据。
 
创建数组
 
在JavaScript中创建数组分为如下三种方式:

<script type="text/javascript">
        var arrayOne = [11,"qq",22.5];
        var arrayTwo = new Array("second",function(){alert("second array"),11});
        var arrayThree = new Array(2);//表示创建一个数组,长度是2
        arrayThree[0] = "hello";
        arrayThree[1] = "world";
 
        function printArray(array) {
            for (var i = 0; i < array.length; i++) {
                alert(array[i]);
            };
        }
        printArray(arrayOne);
        printArray(arrayTwo);
        printArray(arrayThree);
</script>

可以看到,在数组中可以存放任意类型的数据,包括函数,实际上在JavaScript中函数也是对象。
 
使用for..in语句遍历数组
 
我们可以使用for循环,和for in语句来遍历数组,这里我只写一个for in的例子:

function printArray(array) {
    for(var i in arrayOne) {
        alert(arrayOne[i]);
    }
}

javascript多维数组

<script type="text/javascript">
        var arrayOne = [[11,"zhangsan"],
                        [22,"李四"],
                        [30,"王五"]
                       ];
 
        for (var i = 0; i < arrayOne.length; i++) {
            for(var j in arrayOne[i]) {
                document.write(arrayOne[i][j]);
            }
            document.write("<br/>")
        };
</script>

JavaScript事件冒泡
 
先看下面代码:

<html>
<head>
    <script type="text/javascript">
        window.onload = function() {
            var divone = document.getElementById("div1");
            var divtwo = document.getElementById("div2");
            var divthree = document.getElementById("div3");
 
            divone.onclick = function() {
                alert("div1 click");
            }
            divtwo.onclick = function() {
                alert("div2 click");
            }
            divthree.onclick = function() {
                alert("div3 click");
            }
        }
 
    </script>
</head>
<body>
 
    <div id="div1" style="width:400px;height:400px;background-color='red'">
        <div id="div2" style="width:300px;height:300px;background-color='green'">
            <div id="div3" style="width:200px;height:200px;background-color='blue'"></div>
        </div>
    </div>
 
</body>
 
</html>

此时如果点击最内层的div,事件会一次向上传递,那么如何阻止事件继续向最外层传递呢?这里我写了一个方法,该方法兼容ie和w3c,比如在点击了div3之后不希望事件继续向上传递,则只需要在div3的函数运行结束时候,运行该方法即可。

//阻止事件冒泡函数
    function stopBubble(e)
    {
        if (e && e.stopPropagation) {
            //W3C
            e.stopPropagation()
        } else {
            //IE
            window.event.cancelBubble=true;
        }      
    }

javascript阻止默认事件

<a href="http://www.baidu.com" id="stop">stop default</a>
 
<script type="text/javascript">
//阻止浏览器的默认行为 
    function stopDefault(e) { 
        if (window.event) {
            window.event.returnValue = false; 
        } else {
            e.preventDefault();
        }
    }
window.onload = function() {
    var stop = document.getElementById("stop");
    stop.onclick = function(e) {
         stopDefault(e);
         alert("it has stop the default behavior");
    }   
}
</script>

这里通过stopDefault方法来阻止默认的浏览器事件,兼容ie和w3c标准。
 
javascript定时器
 
下面实现一个页面每隔两秒给页面弹出一个hello world

<script type="text/javascript">
function printHello() {
    alert("test");
}
 setInterval('printHello()',2000);
</script>

这里使用了setInterval(需要调用的方法,间隔时间)。
 
JavaScript面向对象
 
类的定义
 
在JavaScript中类的定义格式如下:

function 类名() {
 
}

声明对象

var 对象名 = new 类名();

function Person() {
 
    }
    var person = new Person();
    person.name = "zhansan";
    person.age = 22;
    person.sex = "man";
 
    alert(person.name+"=="+person.age+"=="+person.sex);
    alert(person["name"]+"=="+person["age"]+"=="+person["sex"]);

上面的代码写了一个简单的JavaScript面向对象的栗子,首先声明一个Person类,然后为person对象添加属性,这里需要注意的是,在JavaScript中,我们可以动态的为对象添加任意类型的属性,而不是像java里边,必须先声明好所有的属性。
 
根据上面的代码可以看出获取对象的属性有两种方式:
 
对象.属性
对象[“属性”] 
但是还是要注意这两个还是有区别的,如果一个属性原本就含有”.”,那么只能使用 对象[“属性”] 这种方式来获取属性的值

免责声明:本文转载自网络,转载目的在于传递更多信息,版权归原作者所有,如涉及内容、版权和其它问题请联系我们进行删除。


中软卓越是中软国际有限公司投资的大型人才服务机构,是中软国际人才战略的核心组成部分之一,承担集团发展过程中人才储备和培养的任务,是软件及外包业务快速发展的重要人才支撑平台,是集团保持高速增长动力之一。

中软国际教育集团专注IT教育36年,一直秉承“用良心做教育”的理念,是中国移动互联网研发人才一体化服务的开拓者,全力打造移动互联网研发人才服务优质平台。

公司总部位于武汉,目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、重庆、长沙、合肥、无锡、南宁、厦门、南京、南昌等全国22个省成立了60多家分公司。拥有全国的移动互联网教学就业保障团队,做到了毕业学员业内高薪水,成为学员信赖的IT培训机构。

营业执照 版权所有©Copyright 2008-2017,武汉中软卓越科技有限公司 , All Rights Reserved. ICP备案号:15018648号-1

sitemap | 来校路线 | 分类导航 | 关于我们