要学JavaScript！进来看吧，反正不花钱！~

有一段时间没有更新自己的博客了，今天终于可以抽出时间和大家分享一下关于JavaScript了。有很多朋友在问我没有接触过会不会很难，不好理解

其实JavaScript的基本语法和Java的基本语法很相似，找到语法的不同点可以加快掌握知识的速度。我们步入正题！

JavaScript的优点：

一丶客户端表单验证

网站中，常常会遇到注册的页面，如果某项信息我们输入错误（如：昵称不合法，密码长度不符合等等...）表单页面将及时给出错误提示。这些错误

在没有提交到服务器之前，由客户端提前进行验证，称为客户端表单验证！

二丶页面动态效果

在JavaScript中我们经常会编写鼠标的响应事件代码，创建出动态的页面特效，从而有效的控制页面的内容，从而增加客户端的体验，从而使网站更

加有动感，有魅力！

JavaScript的概述：

1.JavaScript主要用来向HTML页面添加交互行为

2.JavaScript是一种脚本语言，语法和Java相似

3.JavaScript一般用来编写客户端的脚本

4.JavaScript是一种解释性语言，边执行边解释

JavaScript的基本结构：

//语法如下

<script type="txt/Javascript">

     //JavaScript代码

</script>

JavaScript的变量和赋值：

//声明变量并赋值

var width  = 20;

//声明多个变量的同时用逗号 “，”隔开

var  x, y, z = 50;

补充一点：JavaScript区分大小写！！！所以大小写不同的变量名代表不同的变量！同样JavaScript中的关键字不允许作为变量名和函数名！，不知道JavaScript中

的关键字的朋友可以去差相关的文档，这里就不一个一个的给大家补充了！

//创建数组的语法

var  数组名称   =   new  Array (size );

//为数组中元素赋值

var fruit = new  Array  ("Apple","Peach","Orange");

//第二种赋值方式

var fruit = new  Array(4);

fruit [0] = "apple";

fruit [1] = "Peach";

fruit [2] = "Orange";

//定义一个数组还可以使用“{”，“}”来定义

var fruit={"Apple","Peach","Orange"}；

2.数组的属性和方法：

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join()	把数组的所有元素放入一个字符串，通过一个分隔符进行分割
	sort()	对数组排序
	push()	向数组末尾添加一个新的元素，并返回新的长度

3.运算符

类别	运算符号
算术运算符	+，-，*，/，%，++，--
比较运算符	>,<,>=,<=,==,!=
逻辑运算符	&&,\|\|,!
赋值运算符	=

4.逻辑逻辑控制语句：

javascript中的逻辑控制语除 for - in循环其余都与java中一样，所以只讲解for-in循环

//语法

  for （变量  in 数组）  {

    //JavaScript语句；

}

//其中变量为数组的索引下标例如：

var fruit = {"apple","peach","orange"};

for(var i in  fruit){

document.write(fruit[i])

}

//同java一样，在循环中用来终止循环的有  break和continue

5.输入输出：

//警告（alert），该对话框有一个字符串和一个确定按钮

alert ("提示信息")

//提示(prompt)会弹出一个提示对话框，等待用户输入一行数据

prompt("提示信息","输入框的默认信息")

结合以上所讲要在浏览器中怎么做到以下效果：

代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>统计a与A的字符串的个数</title>

   <script type="text/javascript">

       var country = new Array("America", "Greece", "Britain", "Canada", "China", "Egypt");

       //定义一个变量保存统计的值

       var count = 0;

       document.write('在以下字符中：' + "<br/>");

       //循环打出数组里的值

       for (var i in country)

       {

           document.write(country[i] + "<br/>");

           if(country[i].indexOf('a')!=-1||country[i].indexOf('A')!=-1)

           {

               count++

           }

       }

       document.write('共有' + count + '个字符串中包含a或A');

   </script>

</head>

<body>

JavaScript函数：

//常用的系统函数

parseInt()           //解析一个字符串并返回一个整数

parseFloat()        //解析一个字符串并返回一个浮点数

//结合以上两个函数可以计算两个数的运算结果

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>统计a与A的字符串的个数</title>

   <script type="text/javascript">

    var num1 = prompt("请输入第一个数","");

    var num2 = prompt("请输入第二个数","");

    var  n1= parseInt(num1)  ;

    var  n2= parseInt(num2)  ;

    var  = result = n1+n2;

    document.write(n1+"+"n2+"="+result);

   </script>

</head>

<body>

自定义函数：

在JavaScript中，自定义函数由关键字function，函数名，一组参数以及括号中执行的语句组成

function  函数名 (){

    //JavaScript语句

 [return 返回值]

}

//function是定义函数的关键字，必须有；小括号中有参数即为带参函数，否则为无参函数

----------------------------调用函数----------------------------------
1.通过添加事件来调用

function hello(){
     //JavaScript语句 
[return 返回值] 
}

<input name= "btn" type ="button" value="调用函数" onclick="hello()"/>

2.匿名函数（不推荐使用，只要求能看懂）

function（）{
     //JavaScript语句 
[return 返回值] 
}
//如果想调用匿名函数就得为匿名函数整个语句一个值：

  var  cot =function hello(){
     //JavaScript语句 
[return 返回值] 
}

<input name= "btn" type ="button" value="调用函数" onclick="cot()"/>

JavaScript中window对象：

window对象是整个BOM的核心，我们可以使用它的对象实现如下功能：

弹出新的浏览窗口

移动，关闭浏览器窗口或者调整窗口的大小

在浏览器中实现页面的前进和后退功能

window对象的常用属性：

名称	说明
history	有关客户访问过的URL信息
location	有关当前URL的信息

名称	说明
prompt()	显示可提示用户输入的对话框
alert()	显示一个带有提示信息一个确定按钮的警告对话框
confirm()	显示一个带有提示信息，确定，取消的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口。加载给定的URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（以毫秒计算）来调用函数或表达式

window对象常用的事件：

名称	说明
onload	一个页面或一幅图像完成加载
onmouseover	鼠标指针移动到某元素之上
onclick	鼠标单击某个对象
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

history 对象和location对象

history对象提供用户最近浏览的URL列表，但是出于用隐私方面不在允许脚本访问已经访问过的实际URL，可以使用histrory对象提供

的逐个返回访问过的页面方法，具体方法请去查详细文档

location对象提供当前页面的URL信息，并且可以重新装载当前页面或新页面，其对象属性方法请去查详细文档

document对象的属性与常用方法：

属性	描述
referrer	返回载入当前文档的前文档的URL
URL	返回当前文档的URL
方法	描述
getElementById（）	返回对拥有指定id的第一个对象的引用
getElementByName（）	返回带有指定名称的对象的集合
getElementByTagName（）	返回带有指定标签名的对象的集合
write（）	向文档写文本，HTML表达式或javascript代码

JavaScript内置对象：

在javascript中，系统的内置对象有Date对象，Array对象，String对象和Math对象等。

Arrya:用于在单独的变量名中存储一系列的值

String：用于支持字符串的处理

Math:使我们有能力执行常用的数学。包含若干个数字常量和函数

Date:用于操作日期和时间

//JavaScript中对象与Java中的类非常相似，需要使用“new  对象名（）“的方法创建

var　日期示例　　　＝ new  Date(参数)；

//日期示例是存储Date对象的变量，可以省略参数，如果没有参数则表示当前日期和时间

//参数是字符串格式“MM DD,YYYY,hh:mm:ss”

Date对象有大量用于设置，获取和操作日期的方法，可以去相关文档去了解。

JavaScript中的Math对象：

Math的常用方法：

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	对数四舍五入	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1中的随机数	Math.random();例如0.6273608814137365

JavaScript定时函数

没有定时函数之前时间是静止的，不能动态更新，JavaScript提供了两个定时函数setTimeout()和setInterval().还提供了用于清除

timeoout的两个函数：clearTimeout()和clearInterval();

//setTimeout()

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

//setInterval()

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

补充：使用定时函数写一个网页倒计时器

<!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.onload = function () {

            var time;

            //锁定div对象

            var dom = document.getElementById("msg");

            var num = dom.innerText;

            //给开始按钮注册事件

            var btnStart = document.getElementById("btnStart");

            btnStart.onclick = function () {

                time = setInterval(step, 1000);

            }

            function step() {

                if(num>0){

                    num--;

                    dom.innerText = num;

                }

            }

            //给停止按钮注册事件

            var btnStop = document.getElementById("btnStop");

            btnStop.onclick = function () {

                clearInterval(time);

            }

        }

    </script>

</head>

<body>

    <input  type="button" id="btnStart" value="开始" />

    <input type="button" id="btnStop" value="停止" /><br />

    <div id="msg">10</div>

</body>

</html>

//有启动暂停和复位的计时器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

<BODY>

<input id='show' type="text" readOnly='true' value='0'>

<br/>

<button onclick="start()">开始</button>

<button onclick="stop()">暂停</button>

<button onclick="reset()">复位</button>

<script>

    var show = document.getElementById("show");

    var int = null;

    var start = function(){

        int=self.setInterval("count()",1000)

    }

    var stop = function(){

        int=window.clearInterval(int);

    }

    var reset = function(){

        show.value = 0;

    }

    var count = function(){

        show.value = show.value*1 + 1

    }

</script>

</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>

    <script type="text/javascript">

        function startTime() {

            var today = new Date()

            var h = today.getHours()

            var m = today.getMinutes()

            var s = today.getSeconds()

            // add a zero in front of numbers<10

            m = checkTime(m)

            s = checkTime(s)

            document.getElementById('txt').innerHTML = h + ":" + m + ":" + s

            t = setTimeout('startTime()', 500)

        }

        function checkTime(i) {

            if (i < 10)

            { i = "0" + i }

            return i

        }

        onload = startTime;

    </script>

</head>

<body>

<div id="txt"></div>

</body>

</html>

关于javascript的内容先就到这里结束，后续内容我会不断更新，如果对你有所帮助别忘了留下你的脚步与关注！谢谢

巴特西

要学JavaScript！进来看吧，反正不花钱！~

最新文章

热门文章