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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 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 str_pad 函数使用详解
2009/01/13 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
你们项目是如何进行变更控制的
2015/08/26 面试题
培训主管岗位职责
2014/02/01 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
新年祝酒词大全
2015/08/11 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python