JavaScript 基础之一
来源:互联网 发布:沪昆高铁贵州段 知乎 编辑:程序博客网 时间:2024/06/16 07:05
什么是JavaScript?
JavaScrjpt是由Netscape公司开发的一种脚本语言(scrptingIanguage)。在HTML基础上,使用Javascript可以开发交互式Web网页.Javascript的使用使得网页和用户之间多了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加动态的内容.运行用Javascript编写的程序需要支持Javascript语言的浏览器。
Javascr短小精悍,又是在客户机上执行的,大大提高了网页的浏览束度和交互能力.同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
Javascript是一种脚本语言,它采取小程序段的方式实现编程,像其他脚本语言一样,Javascript同样也是提供了一个简易的开发过程;它的基本结构形式与C、C++不同,不像这些语言一样,需要先编译,而是在
程序运行过程中被逐行地被解释.它与HTML表示结合在一起。
JavaScript特性
基于对象、跨平台
动态性
javascript是动态的可以直接对用户操作做出响应,无需经过Web服务器程序,以某事件作为驱动,如用户单击按钮提交、滚动鼠标等
安全性
即不可以访问本地文件、服务器文件、删除等操作,仅仅实现网页之间的交互,功能专一。
JavaScript架构
- <script language="javascript" type="text/javascript">
- //添加javascript代码
- </script>
数据类型
1.基础数据类型
数值型、字符串型、逻辑型、undefined、null
2.复合数据类型
对象、数组、函数
由于JavaScript是一种无类型语言,所以,数组元素可以是任意的数据类型,同一数组的不同元素也可以具有不同的类型,数组元素也可以是其它数组,可以创建多维数组
数组声明如下:
- /**************************
- *声明数组的三种方式
- **************************/
- //声明一个无类型数组
- var strArray=new Array();
- //声明一个长度为5的数组
- var strArray=new Array(5);
- //声明一个函数5个指定元素的数组
- var strArray=new Array(1,2,3,4,5);
- //Array对象的length属性用于说明数组包含的元素个数
- var intNum=strArray.length;
事件处理机制
单击事件按钮例子:当单击事件触发时,弹出提示框,表示单击事件触发。
实现代码:
- <script language="javascript" type="text/javascript">
- //对单击事件作出响应
- function Click()
- {
- alert("单击事件触发!");
- }
- </script>
- <body>//给单击按钮添加事件 Onclick="javascript:Click()"事件
- <input name="单击" type="button" align="middle" value="单击按钮" onclick="javascript:Click()" />
- </body>
Javascript是一种松散类型、动态类型语言,声明变量时无需指定数据类型,从而更灵活、简单。
运算符、比较运算符、逻辑符号、三大流程控制语句、VB/C/C++等语言类型,我们都很熟悉
常见错误
1.区分大小写
如函数 function number(){} 与 function Number() {} 是两个不同的函数。
2.单引号、双引号
JS本身并没有规定一定使用双引号或单引号,但为了代码易读我们再JS代码中使用单引号而在HTML中使用双引号。例如
- <script language="javascript" type="text/javascript">
- //单双引号分开,使代码容易理解
- var temp='<h2 class=“a”> A list </h2>
- </script>
4.不支持重载,会将原有函数覆盖掉
5.换行符
- <script language="javascript" type="text/javascript">
- //"\"为换行符
- var temp='<h2 class=“a”> A list </h2> \
- <ol>\
- <ol>\
- </script>
JavaScript应用的很广,也很多,是一种目前流行的脚本语言。
====================================================================================
- JavaScript与JScript关系
- 这样追溯的以前,javaScript和Jscript分别是netscape公司和microsoft公司为自己的浏览器而设计开发的脚本语言,在这两种脚本语言没有统一标准以前,很多的Web程序员不得不为不同的浏览器而设计不同的脚本语言运行,很是苦恼,为了解决脚本同一问题,于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。现在javaScript这个词也是代表这两种标准的意思,于是用了这个词语。
- JavaScript开发环境与编辑工具
- 它的运行环境很简单,只需要拥有浏览器既可以运行javaScript代码
- 编辑工作也有很多种,比如常见的PSPad、DreamWave、VS、记事本等等
- JavaScript基本架构
- 上面的<!-- …… -->是为了解决浏览器不兼容的问题,如果旧版浏览器不兼容JavaScript代码,将隐藏JavaScript代码,否则会把它视为HTML代码一部分显示在浏览器中,称为无用信息。
- <span style="font-size:18px;"><head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>第一份JavaScript程序</title>
- </head>
- <body>
- <script language="javascript">
- //批注文字隐藏
- <!--
- document.write("第一个JavaScriptc程序<br>");
- -->
- </script>
- </body>
- </html></span>
- JavaScript程序代码的位置
4.1 Head区域的JavaScript代码
在Head区域的JavaScript代码是为了保证运行程序代码调用前相关函数程序代码已经加载,因为代码执行是从上到下依次执行,通常这个区域代码为了Body区域程序代码所调用的事件或处理函数,如下代码执行结果:
- <span style="font-size:18px;"><title>第一份JavaScript程序</title>
- <script language="javascript">
- //批注文字隐藏
- <!--
- function showmessage()
- {
- alert("Head区域的JavaScript程序代码");
- }
- -->
- </script>
- </head>
- <body onload="JavaScript:showmessage();">
- <h2>Head区域的JavaScript程序代码</h2>
- <hr>
- 在Head区域运行事件处理程序
- </body></span>
执行结果为:
当弹出框弹出来时,Body部分内容已经显示出来,即这部分代码已经加载完,Body部分代码是在Head区域之前加载。
4.2 Head区域的JavaScript代码
- <span style="font-size:18px;"> <!--先加载-->
- <link href="css/admin.global.css" rel="stylesheet" type="text/css" />
- <link href="css/admin.index.css" rel="stylesheet" type="text/css" />
- <!--后加载-->
- <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
- <script src="js/jquery.utils.js" type="text/javascript"></script>
- <link href="jBox/Skins/Green/jbox.css" rel="stylesheet" type="text/css" /></span>
上面链接CSS文件或是JS文件是按着从上到下顺序加载的,如果某个文件需要用到另一个文件,那么就需要放在该文件之前在家,否则则会出错,这也是我们经常遇到的问题,希望大家多多注意.
5 Body区域的JavaScript代码
在加载网页时,Body区域内的程序代码会马上运行,这些程序代码输出的内容属于网页的一部分,看下面代码
- <span style="font-size:18px;"> <body >
- <h2>Body区域的JavaScript程序代码</h2>
- <hr>
- <script language="javascript">
- //批注文字隐藏
- <!--
- alert("Body区域的JavaScript程序代码");
- -->
- </script>
- 在Body区域运行事件处理程序
- </body></span>
执行结果为:
此次执行结果中,Body在<JavaScript>后面的代码没有执行,说明在Body里的代码用网页加载时马上执行,而不是调用时再执行,因此需要调用或处理事件的函数或代码应当放入Head区域里面。
另外,如果把调用代码卸载Body里面,因为我们所做的操作都是属于网页一部分,也需要写在网页内部。
6 写作风格
JavaScript写作风格在上一篇博客已经说明,这里需要注意下载 { } 大括号后面没有“ ;”号。
======================================================================
- 怎么样创建一个对象?
- 利用Object创建自定义对象
- JavaScript能够自定义对象来扩展程序的功能,不仅如此,它还能扩展JavaScript提供的内置对象,新增内置对象的属性或方法
- 例如下面代码,创建一个myObj对象
- <span style="font-size:18px;"><script language="javascript" type="text/javascript">
- //声明一个对象副本
- var myObj=new Object();
- //简写形式
- var myObj=new {};
- </script></span>
- 给对象增加属性
-
- <span style="font-size:18px;"> //给对象增加属性
- myObj.Name='李龙生';
- myObj.Age=24;</span>
- 也可以用with语句
- <span style="font-size:18px;"> //with语句对对象操作
- with(myObj)
- {
- Name='李龙生';
- Age='24';
- }</span>
- 利用Object创建自定义对象
PS:JavaScript的对象可以看做是一个数组,对象名即数组名,属性即数组元素,属性值即元素值。
- 利用构造函数创建对象
- 构造函数(Constructor Function)是一个函数,能够定义对象的属性和方法,其实,JavaScript内置对象也是一些构造函数,如Object、Array、String等分别对应Object()、Array()、String()构造函数。
- JavaScript能够自己建立对象的构造函数,定义对象拥有的属性和方法,然后,利用定义好的函数建立对象,也可以把它视为一个对象的声明,如下代码:
- <span style="font-size:18px;"><script language="javascript" type="text/javascript">
- //定义一个验证登陆函数
- function yanzheng(UserName,UserPassWord)
- {
- this.name=UserName;
- this.password=UserPassWord;
- }
- </script></span>
- 上述构造函数拥有两个参数值,可以建立属性值,this命令指的是建立的对象本身.
- 使用new命令建立对象副本
- <span style="font-size:18px;"> //实例化对象
- yanzheng1=new yanzheng('李龙生','123456');</span>
- 一般方式对象副本方式增加属性和方法
- 只需通过对象自己增加,很简单不再举例子。
- 通过JavaScript的Prototype对象增加属性和方法
- JavaScript属于一种基于原型语言,不同于Java、VB等,基于原型的语言其类与实例对象区别不大
- 例如我们可以拿一个现成的对象作为原型建立其他对象,此对象可以分享原型对象的属性和方法,使用prototype对象可以继承其他对象,而这一点是基于Class中,做不到的,在Class中需要用深浅复制的Prototype模式才可以实现。
- 每一个对象都拥有Prototype属性,这个属性会被创建这个对象副本的对象所继承,这样创建新对象时不用重复已有的属性、方法,节省了内存空间。
- 增加属性
- <span style="font-size:18px;"> //通过原型增加级别属性
- yanzheng.prototype.Level="管理员";</span>
增加方法
- <span style="font-size:18px;"> //通过原型增加登陆方法
- yanzheng.prototype.login=BeginLogin;</span>
e. 通过Prototype继承其它对象
继承不但可以使用原对象作为原型建立其它对象,还可以扩展对象的属性和方法,例如对上面验证函数如果新增一个安全模式验证函数,但它也需要用户名、密码,只需继承上面即可。看下面代码
- <span style="font-size:18px;"> //登陆模式
- function SSL(ssl)
- {
- this.SSL=ssl;
- }
- //prototype对象的继承
- SSL.prototype=new yanzheng();</span>
JS是一门语言,需要系统学习,理解语言的本质才会运用自如,打好基础才能走的更远!!
===============================================
- JavaScript 基础之一
- javascript基础之一(函数)
- 再读《悟透javascript》之一、JavaScript基础
- JavaScript学习笔记之一JS语言基础
- JavaScript基础系列之一 快速入门
- Ajax基础之一:JavaScript中的用户自定义类
- Javascript之一:Javascript概要
- JavaScript全面了解作用域(基础、this、闭包、继承)之一
- JavaScript入门学习之一
- JavaScript常用脚本之一
- 日常javascript之一
- JavaScript调试方法之一
- javascript继承方式之一
- javaScript学习笔记之一
- javascript心得之一
- JavaScript收藏系列之一
- JavaScript初探之一_HelloWorld
- JAVASCRIPT动画之一
- opencv中CvSeq的用法
- PHP使用PEAR的auth_http类库用身份校验
- WPF - ListBox显示任意内容
- C语言socket判断网络是否联通(支持域名/附源码)
- OpenStack的架构详解(9)
- JavaScript 基础之一
- OpenStack的架构详解(10)
- 显示乱码问题
- OpenStack的架构详解(11)
- dll传递string实现方法
- FTPS vs. SFTP: What to Choose
- Executors 和线程池
- 如何编写出拥抱变化的代码?
- 参数判断。一点小经验