A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

大家好,今天咱们来学习第三节的课程内容,今天内容比前两节内容有意思的多,因为今天学习的js技术可以让我们写的页面变成活的,可以与我们进行交互,具体怎么交互的,咱们慢慢来看。

1.什么是js?
        js的全名叫做JavaScript,虽然里面有java字样,但是和java是一毛钱关系都没有的。

2.js的作用?
        它可以写在html代码中,让一个页面能够活起来,让用户和页面之间形成交互的关系。

3.js的引入方式?
        咱们简单的知道了什么是js,那具体怎么使用呢,大家不要着急,想要使用js,要先引入再使用,具体怎么引入呢,咱们来看一看。
        引入方式一:
        <head>
                <script type=”text/javascript”>
                </script>
        </head>

        引入方式二:
        <script type=”text/javascript” src=”js/check.js”>

4.js的基本语法?
        js的语法和java的语法是很像的。
        我们当时学习java语法都包含哪些呢?大家一起来回忆一下。有变量,数据类型,语句,函数,数组,对象等。
        其实js中也有这些,并且大多数的和java中学习的都是一样的,那咱们只需要学习一些不一样的即可。

        变量:
                js中定义一个变量用var
                var x = 5;
                java中定义一个变量用数据类型
                int x = 5;
                在java中,一个int类型占4个字节,所以如果我们写int x = 5;在内存中会有一个可以存储4个字节的内存空间。
                但在我们今天学的js中就不一样了,var不是一个什么类型,它可以是任意类型的数据。
                var x = 5;
                alert(x);
                x = "abc";//x = 'abc',在js中不管是单引号还是双引号都是字符串,没有字符的概念。
                alert(x);
                x = new Object();
                alert(x);
                x = true;
                alert(x);
                这么写都可以。

                我们可以来看一下打印x的类型。
                var x = 5;
                alert(typeof(x));
                x = "abc";
                alert(typeof(x));
                x = new Object();
                alert(typeof(x));
                x = true;
                alert(typeof(x));

                var x;
                alert(typeof(x));//undefined
                alert(x / 2);//NaN,Not A Number,这不是报错,是运行完的。
                x = null;
                alert(typeof(x));//object

        语句:
                js的语句和java是完全一样的。
                唯一说道的就是判断的时候布尔值问题。
                var x = 5;
                if(x % 2 == 0) {
                        alert("偶数");
                } else {
                        alert("奇数");
                }

                var x = 5;
                if(x) {
                        alert("偶数");
                } else {
                        alert("奇数");
                }
                打印出来的结果是偶数,因为数字只有0会当做false,其他的数都是true。

                var x = "abc";
                if(x) {
                        alert("true");
                } else {
                        alert("false");
                }
                打印出来的结果是true,字符串只有空串是false,其他的是true。

                var x = new Object();
                if(x) {
                        alert("true");
                } else {
                        alert("false");
                }
                打印出来的结果是true,对象只有null是false,其他的是true。
                        
                var x;
                if(x) {
                        alert("true");
                } else {
                        lert("false");
                }
                打印出来的是false。
                所以只有0,"",null,undefined是false,其他所有的都是true。

                switch(表达式){}
                在java中表达式的数据类型为byte,short,int,char,枚举,String
                在js中表达式可以为任意类型。

        函数:
                在java中定义函数是public void xxx() {}
                在js中定义函数的格式和java不太一样。
                例:
                function xxx() {
                        alert("xxx");
                }
               
                xxx();

                例:
                function getArea(a, b) {
                        alert("矩形的面试为:" + a * b);
                }

                getArea(5, 10);

                例:
                function getArea(a, b) {
                        alert("矩形的面试为:" + a * b);
                }

                function getArea(r) {
                        alert("该圆形的面积为:" 3.14 * r * r);
                }

                getArea(10);
                getArea(10, 5);
                在js中没有方法的重载,后写的会覆盖先写的。
                        
                在js中,所有的函数当中有一个默认的内置数组,叫做arguments。
                验证:alert(arguments.length);

                例:
                function getArea(a, b) {
                        return a * b;
                }

                var area = getArea(5, 10);
                alert(area);

                例:
                var xxx = new function("x, y", "alert(x + y);");
                这么写和
                function xxx(x, y) {
                        alert(x + y);
                }是一模一样的

                例:
                var xxx = new function("x,y","alert(x+y);");
                        
                function ooo(x, y) {
                        alert(x - y);
                }

                xxx(5, 10);
                xxx = ooo;
                xxx(5, 10);
                alert(typeof(xxx));

                例:
                匿名函数,一般用在事件处理的时候。
                window.onload = function() {//页面加载完毕时执行匿名函数。
                        alert("弹出一个对话框");
                }

                数组:
                java中数组是一个容器,但是长度不可以变,类型必须一致。
                js中数组可以存任意类型元素,长度可变,有点类似java中的list集合。

                例:
                var arr = [1,2,3];
                for(var x = 0; x < arr.length; x++) {
                        alert(arr[x]);
                }

                例:
                var arr = [1,2,3];
                alert(arr.length);
                arr[5] = 100;
                alert(arr.length);

                例:
                var arr = [1, true, "abc", 3.14];

                例:
                var arr = new Array();
                        
                例:
                var arr = [];

                例:
                js中没有for-each循环,有for-in循环。
                var arr = [1,2,3];
                for(x in arr) {//x为数组的索引
                        alert(arr[x]);
                }

5.js中的事件处理?
        js中有事件的概念,事件的好处是可以让一个死气沉沉的页面变成活的。

        事件处理方式有两种:
                方式一:
                        使用html的事件属性
                        <head>
                                <script type="text/javascript">
                                        function xxx() {
                                                Alert("哈哈");
                                        }
                                </script>
                        </head>
                        <body>
                                <input type="button" value="点我啊">
                        </body>
                方式二:
                        使用匿名函数的方式,通过js的内置对象document获取元素对象。
                        <head>
                                <script type="text/javascript">
                                        window.onload = function() {
                                                var bt = document.getElementById("bt");
                                                bt.onclick = function() {
                                                        alert("哈哈");
                                                }
                                        }
                                </script>
                        </head>
                        <body>
                                <input type="button" value="点我啊" id="bt">
                        </body>

以上就是这节课js的一些知识点,js对以后的开发来说还是比较重要的,所以大家要多加练习,反复练习,至少希望大家看完我写的这些,能基本掌握一些小知识,那咱们下次再见。


7 个回复

倒序浏览
好喜欢这个连载,棒棒的~
回复 使用道具 举报
钟佩桓 来自手机 中级黑马 2018-3-7 18:17:02
藤椅
赞!写的不错
回复 使用道具 举报
好棒,请继续持续更新。。。。  
回复 使用道具 举报
真的很棒,我的java技术又提升了一步
回复 使用道具 举报
真的很棒,我的java技术又提升了许多
回复 使用道具 举报
真的很棒,我的技术又提升了许多
回复 使用道具 举报
看见小蜀哥哥的技术贴,开启元气满满的一天
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马