Javascript & DHTML 实例编程(教程)基础知识


Posted in Javascript onJune 02, 2007

[ 2007-04-11 14:31:50 | Author: never-online ] 
这一节首先请下载JScript.chm这本手册,无论新手老手,有一本手册是免不了的,特别是对于新手,如果你没有空翻犀牛书,那么这本手册将是你了解这门语言的首选。下面所讲的大多数,手册上可以没有提及,或提及很少的内容。

以下的教程都是针对你对上面所说的JScript.chm这本手册了解的基础上而写的,如果你还没有看过JScript.chm,建议你先下载,边看手册,边看教程。

JS的语法与大多数类C的语言差不多的语法,差别只在它本身的特性上面。所以语法的具体内容,我不再多写,多看看手册应该明白的。

JS五大对象:String, Number, Boolean, Object, Function。

JS四种循环:
for(var i=0; i<n; i++) {}
do {} while(true);
while(true) {}
for (var i in collection) {}

异常处理:
try {} catch(aVariable){}

JS语法我就不一一列举了,这里只JS的几大对象进行一些说明,手册也许是没有说到的。

一、字符串。
字符串是最常用的。而强制转换成字符串的方式至少有几下两种:
1、用字符串连接符"+"号。+号在JS里如果是运算就是加,如果是字符串,就是拼接,比如:
<script>
var a_number = 1000
var a_string = a_number + "";
</script>

2、用String强制转型(String)。
<script>
var a_number = 1000
var a_string = String(a_number);
</script>
在这里要注意一点,上面说的是强制转型,String前是没有"new"关键字的。如果加上new 关键字,那么得到的将是一个String对象。对象可以包含属性和方法,而字符串不能,以下可以做一个比较:
<script>
var a_number = 1000
var a_string = String(a_number);
a_string.property = "js";
alert(a_string.property) //将提示undefined

var a_object = new String(a_number)
a_object.property = "js";
alert(a_object.property) //将提示js
</script>
所以,有new和没有new是有区别的。这一点在Number,Boolean里都是如此,所以关于这样的转型,在以后中将不再多说。

二、数字(Number)。
这里也说一说转型的问题。
除了可以用Number来强制转型外,也可以用parseInt, parseFloat来转成整型或者浮点型。如果转型后不是数字,那么,将返回NaN(Not a Number),这个时候可以用isNaN函数来判断,这里你可以查一下手册,看看里面的语法。顺便记一下这个函数。

三、布尔型(Boolean)。
这一个就较麻烦一些了,因为JS里对它的处理比较奇特。
除了JScript手册上所说的:“
一个值为 true 或者 false 的表达式。如果需要,非 Boolean 表达式也可以被转换为 Boolean 值,但是要遵循下列规则: 

所有的对象都被当作 true。 
当且仅当字符串为空时,该字符串被当作 false。 
null 和 undefined 被当作 false。 
当且仅当数字为零时,该数字被当作 false。 
”以外,还应该注意:

首先,在没有强制转换成布尔型之前,也就是非true或者也非false的时候
1、在数字条件判断中,一般情况下就是三种情况:0,负数,正数,只要是非0就是true,下面是示例。
<script>
var a = 0;
var b = -1;
var c = 1;

function assert (aVar) {
if (aVar) alert(true);
else alert(false);
}
assert(a) // false
assert(b) // true
assert(c) // true
</script>
注意:上例中的条件判断是直接判断条件语句的,如果我们把条件语句改成:
<script>
var a = 0;
var b = -1;
var c = 1;

function assert (aVar) {
if (aVar==true) alert(true);
else alert(false);
}
assert(a) // false
assert(b) // false
assert(c) // true
</script>
负数会有截然不同的结果。

2、在字符串中,也需要注意
<script>
function assert (aVar) {
if (aVar) alert(true);
else alert(false);
}

var a="undefined";
var b="false";
var c="";

assert(a) // true
assert(b) // true
assert(c) // false
</script>

注意:上例中的条件判断是直接判断条件语句的,如果我们把条件语句改成:
<script>
function assert (aVar) {
if (aVar==true) alert(true);
else alert(false);
}

var a="undefined";
var b="false";
var c="";

assert(a) // false
assert(b) // false
assert(c) // false
</script>
也会有截然不同的结果。因此,在处理这方面问题的时候要小心。

也许有些朋友看到这里就会有点晕了,那么怎么样才能像手册中所说,只有"",0,null,undefined这些才能是false呢?方法至少有两种:

(一)、强制转型:
  1、用上面所说过的Boolean(aVar)来转型。
  2、用“非运算符”来转型。比如上例
    <script>
    function assert (aVar) {
    if (!!aVar==true) alert(true);
    else alert(false);
    }

    var a="undefined";
    var b="false";
    var c="";

    assert(a) // true
    assert(b) // true
    assert(c) // false
    </script>
    两个取反,将aVar转成Boolean型,相当于Boolean(aVar)。

(二)、全等运算符。
全等运算符是三个等于"===",这与上面所说的不同,它只进行同类型的比较。就上例所说,它只比较的是true或者false,如果与字符串或数字等比,都是false,只有与true相比,才是true。举例:
<script>
function assert (aVar) {
if (aVar===true) alert(true);
else alert(false);
}

var a="undefined";
var b=true;
var c=1;

assert(a) // false
assert(b) // true
assert(c) // false
</script>

四、对象(Object)。
JS创建对象有至少以下两种方法:

1、如上所说,用new关键字。比如new Number(100),new String("string"),new Object(),new customFunction()等。
这种方法在手册上有很详细的说明,这里就不再多说。

2、还可以用花括号括起来。比如
var o = { 
  m1:'never-online.net',
  m2:'blog' 
}
这种方法就比较省时省力了。利用这种方法来创建对象,需要注意的就是,
每个成员后有一个":"冒号,冒号后是该成员的内容。
其次就是,成员内容后有一个逗号",",但仅最后一个成员是没有逗号的。

五、函数(Function)。
函数在JS里的作用有两个,
一是做为一个普通函数一样被调用。
二是可以做为一个"类"(class)来使用。
第一条就没有什么可说明的了,手册上说得很清楚了,第二条就简要说明一下。
上面第四点里说到对象,除了创建JS本身的对象之外,需要创建一个类的实例,那么就必须先把“类”写出来。这个类就是Function。
比如:
<script>
function myclass() {
  this.m1="member--m1";
  this.m2="member--m2";
}
var o = new myclass();
</script>

六、关于this和new关键字。

也许有些朋友还不太清楚这个this的作用是什么。这是面向对象里所提及的内容

这里也简单说一下,this就是“自己”的意思,而上面的的“自己”,就是指myclass。
举个例子来说myclass这个类就是一个模具,模具上有一个名字(m1),还有一个螺丝(m2),而new关键字就可以理解成“生产”。那么就可以把上面的代码理解成:

(模具 myclass)function myclass() {

(模具myclass的名字是)this.m1="member--m1"
(模具myclass上面的螺丝是)this.m2="member--m2";
}

按照模具myclass的样式生产一个产品o
var o= new myclass();

这个刚出炉的产品就有模具myclass的所有特性了。当然,我们可以按照这个模具的样式生产成千上万个。

如果我们愿意,我们还可以修改一下他的属性,比如,我生产完一个产品,想把他的名字换了。我们也可以这么做

var product = new myclass();
product.m1 = "newProduct"

上面这样讲解,希望能清楚一些。

基本把要说的基础知识简单的说了一些,JS的基础知识其实也有很多,知道有疏忽,但是又不便多写,写多了就烦琐了,只有走一步看一步了,看看还有什么不清楚的,才能再写出来了 

Javascript 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 #Javascript
JavaScript 不只是脚本
May 30 #Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 #Javascript
[原创]站长必须要知道的javascript广告代码
May 30 #Javascript
JSON 学习之完全手册 图文
May 29 #Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 #Javascript
JScript的条件编译
May 29 #Javascript
You might like
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python设置环境变量的作用和实例
2019/07/09 Python
Django中modelform组件实例用法总结
2020/02/10 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
学期自我鉴定范文
2013/10/01 职场文书
如何写毕业求职自荐信
2013/11/06 职场文书
高级编程求职信模板
2014/02/16 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
详解 TypeScript 枚举类型
2021/11/02 Javascript
python中tkinter复选框使用操作
2021/11/11 Python