FeWeb基础之JavaScript简介

1、JavaScript的基本介绍

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，它是通过嵌入或调入在标准的HTML语言中实现的。JavaScript的出现使得前端页面中信息和用户之间不只是已汇总显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。

相对于Java，JavaScript要简单的多。Javascript也是一种平台无关性的语言，它依赖于浏览器本身，与操作环境无关，只要计算机能够运行浏览器，并支持JavaScript，就可以正确运行。

在JavaScript中有4种基本的数据类型：数字、字符串型、布尔型和空值。4种基本类型中的数据可以是常量，也可以是变量。JavaScript中的常量包括数字、布尔值、字符型常量、空值和特殊符号。JavaScript中是严格区分大小写，不能使用JavaScript关键字作为变量名。

JavaScript代码是嵌入在HTML中，其不但可以位于<head>...</head>标记中，也可以位于<body>...</body>标记中。具体请看以下实例一：

<HTML>

   <Head>

    <Script Language ="JavaScript">

        alert("这是放在<head>...<head>标记中的代码。");

    </Script>

   </Head>

    <BODY>

        <Script Language ="JavaScript">

            alert("这是放在<body>...</body>标记中的代码。");

        </Script>

    </BODY>

</HTML>

运行结果如图一所示：

图一：实例一运行结果

2、JavaScript事件

JavaScript是基于对象的语言，这与Java不同，Java是面向对象的语言。而基于对象的基本特征，就是采用事件驱动。它是在有形界面的环境下，使得一切输入变化简单化。通常鼠标或热键的动作称之为事件，由鼠标或热键引发的一连串程序的动作称之为事件驱动。事件的种类很多，一般包括OnClick事件、OnChange事件、OnSelect事件、OnFocus事件、OnBlur事件、OnLoad事件和OnUnload事件等。下面重点说一下OnClick事件和OnChange事件。

（1）OnClick事件

当用户单击鼠标按钮时，会产生OnClick事件，同时OnClick指定的事件处理程序将被调用执行。产生OnClick事件的对象有按钮对象、复选框、单选按钮、列表框等。接下来请看一个有关OnClick使劲的实例：

<HTML>

  <HEAD>

    <Script Language="JavaScript">

        function click1()

        {

            alert("  确定 ");

        }

        function click2()

        {

            alert("  取消 ");

        }

    </Script>

  </HEAD>

  <BODY>

    <center>

        <form name="myform">

            <input type="button" value="确定" name="test1" OnClick="click1()">

            <input type="button" value="取消" name="test2" OnClick="click2()">

        </form>

    </center>

  </BODY>

</HTML>

运行结果如下图图二所示：

图二：实例二运行结果

（2）OnChange事件

当text或textarea中输入的字符值改变时会触发该事件，当在select表格项中一个选项状态改变后也会触发该事件。下面请看有关OnChange事件的实例三：

<html>

  <HEAD>

    <Script Language="JavaScript">

        function dispmsg()

        {

            alert("TextBox值发生了变化！");

        }

    </Script>

  </HEAD>

  <body>

    <form>

        <Input type="text" name="Text" value="TextBox值发生了变化" onChange="dispmsg()">

    </form>

  </body>

</html>

具体运行结果如图三所示：

图三：实例三运行结果

3、JavaScript对象

JavaScript中的对象是由属性和方法两个基本元素构成的。引用对象的主要途径有3种：应用JavaScript内部对象、由浏览器环境中创建或提供对象。在JavaScript中常用的对象有String、Math、Date和数组。下面就前三种做一下详细介绍：

（1）Sting字符串

String对象只有一个属性，即length属性，会算出字符串中的字符个数，包括所有符号。String对象还有很多方法，比如字符显示的控制方法：big()、bold()、Italics()，字体颜色方法：fontcolor(color)，字符串大小写转换：toLowerCase()、toUpperCase()等。下面请看一个使用字符串的实例四：

<HTML>

    <HEAD>

        <Script Language="JavaScript">

            function check()

            {

                var tmp,str;

                str=document.myform.text1.value;

                tmp=str.indexOf('@');

                if(tmp<0)

                    alert("请输入合法Email地址");

                else

                    alert(tmp);

            }

        </Script>

    </HEAD>

    <BODY>

      <form name="myform">

        请输入Email地址：<br>

        <input type=text value="" name="text1">

        <p><input type=button value="提交" name="btn" onClick="check()">

      </form>

    </BODY>

</HTML>

运行结果如图四所示：

图四：实例四运行结果

（2）Math对象

Math对象的常用属性有PI、自然对数e，他们也是Java中的常量。Math对象的方法也很多，但他们都很简单。例如绝对值：abs();正弦余弦值：sin()、cos()；正切反正切：tan()、atan()；四舍五入：round()；平方根:sqrt()；基于几次方的值:Pow(base,exponent)等。

（3）Date对象

对Date对象的使用方式为：myDate = new Date()；它用get()方法返回Date，用set()方法来设置Date,其中唯一不同的就是toGMTstring()方法，它用于返回格林威冶格式的时间字符串。下面请看一个有关Date对象的实例五：

<html>

   <HEAD>

   </HEAD>

   <BODY>

    <form name="myform">

        您的在线时间为：

        <input name="clock" size="18" value="在线时间">

    </form>

    <Script language="JavaScript">

      var id, iM = 0, iS = 1;

    start = new Date();

    function go()

    {

        now = new Date();

        time = (now.getTime() - start.getTime()) / 1000;

        time = Math.floor( time);

        iS = time % 60;

        iM = Math.floor( time / 60);

        if ( iS < 10)

            document.myform.clock.value = " " + iM + " 分 0" + iS + " 秒";

        else

            document.myform.clock.value = " " + iM + " 分 " + iS + " 秒";

        id = setTimeout( "go()", 1000);

    }

    go();

    </Script>

   </BODY>

</html>

运行结果如图五所示：

图五：实例五运行结果

4、浏览器内置对象

浏览器中提供了navigator对象、Window对象、History对象、Location对象、Document对象和form对象等内置对象。下面重要讲解一下History对象和Document对象。

（1）History对象

History对象的length属性，指出在本窗口中已经打开了多少个网页。其中back()方法表示打开后一个网页，forward()方法表示打开前一个网页，go()方法表示打开指定的网页。下面请看有关History对象的实例六：

<html>

  <head>

    <title>History对象</title>

  </head>

  <body>

    <center>

    <form>

        <input type="button" name="back" value="后退" onClick="history.back()">

        <input type="button" name="forward" value="前进" onClick="history.forward()">

        <input type="button" name="button1" value="显示length属性" onClick="alert(history.length)">

        <a href="javascript:history.back()">单击这里返回</a>

    </form>

    </center>

  </body>

</html>

运行结果如图六所示：

图六:实例六运行结果

（2）Document对象

在浏览器中，Document对象是核心，同时也是最重要的。在Document中主要有links、anchor、form 3个最重要的对象。

5、窗体对象

窗体构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。

在JavaScript中访问窗体对象可由两种方法实现：第一种是通过form对象名进行访问，如document.myform；第二种是通过窗体对象数组进行访问，如document.forms[0]。窗体对象的方法只有一个submit()方法，该方法的主要功能就是实现窗体信息的交换。

窗体的基本元素由按钮、单选按钮、复选框、提交框、重置按钮、文本框等组成。在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。下面就其中几个窗体基本元素简要说明一下：

（1）button按钮和text单行文本框

button的作用是对button按钮进行控制。它有name和value两种属性。用name属性设定提交信息时的信息名称，对应文档中button的名字；用value属性设定出现在窗口中对应HTML文档中Value信息。

text的作用是对text中的内容实施有效控制。它有两个属性：name和Value，具体作用的button中设定一致。

下面来看有关button和text应用的实例七：

<html>

  <head>

  </head>

  <body>

    <form name="myform" method="POST" action="" >

      <input type="text" name="text1" size="25"><br>

      <input type="button" value="提交" name="Button1"onclick="check()">

      <input type="reset" value="重置" name="Button2"></p>

    </form>

    <script language="javascript">

    function check() {

     document.myform.text1.value="text"

     }

    </script>

  </body>

</html>

运行结果如图七所示：

图七：实例七运行结果

（2）checkbox复选框和radio单选按钮

checkbox的作用是对一个复选框中的内容进行控制。具体请看下面有关使用checkbox的实例八：

<HTML>

  <HEAD>

    <Script Language="JavaScript">

        function test()

        {

            document.myform.checkbox1.click();

            document.myform.checkbox2.click();

            document.myform.checkbox3.click();

            document.myform.checkbox4.click();

        }

                function checkall()

        {

            if(document.myform.checkbox6.checked==true)

            {

                document.myform.checkbox1.checked=true;

                document.myform.checkbox2.checked=true;

                document.myform.checkbox3.checked=true;

                document.myform.checkbox4.checked=true;

            }

            else

            {

                document.myform.checkbox1.checked=false;

                document.myform.checkbox2.checked=false;

                document.myform.checkbox3.checked=false;

                document.myform.checkbox4.checked=false;

            }

        }

    </Script>

  </HEAD>

  <BODY>

    <form name="myform">

    <INPUT type="checkbox" name="checkbox1">长城<br>

    <INPUT type="checkbox" name="checkbox2">故宫<br>

    <INPUT type="checkbox" name="checkbox3">北戴河<br>

    <INPUT type="checkbox" name="checkbox4">西湖<br>

    <INPUT type="checkbox" value="全部反选" name="checkbox5" onClick="test()">全部反选

    <INPUT type="checkbox" value="全选" name="checkbox6" onClick="checkall()">全选

    </form>

  </BODY>

</HTML>

运行结果如图八所示：

 图八：实例八运行结果

radio有5种属性：name、value、checked、length和index。具体请看下面有关使用radio单选按钮的实例九:

<HTML>

  <HEAD>

    <Script Language="JavaScript">

        function test()

        {

            document.myform.checkbox1.click();

            document.myform.checkbox2.click();

            document.myform.checkbox3.click();

            document.myform.checkbox4.click();

        }

                function checkall()

        {

            if(document.myform.checkbox6.checked==true)

            {

                document.myform.checkbox1.checked=true;

                document.myform.checkbox2.checked=true;

                document.myform.checkbox3.checked=true;

                document.myform.checkbox4.checked=true;

            }

            else

            {

                document.myform.checkbox1.checked=false;

                document.myform.checkbox2.checked=false;

                document.myform.checkbox3.checked=false;

                document.myform.checkbox4.checked=false;

            }

        }

    </Script>

  </HEAD>

  <BODY>

    <form name="myform">

    <INPUT type="checkbox" name="checkbox1">长城<br>

    <INPUT type="checkbox" name="checkbox2">故宫<br>

    <INPUT type="checkbox" name="checkbox3">北戴河<br>

    <INPUT type="checkbox" name="checkbox4">西湖<br>

    <INPUT type="checkbox" value="全部反选" name="checkbox5" onClick="test()">全部反选

    <INPUT type="checkbox" value="全选" name="checkbox6" onClick="checkall()">全选

    </form>

  </BODY>

</HTML>

运行结果如图九所示:

图九：实例九运行结果

FeWeb基础之JavaScript简介的更多相关文章

  1. FeWeb基础之HTML

    FeWeb基础之HTML 1.HTML简介 HTML是一种超文本标记语言,它的文件扩展名为.html,它的所有部分都是由标记<...>和标记</...>包括起来. 在一个HTM ...

  2. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  3. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

  4. 前端基础：JavaScript介绍

    JavaScript介绍 一.JavaScript简介 1.在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现二层,因为Netscape与Sun合作,N ...

  5. 前端基础之JavaScript（Day53）

    阅读目录 一.JavaScript基础 二.JavaScript对象 三.BOM对象 一.JavaScript基础 http://www.cnblogs.com/yuanchenqi/articles ...

  6. 为什么我要放弃javaScript数据结构与算法（第一章）—— JavaScript简介

    数据结构与算法一直是我算比较薄弱的地方,希望通过阅读<javaScript数据结构与算法>可以有所改变,我相信接下来的记录不单单对于我自己有帮助,也可以帮助到一些这方面的小白,接下来让我们 ...

  7. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  8. 零基础学 JavaScript 全彩版 明日科技 编著

    第1篇 基础知识 第1章 JavaScript简介 1.1 JavaScript简述 1.2 WebStorm的下载与安装 1.3 JavaScript在HTML中的使用 1.3.1 在页面中直接嵌入 ...

  9. JavaScript简介和发展史，JavaScript组成和开发工具-乐字节

    一.JavaScript简介 JavaScript 是一种具有面向对象能力的.解释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言.它的主要目的是,验证发往服务器端 ...

随机推荐

  1. 7.10 数据注解特性--NotMapped

    NotMapped特性可以应用到领域类的属性中,Code-First默认的约定,是为所有带有get,和set属性选择器的属性创建数据列.. NotManpped特性打破了这个约定,你可以使用NotMa ...

  2. C#基础知识五之abstract virtual关键字

    abstract 用关键字abstract修饰的类叫做抽象类,且只能作为基类,也不能实例化. 用abstract定义的抽象类中不一定只包含抽象方法 ,可以包含非抽象方法. abstract定义的方法一 ...

  3. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  4. Java日期时间操作的一些方法

    1. 获得Calendar实例: Calendar c = Calendar.getInstance(); 2. 定义日期/时间的格式: SimpleDateFormat sdf =new Simpl ...

  5. 【JAVA并发编程实战】10、并发程序的测试

    1.产生随机数 package cn.study.concurrency.ch12; public class Util { public static int xorShift(int y) { / ...

  6. jQuery实现侧边导航栏效果

    效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...

  7. easyui弹出层在最顶层显示跳出iframe框架通用javascript代码

    有时候我们用easyui在后台框架中弹框的时候,总是显示在框架页面里面而不是整个系统框架的上面,看着有些不太乐意. dialog = function (opts) { var query = par ...

  8. 原生JS：全局属性、全局方法详解

    全局属性.全局方法 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5853342.html 首先普及几个我总结的非常实用又很基础的知识:(呵呵,仅 ...

  9. 解决jQuery多个版本，与其他js库冲突方法

    jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...

  10. 本周进步要点20161023(含李笑来第二场live笔记要点)

    本周主要忙于去武汉参加iDOF2016智能数字油田会议,会上做了题为“油田SOA及云平台的系统思考与实践”的报告,为了准备这篇报告,用到了一些以前学过的知识,具体内容见“参加iDOF2016会议的收获 ...