javascript 基础篇2 数据类型,语句,函数


Posted in Javascript onMarch 14, 2012

写内容之前废话一句:因为旧版有些浏览器不支持javascript脚本,遇到script结点,当做普通内容输出了,所以有时候为了让版本兼容,会在script结点里的内容写上注释符号,这样的话在旧版里虽然程序会失效,但是不会出现我们的代码,类似于这样(请忽略括号以及括号里的东西):

<script type="text/javascript"> 
<!-- (注意,这里必须换行) 
xxxxxx; 
--> (这一行也不可以写东西。) 
</script>

注意: 经过测试发现,js语句不可以跟注释符号写在同一行,不然的话就在新版的浏览器里也会失效。

javascript 的数据类型:

数值类型:包括所有的数字。
字符串类型 string 用“” 或‘'括起来表示
布尔类型 boolean =true 或 false。

变量:用来存储数据的容器,在程序里存储的数值时可以变化的。

变量的声明: var 变量名[= 值];

如果变量在函数内部声明,那么它是局部的,如果在函数外,那就是全局的,意思你们懂的。

也就是说,不管声明哪种类型的变量,都是用var, 具体是哪一种数据类型,则是在初始化之后确定的。如果没有初始化的话,那么它就是个未定义类型的变量。

我们就利用上篇js里提到的小工程来玩儿一下它的数值类型好了。

在main.html里写入:

<html> 
<head> 
<title>O.O</title> 
<script type="text/javascript" src="js/output.js"></script> 
<script type="text/javascript"> 
var a=456; 
var b="Hello~"; 
var c=true; 
var d; 
document.write(a+""+ typeof a+"<br/>"); 
document.write(b+""+ typeof b+"<br/>"); 
document.write(c+""+ typeof c+"<br/>"); 
document.write(d+""+ typeof d+"<br/>"); </script> 
</head> 
<body> 
This is my JSP page. <br/> 
</body> 
</html>

然后我们看输出:

javascript 基础篇2 数据类型,语句,函数

可以看到,赋值以后,var都有了自己的类型,但是没有定义的var d,就是未定义的。

这里我们可以看到,typeof这个保留字,可以返回基本数据类型的名称,除了这三种之外,还可以返回object的类型。

但是如果是特殊类型,就需要instanceof 来返回类型名称了。

比如如果定义一个 var obj=new Object(); 或者var date=new Date(); 使用typeof来返回它的类型( typeof obj ),输出的是 object

数据类型的转换:

从String转换为int/float使用函数: parseInt(String) / parseFloat(String) 例如:parseFloat("3.14159");

从数字类型转换为string,使用 toString()函数:比如:

var iNum=30; 30.toString(2);// 后面的括号里加个2,意思是转换为二进制字符串。

//同样还可以有8进制和十六进制,如果没有数字,那就是直接转换了。

接下来就是做个小实验了,把刚才那个文件里script结点下的内容换换:

<script type="text/javascript"> 
var a=456; 
var b="789"; 
var c=a.toString() 
var d=parseInt(b); 
document.write(a+""+ typeof a+"<br/>"); 
document.write(c+""+ typeof c+"<br/>"); 
document.write(b+""+ typeof b+"<br/>"); 
document.write(d+""+ typeof d+"<br/>"); 
</script>

然后,运行一下吧~

javascript 基础篇2 数据类型,语句,函数

看起来,转换类型其实很简单的嘛~
运算:
运算其实跟c java都一样,都是加减乘数啊and啊,or啊的,其实没什么差别。
这里就重申明一次i++和++i的差别吧。
i++是执行一次i+1,但是返回i,比如我写一句
var i=50; 
if(i++<=50) 
document.write(i);

那么运行时的顺序其实是:赋值:i=50, 判断:if(i<=50), 执行i=i+1 ,执行判断后的语句:xxxx。所以最后输出的是51,我就不截图了。
如果那里使用的是++i,那么返回的是加1后的值,也就是说不会有输出了。

--------------------------------------------------------------------------------
语句部分
条件语句:if 和 switch
其实和c是一样的,这部分并不需要多讲,就是条件语句中也要注意一点小细节:
js的if语句中,在下列情况下返回为false: null \ undefined \ 空字符串"" \ 0 \ false
关于空字符串还要注意下:var s=""和 var s=new String("")是不一样的,后者开辟了内存空间,所以返回true。
下面我们来验证一下吧~,javascript节点下:

<script type="text/javascript"> 
var a; 
var b=new String(""); 
if(null) document.write("null"); 
if(0) document.write("0"); 
if(a) document.write("a undefined"); 
if(false) document.write("false"); 
if("") document.write("empty string"); 
if(b) document.write("new String()"); 
document.write("<br/>"); 
</script>

然后保存,刷新main页面:

javascript 基础篇2 数据类型,语句,函数

哎呀( ⊙ o ⊙ ),果然只有new string出现了~。

swith语句也试试好了:

<script type="text/javascript"> 
var date=new Date(); 
var day=date.getDay(); 
document.write(day+"<br/>") 
switch(day){ 
case 6,7: document.write("weekend \(^o^)/"); 
break; 
case 5: document.write("hold on~! last day!"); 
break; 
default: document.write("work days."); 
} 
document.write("<br/>"); 
</script>

查看输出:

javascript 基础篇2 数据类型,语句,函数

OK,接下来是循环语句:while do-while for-in for
前两个唯一的差别就是循环和判断的顺序不同,do-while比while多循环一次,我就不举例了。
for循环相信大家也熟的不能再熟了,我们就看for-in这一句。
这个其实是针对数组的,js中数组的初始化也挺奇特的比如我们在script结点里写:(另外注意下数组的初始化,用的是中括号)
<script type="text/javascript"> 
<!-- 
document.write("test<br/>"); 
var a=[3,4,5,7]; 
for(var test in a){ 
document.write(test+": "+a[test]+"<br/>"); 
} 
--> 
</script>

我们查看输出:
javascript 基础篇2 数据类型,语句,函数

从这个结果里我们探讨出一下几点:
其中test其实算是一个int的数字,来表示数组的数标。
for-in每次循环只能走一个数,一般用来穷举。
某些情况下,只能用for-in来穷举,比如数组里存储的内容有string,有数字。
(当然,如果硬要说的话,也不是只能用for-in,但是for-in要方便许多)
函数其实第一篇简单说过了。
1. 函数名前不需要返回值,参数列表里不需要写类型。
2. 函数内部定义的变量为局部变量,不可以在外面调用。
所以格式基本就是这样:
function 函数名(参数列表){
xxxxxxx;
[return xxxx;] //可有可无
}
OK了,知道了格式,我们来尝试一下:

<script type="text/javascript"> 
<!-- 
function add(a,b){ 
var c=a+b; 
return c; 
} 
var x=20, y=45; 
document.write(add(x,y)); 
document.write("<br/>"+c); 
--> 
</script>

javascript 基础篇2 数据类型,语句,函数输出只有数字哦亲,也就是说,第二行那个直接忽略(真悲剧啊),连undefined的标准都达不到。因为它是局部变量。在函数执行完之后就被抛弃了。

除了这种规范的写法之外,还有一种叛逆的,就是,定义函数的时候没有写参数,但是函数体里也可以用参数,这样,当有参数的时候,可以有输出,此时因为使用的参数没有名字,就全存放在arguments数组里。举个例子:

<script LANGUAGE="JavaScript"> 
<!-- 
function show(){ 
for(var temp in arguments) 
document.write(arguments[temp]+""); 
} 
show(3,4,"Dumpling",4.67); 
--> 
</script>

PS:我把script结点里面的属性换了一下,其实就是说也可以这么声明javascript。LANGUAGE必须大写

看输出:

javascript 基础篇2 数据类型,语句,函数

注意,这里面,经测试function内,用arguments里存储的数据做运算也是可以的,比如

<script LANGUAGE="JavaScript"> 
<!-- 
function add(){ 
return arguments[0]+arguments[1]; 
} 
document.write(add(4,44)+""); 
document.write(add(4,"e55")); 
--> 
</script>

会输出48 4e55。当然,因为函数体中用到了两个参数,所以如果你调用时只给了一个参数,出来的结果并不是只输出一个值的,有兴趣自己测试下~如果你调用时给了3个参数,那么第三个参数就无情的被忽略了。
除了上面这种还算规整的定义外,还有一些别的方式来定义函数,比较非主流,我不喜欢用,不过还是要写出来了解下:
一种是:var add=new Function("参数","参数",......,"函数体");
<script LANGUAGE="JavaScript"> 
<!-- 
var add = new Function("a","b","var c; c=a+b; return c"); 
document.write(add(4,87)); 
--> 
</script>

输出是正确无误的,可以看到,最后一句不需要加分号,木有问题,这里的道理就是,Function其实是个类,然后add就变成了函数的名字了。
还有一种写法:
<script LANGUAGE="JavaScript"> 
<!-- 
var show=function(name){ 
document.write("<br/>"+"Hellp "+name); 
} 
show("Dumpling"); 
--> 
</script>

输出大家都懂的。。这个写法其实就是把函数名字写到前面来了而已。
既然证明了函数其实是一个object,那么当然它也有一些功能函数可以调用,比如toString()或者valueOf()函数可以打出完整,length可以返回函数的参数个数。
让我们试一下:
<script LANGUAGE="JavaScript"> 
<!-- 
var show=function(name){ 
document.write("Hello "+name); 
} 
show("Dumpling"); 
document.write("<br/>"+show.valueOf()); 
document.write("<br/> number of arguments: "+show.length); 
--> 
</script>

输出:
Hello Dumpling
function (name){ document.write("Hello "+name); }
number of arguments: 1
OK 第二篇就到这里吧~明天继续 (/^o^)/
Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
Prototype Date对象 学习
Jul 12 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
Node.js Express安装与使用教程
May 11 Javascript
js实现移动端轮播图
Dec 21 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 #Javascript
JSON.stringify 语法实例讲解
Mar 14 #Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 #Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 #Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 #Javascript
10款非常有用的 Ajax 插件分享
Mar 14 #Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 #Javascript
You might like
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
用JS实现的一个include函数
2007/07/21 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
使用python实现rsa算法代码
2016/02/17 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
自我鉴定注意事项
2014/01/19 职场文书
高二学生评语大全
2014/04/25 职场文书
医院党员公开承诺书
2014/08/30 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android