`
wangmengbk
  • 浏览: 292286 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript(1)

阅读更多
1. 什么是JavaScript?

JavaScript 是用来验证网页中表单信息合法性的。JavaScript 是一种脚本语言,提供用户交互 ,动态更改内容 ,数据验证 。

2.将JavaScript嵌入网页

   可以将 JavaScript 语句插入 HTML 文档,方式

   如下:

使用 <SCRIPT> 标签将语句嵌入文档

将 JavaScript 源文件链接到 HTML 文档中

1)使用 Script 标签

如:<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

document.write("欢迎来到 JavaScript 世界");

</SCRIPT>

</HEAD>

<BODY>

<P>尽情享受学习的快乐!!!

</BODY>

</HTML>

(2)使用外部 JS 文件

  外部 JavaScript 文件可以链接到 HTML 文档中

SCRIPT 标签的 SRC(源文件)属性可用于包括此外部文件

<script language=“JavaScript”     src= “文件名.js">

</script>

如:

<HTML>

<HEAD>

<TITLE>使用外部文件</TITLE>

<SCRIPT SRC = "test.js"></SCRIPT>

</HEAD>

<BODY>

<P>以上文本是通过访问外部 JavaScript 文件显示的

</BODY>

</HTML>

3.申明变量

同时声明和初始化变量

var a= 10;

“var” -  用于声明变量的关键字

“a” - 变量名

通常是用:parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数

常用语句:

条件语句分为if语句,if-else语句、if的嵌套;

多分支语句switch根据表达式的值,进入不同的分支执行;

for循环;do-while;while 



定义函数:

function 函数名( 参数1,参数2,… )

{

    语句;

}

如:

       function  sum ( one, two)

{

var result = one + two;

return  result;

}



调用函数:
函数调用一般和表单元素的事件一起使用,调用格式为:
事件名=“函数名” ;

如:<INPUT name=“add” type=“button”  value=“加法"

       onClick="sum(2,5)">

Eval( )函数可以计算某个计算表达式的值,

isNaN( )函数可用于判断是否是一个数字





4.JavaScript 对象简介

   a) 浏览器对象     

浏览器窗口windon,文档 document  ,url地址等



b)脚本对象        

String字符串对象 , Date日期对象 , Math数学对象等



c)HTML 对象      

各种HTML标签:段落<P>,图片<IMG>,超链接<A>等



设置定时器,使用window对象的setTimeout( )方法

如:DATE 对象中自动刷新时间

       <SCRIPT language="JavaScript">

function disptime( )

{

var time = new Date( ); //获得当前时间

var hour = time.getHours( );  //获得小时、分钟、秒

var minute = time.getMinutes( );

var second = time.getSeconds( );

var apm="AM"; //默认显示上午: AM

if (hour>12) //按12小时制显示

{

    hour=hour-12;

    apm="PM"  ;

}

if (minute < 10) //如果分钟只有1位,补0显示

   minute="0"+minute;

if (second < 10) //如果秒数只有1位,补0显示

   second="0"+second;

document.myform.myclock.value= hour+":"+minute+":"+                                                 

                                                                                second+" "+apm;

var myTime = setTimeout("disptime(  )",1000);

}

</SCRIPT>



(1)浏览器对象简介



onFocus获得焦点事件,表示获得鼠标光标, onBlur失去焦点事件,刚好与之相反



打开窗口使用window对象的open( )方法



a) history 对象

方法:

Back ( ) 方法相当于后退按钮

forward ( ) 方法相当于前进按钮

go (1)代表前进1页,等价于forward( )方法;

go(-1) 代表后退1页,等价于back( )方法

如:

<html>

<head>

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

<title>历史记录</title>

</head>

<body>

      <a href="test.html">test.html</a>

      <a href="javaScript:history.forward()">前进</a>

</body>

</html>



<html>

<head>

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

<title>测试</title>

<script language="javascript">

      <!--

             function back()

             {

                  

                    history.go(-1);

             }

      -->

</script>

</head>



<body>

      测试页面...

      <a href="javaScript:back();" onMouseOver="javaScript:window.status='俏皮的话'">后退</a>

</body>

</html>

b) Location 对象



       <html>

<head>

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

<title>陕西美景</title>

<script language="javascript">

       <!--

              function viewPP()

              {

                     var ppdiv=document.getElementById("pp");

                     ppdiv.innerHTML="<img src='"+document.sxfrm.sp.value+"' width='300' height='350'>";

              }

       -->

</script>

</head>



<body onLoad="javaScript:window.status='欢迎来到陕西'">

       <div id="pp">          

       </div>

       <form action="" method="get" name="sxfrm">

              浏览陕西景点:

              <select name="sp" onChange="viewPP();">

                     <option value="m1.jpg">太白山</option>

                     <option value="m2.jpg">兵马俑</option>

                     <option value="m3.jpg">青鸟</option>

              </select>

       </form>

</body>

</html>



5.创建一个表单

            单行文本框  <input type="text" >

          多行文本框  <textarea name="textarea"></textarea>

          密码框      <input type="password" >

          多选按钮    <input type="checkbox" >

          单选按钮    <input type="radio" >

          隐藏域     <input type="hidden" >

          文件域     <input type="file" >

          跳转菜单   <select name="menu1" > </select>

          图像域     <input type="image" >

          列表菜单   <select name="select"></select>

          提交按钮   <input type=“submit” >

          复位按钮   <input type=“reset" >

          按钮        <input type=“button" >

         

分享到:
评论

相关推荐

    The Principles of Object-Oriented JavaScript 1st Edition

    The Principles of Object-Oriented JavaScript 1st Edition If you've used a more traditional object-oriented language, such as C++ or Java, JavaScript probably doesn't seem object-oriented at all. It ...

    javaScript1.md

    javaScript1.md

    javascript1课件.ppt

    javascript1课件.ppt欢迎下载

    [精通JavaScript动态网页编程].王俊杰.扫描版

    本书结合JavaScript 1 5和Jscript 5 5 由浅入深 循序渐进地全面介绍了JavaScript知识体系及编程设计技巧 全书分4篇 共30章 内容涵盖了JavaScript语法 JavaScript核心内容 JavaScript高级以及JavaScript应用等内容 对...

    李炎恢 JavaScript文档教程pdf合集

    这个合集包含了从基础到高级的完整教程,分为三个部分,分别对应文件 `javascript 1-20章.pdf`、`javascript 21-33章.pdf` 和 `javascript 34章.pdf`,旨在帮助读者系统地掌握这门广泛应用于Web开发的重要脚本语言。...

    深入理解JavaScript系列

    本书共分四个部分,第1部分帮助读者快速入手,掌握基本的JavaScript编程要点;第2部分介绍JavaScript的发展和技术背景;第3部分深入探索JavaScript,介绍了语法、值、运算符、布尔类型、数字、字符串、语句、异常...

    精通javascript1

    精通javascript精通javascript精通javascript精通javascript精通javascript

    JavaScript权威指南(JavaScript犀牛书一本)

    1. **基础语法**:讲解了变量、数据类型、运算符、流程控制(如条件语句、循环)、函数等基本元素,帮助初学者建立JavaScript编程的基本框架。 2. **对象和原型**:深入探讨了JavaScript的面向对象特性,包括对象...

    JavaScript文档

    本资源包包含了多个关于JavaScript的重要参考资料,包括“JavaScript权威指南(英文版).chm”、“javascript5.5.chm”、“css2gb.chm”以及“JavaScript对象与数组参考大全 .chm”。 首先,我们来看“JavaScript权威...

    《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf

    《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第1章 JavaScript程序设计案例教程.pdf《JavaScript程序设计案例教程》课件(共13章)第...

    [JavaScript] Effective JavaScript 编写高质量JavaScript代码的68个有效方法 (英文版)

    [Addison-Wesley Professional] Effective JavaScript 编写高质量JavaScript代码的68个有效方法 (英文版) [Addison-Wesley Professional] Effective JavaScript 68 Specific Ways to Harness the Power of ...

    JavaScript基础语法(ppt)

    JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)JavaScript基础语法(ppt)...

    Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript[EPUB版]

    Publication Date: December 6, 2012 | ISBN-10: 0321812182 | ISBN-13: 978-0321812186 | Edition: 1 “It’s uncommon to have a programming language wonk who can speak in such comfortable and friendly ...

    Free JavaScript Editor 4.7 javascript编辑器 天涯浪子

    Free JavaScript Editor编辑器是一个先进的Java脚本编辑器,验证器和调试器对于初学者和专家。 免费的JavaScript编辑器是用于专业编辑...我就没发现这个和1st javascript editor 有何区别(除了版本号和名字之外)

    VS2015安装证书,JavaScript_ProjectSystem.msi,JavaScript_LanguageService.msi

    1. **JavaScript_ProjectSystem.msi**:这是一个项目系统组件,它为Visual Studio提供了管理和构建JavaScript项目的功能。JavaScript Project System使得开发者能够在IDE中创建、编辑、调试和构建基于JavaScript的...

    JavaScript手册 JavaScript手册

    JavaScript是一种广泛应用于网页和网络应用的编程语言,尤其在客户端脚本方面扮演着核心角色。JavaScript手册是学习和掌握这门语言的重要参考资料。手册通常包含了语言的基础语法、数据类型、控制结构、函数、对象、...

    JavaScript函数(源代码)

    JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)...

    JavaScript课堂习题答案

    JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案JavaScript课堂习题答案...

    javaScript经典实例

    1. **DOM操作**:JavaScript可以用来操纵HTML文档对象模型(DOM),添加、删除或修改页面元素。例如,通过`document.getElementById()`、`document.querySelector()`和`document.querySelectorAll()`选择元素,然后...

Global site tag (gtag.js) - Google Analytics