你的位置:首页 > Java教程

[Java教程]Java Script基础


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

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

1.引入外部js文件

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

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

二.变量的声明和赋值

<!DOCTYPE html><html     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     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     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     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     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     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     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     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 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     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()函数清除。

 

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