要学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的内容先就到这里结束，后续内容我会不断更新，如果对你有所帮助别忘了留下你的脚步与关注！谢谢




        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/System-out-println/p/5511930.html