|
|
51CTO旗下网站
|
|
移动端

1.5.4 使用变量和类型

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍使用变量和类型。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:38

1.5.4 使用变量和类型
 
定义变量要使用关键字var,在定义变量的同时还可以像在一条单独的语句中那样为其赋值。在函数中定义的变量称为局部变量,只能在该函数范围内使用。直接在<script>元素中定义的变量称为全局变量,可以在任何地方——包括在其他脚本中使用。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_20.html。
 
 
  1. 1 <!DOCTYPE html> 
  2. <html><head><title>Sample1_20</title> 
  3. </head><body> 
  4. <script type="text/javascript"> 
  5. 5 var myglobalvar="apple"; //定义了全局变量 
  6. 6 function myFun(){ //声明了一个方法 
  7. 7 var mylocalvar="sunny"; //定义了局部变量 
  8. 8 return("Hello"+name+".Today is"+mylocalvar+".");}; 
  9. 9 document.writeln(myFun("Tom")); 
  10. 10 document.writeln("I like"+myglobalvar+"."); 
  11. 11 var string1="This is a string."; //使用JavaScript 的基本类型—字符串变量 
  12. 12 var string2="This is a string."
  13. 13 var bool1=true; //JavaScript 的基本类型—布尔变量 
  14. 14 var bool2=false
  15. 15 var daysinweek=7; //使用JavaScript 的基本类型—数值变量 
  16. 16 var pi=3.14; //JavaScript 中整数、浮点数都用var 来声明 
  17. 17 var hexValue=0xFFFF; //十六进制数 
  18. 18 var mydata=new Object(); //创建对象 
  19. 19 mydata.name="Tom"; //为对象属性赋值 
  20. 20 mydata.weather="sunny"
  21. 21 document.writeln("Hello"+mydata.name+"."); 
  22. 22 document.writeln("Today is "+ mydata.weather+"."); 
  23. 23 var mydata1={ //使用对象字面变量 
  24. 24 name:"Tom", //为对象属性赋值 
  25. 25 weather:"Sunny"}; 
  26. 26 document.writeln("Hello"+mydata1.name+"."); //使用对象属性 
  27. 27 document.writeln("Today is"+mydata1.weather+"."); 
  28. 28 var mydata2={ //为对象添加方法 
  29. 29 name:"Tom", //为对象属性赋值 
  30. 30 weather:"Sunny", 
  31. 31 printMessages: function(){ //给对象属性声明一个方法 
  32. 32 document.writeln("Hello"+mydata2.name+"."); 
  33. 33 document.writeln("Today is "+ mydata2.weather+".");}}; 
  34. 34 mydata2.printMessages(); //读取和修改对象属性值 
  35. 35 var mydata3={ 
  36. 36 name:"Tom"; //为对象属性赋值 
  37. 37 weather:"Sunny";}; 
  38. 38 mydata3.name="Jerry"; //修改对象属性值 
  39. 39 mydata3["weather"]="raining"; 
  40. 40 document.writeln("Hello"+mydata3.name+"."); //读取对象属性值 
  41. 41 document.writeln("Today is "+ mydata3.weather+"."); 
  42. 42 </script></body></html> 
第5~10行为使用局部变量与全局变量示例。JavaScript是一种弱类型语言,但这不代表它没有类型,而是指不用明确声明变量的类型以及可随心所欲地用同一变量表示不同类型的值。
 
第11~17行为声明各种基本类型示例。字符串可以用夹在一对双括号或单引号之间的一串字符表示。布尔类型有两个值:true和false。整数和浮点数都用number类型表示。定义数值变量时不必言明所用的是哪种数值,只需写清楚值即可。
 
第18~41行示例了创建对象的一些代码。JavaScript支持对象概念,有多种方法可以用来创建对象,可以用对象字面量的方式定义一个对象及其属性,也可以在声明完对象后添加属性。在创建好对象后,大家还可以对对象的属性值进行修改。
 
使用对象的时候还可以用枚举对象属性。要枚举对象属性可以用for…in语句,for…in循环代码块中的语句会对对象的每一个属性执行一次。在每一次迭代过程中,所需要处理的属性名会被赋值给变量。大家来看一下下面这个简短的例子:
 
  1. 1 <!DOCTYPE HTML> 
  2. <html><head><title>Example</title></head> 
  3. <body><script type="text/javascript"> 
  4. 4 var mydata={ //声明一个对象 
  5. 5 name:"Tom", //为对象的属性赋值 
  6. 6 weather:"Sunny", 
  7. 7 printMessages:function(){ //为对象添加方法 
  8. 8 document.writeln("Hello"+mydata.name+"."); //读取对象的属性值 
  9. 9 document.writeln("Today is "+ mydata.weather+".");}}; 
  10. 10 for(var prop in mydata){ //枚举对象的属性值 
  11. 11 document.writeln("Name" + prop + "Value:" + mydata[prop]);} 
  12. 12 </script></body></html> 
 
 
大家来看一下这段代码的运行效果图,如图1-22所示。从中可以看到,作为方法定义的那个函数也被枚举出来了。JavaScript在处理函数方面非常灵活,方法本身也被视为对象的属性,这就是其结果。除了枚举对象属性,还有增删属性等。
 

在大家日后的开发中会经常用到对话,不论是内嵌的JavaScript脚本中创建的对象,还是在外部定义的脚本中通过URL引用JavaScript脚本,大家可以通过创建对象引用来操作一系列功能,这些在后面的开发中读者可以多留心观察。

 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

精通JBuilder 2006

JBuilder 2006是一款强大的Java企业级开发平台,其集成了几乎所有的Java技术,涵盖了软件开发生命周期的各个过程。本书深入浅出地介绍了JBu...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊