1. 技术文章
  2. Java Script基础

Java Script基础

由 半腔热情 提交于 2020-01-21 05:46:02

JavaScript只是一种运行于客户端，可以被客户端浏览器解析的一段代码。它和java没有任何关系。JavaScript简称JS。jQuery是对JS的一个封装。

一.网页引入Java Script的三种方式：

1.引入外部js文件

2.在当前HTML页面中使用script标签中书写

3.直接在当前HTML标签中书写

二.变量的声明和赋值

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            color:red;
        }
    </style>
    <script src="MyJS.js"></script>
    <script type="text/javascript">
        var num = 0;
        var num1, num2, num3 = 0;
    </script>
</head>
<body>
    <div>哪里来的JS？</div>
    <input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>

注意点：

1.在JS中定义任何变量的类型都是var开头。

2.JavaScript的关键字是保留的，不能作为变量名或者函数名。

3.JavaScript区分大小写，大小写不同的变量名表示不同的变量。

4.JavaScript是一种弱类型语言，所以允许不声明变量而直接使用，系统会自动声明该变量。

5.JavaScript中的变量命名与Java变量的命名规则相同（可以由数字，字母，下划线和$符号组成，但首字母不能使数字）。

三.数据类型：

JavaScript中有6种数据类型 如下：

Number(数值类型)

String(字符串类型)

Boolean(布尔类型)

Null(空类型)

Undefined(未定义类型)

解释：

在声明变量时不需要声明变量的数据类型，而是由赋给变量的值决定。

可以用typeof（）来获取变量的类型。

四.数组：

JavaScript中的数组和Java中的数组一样，数组的下标从0开始。

JavaScript中定义数组的方式：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            color:red;
        }
    </style>
    <script src="MyJS.js"></script>
    <script type="text/javascript">
        //var num = 0;
        //var num1, num2, num3 = 0;
        var array = new Array(3);
        array[0] = "哈哈";
        array[1] = 1;
        array[2] = "JavaScript";
        var array1 = ['哈哈', 'JavaScript', '1', '2'];
        
    </script>
</head>
<body>
    <div>哪里来的JS？</div>
    <input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>

五.运算符号：

算数运算符：+，-，*，/，%，++，--

比较运算符：>,<,>=,<=,==,!=

逻辑运算符：&&,||，！

赋值运算符：=

六.逻辑控制语句：

1.条件结构：

if选择结构和switch选择结构：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            color:red;
        }
    </style>
    <script src="MyJS.js"></script>
    <script type="text/javascript">
        ////var num = 0;
        ////var num1, num2, num3 = 0;
        //var array = new Array(3);
        //array[0] = "哈哈";
        //array[1] = 1;
        //array[2] = "JavaScript";
        //var array1 = ['哈哈', 'JavaScript', '1', '2'];
        var num=0;
        if (num == 0) {
            alert(11111);
        }
        
    </script>
</head>
<body>
    <div>哪里来的JS？</div>
    <input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            color:red;
        }
    </style>
    <script src="MyJS.js"></script>
    <script type="text/javascript">
        ////var num = 0;
        ////var num1, num2, num3 = 0;
        //var array = new Array(3);
        //array[0] = "哈哈";
        //array[1] = 1;
        //array[2] = "JavaScript";
        //var array1 = ['哈哈', 'JavaScript', '1', '2'];
        //var num=0;
        //if (num == 0) {
        //    alert(11111);
        //}
        var num = 1;
        switch (num) {
            case 1:
                alert('我是1');
                break;
            case 2:
                alert('我是2');
                break;
            default:
                break;
        }
        
    </script>
</head>
<body>
    <div>哪里来的JS？</div>
    <input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>

2.循环结构：

for循环：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            color:red;
        }
    </style>
    <script src="MyJS.js"></script>
    <script type="text/javascript">
        var num = [1, 2, 3, 4, 5];
        for (var i = 0; i <num.length; i++) {
            document.write(num[i]);
        }
    </script>
</head>
<body>
    <div>哪里来的JS？</div>
    <input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>

3.循环中断：

break:可以立即退出整个循环

continue:只是退出当前循环，根据判断条件决定是否进行下一次循环

七.函数：

1.自定义函数：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            color:red;
        }
    </style>
    <script src="MyJS.js"></script>
    <script type="text/javascript">
        function Myfunc(参数1，参数2，参数3) {
            //code
            //返回值可有可无，根据自身需求
        };
    </script>
</head>
<body>
    <div>哪里来的JS？</div>
    <input type="button" onclick="javascript: alert('按钮');" value="点我"/>
</body>
</html>

2.调用函数：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            color:red;
        }
    </style>
    <script src="MyJS.js"></script>
    <script type="text/javascript">
        window.onload() = function () {
            function Myfunc(参数1，参数2，参数3) {
                //code
                //返回值可有可无，根据自身需求
            };
        };
    </script>
</head>
<body>
    <div>哪里来的JS？</div>
    <input type="button" onclick="Myfunc" value="点我"/>
</body>
</html>

3.匿名函数：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            color:red;
        }
    </style>
    <script src="MyJS.js"></script>
    <script type="text/javascript">
        window.onload() = function () {
           var Myfunc=function(参数1，参数2，参数3) {
                //code
                //返回值可有可无，根据自身需求
            };
        };
    </script>
</head>
<body>
    <div>哪里来的JS？</div>
    <input type="button" onclick="Myfunc" value="点我"/>
</body>
</html>

解释：匿名函数就是没有函数名的函数，可以用一个变量来接受，然后再调用即可。

注意点：

1.JavaScript中的函数和Java里的方法差不多，只是没有类与类之间的调用，返回值类型，访问修饰符。

2.JavaScript中的函数可以没有返回值，参数。

3.定义函数之前必须在<script>标签里面添加window对象的onload方法，不然结果会和理想的不一样。

八.window对象：

1.window对象常用属性：

//window对象方法练习
//window是全局对象，使用其方法时可以不用window.方法名，直接用方法名即可
var haha = history;//有关客户之前访问过的url信息
alert(haha);
var xixi = location;//当前url信息
alert(xixi);

var say = confirm('你开心吗');//带提示信息 带返回值 带确定和取消的提示窗口 多数用于if判断
if (say) {
    alert('开心');
} else {
    alert('不开心');
    close();//关闭浏览窗口
}

open('www.baidu.com','我的浏览器','height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0');

2.window对象常用方法：

//window对象方法练习
//window是全局对象，使用其方法时可以不用window.方法名，直接用方法名即可
var haha = history;//有关客户之前访问过的url信息
alert(haha);
var xixi = location;//当前url信息
alert(xixi);

var say = confirm('你开心吗');//带提示信息 带返回值 带确定和取消的提示窗口 多数用于if判断
if (say) {
    alert('开心');//带有提示信息的警告窗口
} else {
    alert('不开心');//带有提示信息的警告窗口
    close();//关闭浏览窗口
}

open('www.baidu.com','我的浏览器','height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0');//打开新的页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        var t1;
        window.onload = function () {
            var docref = document.referrer;
            if (docref) {
                var div = document.getElementById('mydiv');//获取id为‘mydiv’的对象
                div.style.display = "none";
            } else {
                t1=setInterval(stop,1000);//定时器
            }
        }
        function stop() {
            var doc = document.getElementById('myspan');//获取id为‘myspan’的对象
            var txt = doc.innerText;//获取这个myspan对象的文本
            if (txt > 1) {
                txt--;
            } else {
                clearInterval(t1);//关闭定时器
                location.href = "页面1.html";
            }
            doc.innerText = txt;
        };

    </script>
</head>
<body>
    <div id="mydiv">
        <span id="myspan">5</span>
        秒后调转到登入页面
    </div>
     我是抽奖页面
</body>
</html>

3.window对象常用的事件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onclick = function () {
            document.getElementById('mybtn').onclick = function () {
                alert('点我干嘛');
            };
        };
    </script>
</head>
<body>
    <input type="button" id="mybtn" value="快点我"/>
</body>
</html>
   (function () {
            $('li').mouseover(function () {
                this.style.cssText = "background:pink";
            }).mouseout(function () {
                this.style.cssText = "background:";
            });
        });

九.document对象：

1.document对象常用属性：

referrer:返回载入当前文档的URL

URL:返回当前文档的URL

2.document对象常用方法：

getElementById()  返回单个元素对象

getElementsByName() 返回对象集合

getElementsByTagName() 返回对象集合

write()  向文档写入文本，HTML表达式或JavaScript代码

十.Math对象：

1.Math的常用方法：

ceil()  对数进行上舍入

floor() 对数进行下舍入

round() 把四舍五入为最接近的数

random() 返回0~1中的随机数

十一.定时函数：

1.setTimeout()定时函数:

语法:

setTimeout('调用的函数名称',等待的毫秒);

2.setInterval()函数：

语法：

setInterval('调用的函数名称',周期性调用函数之间间隔的毫秒数)；

3.clearTimeout()和clearInterval():

clearTimeout(）函数用来清除由setTimeout()函数设置的timeout

clearInterval()函数用来清除由setInterval()函数设置的timeout

4.区别：

setTimeout()函数是过多少毫秒调用一次给定的函数，只调用一遍。

setInterval()函数是每隔多少毫秒调用一次给定的函数，调用多次。

setInterval()函数可以被clearInterval()和clearTimeout()函数清除。

setTimeout()函数只能被clearTimeout()函数清除。

 

长得帅的已经订阅，长得丑的还在犹豫，你还在等什么？？？

 

标签
js代码
函数调用
javascript
html代码
html语言
meta
num
var
meta标签
js
var方法
var函数
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!