HTML5移动开发之路（28）—— JavaScript回顾3

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（28）—— JavaScript回顾3

一、基本数据类型

number:数字类型

string:字符串 (注意s小写：string是基本类型)

boolean:布尔类型   //前三个都有对应的包装类

null：空类型

undefined:未定义类型

测试一：

[html] view plain copy

print?

  1. <html>
  2. <!--基本类型测试-->
  3. <head>
  4. <script>
  5. function f1(){   //number类型
  6. /*有返回值时也不能function void f1(){}*/
  7. alert(‘hello‘);
  8. /*alert(); 弹出消息框*/
  9. alert(‘hehe‘);
  10. var i=100;
  11. //js当中字符串可用单引号也可用双引号
  12. i=‘hello‘;
  13. //typeof是一个运算符，可以返回变量实际存放的数据的类型
  14. alert(typeof i);
  15. /*js是弱类型语言 不能： number i=100; 不能在声明时指明其类型，在运行时才能确定*/
  16. }
  17. function f2(){   //string类型
  18. var str1=‘hello‘;
  19. var str2=‘hello‘;
  20. if(str1==str2){
  21. alert("str1==str2");
  22. }else{
  23. alert("str1!=str2");
  24. }
  25. var str3=‘100‘;
  26. var i=100;
  27. if(str3==i){ //两个＝号，进行类型转换
  28. alert("str3==i");
  29. }else{
  30. alert("str3!=i");
  31. }
  32. if(str3===i){ //三个=号，不进行类型转换
  33. alert("str3==i");
  34. }else{
  35. alert("str3!=i");
  36. }
  37. }
  38. function f3(){  //boolean类型
  39. //布尔类型只有两个值：true/false;
  40. var flag=true;
  41. alert(typeof flag);
  42. //var str="abc";
  43. var str=new Object();//创建一个对象,对象会转换为true;
  44. var str=null; //转换为false;
  45. var str;  //undefined 转换为false;
  46. //强制转换，非空的字符串转换为true,非零的数字转换为true;
  47. if(str){
  48. alert(‘结果为真‘);
  49. }else{
  50. alert(‘结果为假‘);
  51. }
  52. }
  53. function f4(){  //null类型
  54. var obj=null;
  55. //null类型只有一个值——null;
  56. //输出的结果是Object
  57. alert(typeof obj);
  58. }
  59. function f5(){ //undefined类型
  60. var obj;
  61. alert(typeof obj);
  62. }
  63. </script>
  64. </head>
  65. <body style="font-size:30px;">
  66. <input type="button" value="演示基本类型的使用"
  67. onclick="f1();"/>
  68. </body>
  69. </html>

测试二：parseInt

[html] view plain copy

print?

  1. <html><span style="white-space:pre">  </span>
  2. <head>
  3. <script>
  4. /*number--->string
  5. string---->number
  6. */
  7. function f1(){  //字符串变数字
  8. //      var str1=‘fsfs‘;     读出NaN
  9. //              var str1="1234fsfs";  可以读出1234
  10. //              var str1="fsfs1234";   不可以读出
  11. //              var str1="22323.08";
  12. var str1=‘1234‘;
  13. //window.parseInt();  window可以省略
  14. var n1=parseInt(str1);
  15. //js浮点运算会有误差，先放大x倍，再缩小x倍
  16. //      var n2=parseFloat(str1);
  17. //undefined + 数字 ＝ NaN
  18. alert(n1+100);
  19. }
  20. function f2(){
  21. var n1=100;
  22. //number--->Number(对应的包装类型)  再调用toString();
  23. var s1=n1.toString();
  24. //      var s1=n1+‘‘;
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <input type="button" value="演示基本数据类型" onclick="f1();"/>
  30. </body>
  31. </html>

测试三：string的方法

length属性：返回字符串的长度

charAt(index):返回指定位置的字符

substring(from,to):返回子字符串

indexOf(str):返回字符串在原字符串中的位置

lastIndexOf(str):

match(regexp):返回符合正则表达式的一个数组

截取

[javascript] view plain copy

print?

  1. function f4(){ //string的方法
  2. var str1="abcdef";
  3. var str2=str1.substring(1,4);
  4. alert(str2);
  5. }

正则

[javascript] view plain copy

print?

  1. function f5(){
  2. var str="asdfas12323adfasf23423";
  3. //在js中用/reg/,在执行时，会将//内的内容转换成一个RegExp对象
  4. var reg=/[0-9]+/g;
  5. //reg中是一个对象，不是字符串,注意加一个g搜索整个字符串，还有i忽略大小写。
  6. var arr=str.match(reg);
  7. alert(arr);
  8. }

查找

[javascript] view plain copy

print?

  1. function f6(){
  2. var str1="sdf1223asdfasf23423";
  3. var reg=/[0-9]+/;
  4. //alert(typeof reg);
  5. alert(reg instanceof RegExp);
  6. var index = str1.search(reg);
  7. alert(index);
  8. }

替换

[javascript] view plain copy

print?

  1. function f7(){
  2. var str1="sdf444asdfadf4423";
  3. var reg=/[0-9]+/g;
  4. var str2 = str1.replace(reg,‘888‘);
  5. alert(str2);
  6. }

二、Object类型（数组、函数，其他的在下一篇中）

1、数组

js数组的长度可变

js数组元素是任意的(可以混合存放不同类型的数据)

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <script>
  4. function f1(){  //创建数组的第一种方式
  5. var arr=new Array();  //()可以省略不写
  6. arr[0]=1;
  7. arr[3]=2;
  8. arr[5]=‘abc‘;
  9. alert(arr.length);
  10. alert(arr[1]);
  11. alert(arr[3]);
  12. }
  13. function f2(){ //第二种方式
  14. var arr=[];
  15. arr[0]=1;
  16. arr[3]=22;
  17. var arr=[1,2,3,4,5,6];
  18. arr[7]=11;
  19. alert(arr.length);
  20. }
  21. function f3(){ //多维数组的创建
  22. var arr = new Array();
  23. arr[0]=[1,2,3,4,5];
  24. arr[1]=[6,7,8,9,10,11,12,13];
  25. arr[2]=[14,15,16,17,18,19];
  26. for(var i=0;i<arr.length;i++){
  27. for(j=0;j<arr[i].length;j++){
  28. alert(arr[i][j]);
  29. }
  30. }
  31. }
  32. function f4(){ //数组常用的属性和方法
  33. var arr=[11,22,33,44];
  34. arr.length=2;  //数组的长度可以写,后面的被砍掉
  35. alert(arr);
  36. alert(typeof abc);
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. <input type="button" value="数组的使用" onclick="f4()"/>
  42. </body>
  43. </html>

数组中的一些函数

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <script>
  4. function f1(){
  5. var a1 = [1, 2, 3];
  6. var str = a1.join(|);
  7. alert(str);
  8. }
  9. function f2(){
  10. var a1 = [1, 2, 3];
  11. var a2 = [4, 5, 6];
  12. var a3 = a1.concat(a2); //数组连接
  13. alert(a3);
  14. }
  15. function f4(){
  16. var a1 = [1, 2, 3];
  17. var a2 = a1.reverse(); //是对原有数组翻转
  18. alert(a2);
  19. alert(a1);  //原数组变了
  20. }
  21. function f5(){
  22. var a1 = [1, 2, 3, 4, 5, 6];
  23. var a2 = a1.slice(2,4); //对数组截取
  24. alert(a2);
  25. alert(a1); //原数组没有变化
  26. }
  27. function f6(){
  28. var a1 = [5, 1, 7, 2, 8];
  29. var a2 = a1.sort(); //从小到大
  30. alert(a2);
  31. }
  32. function f7(){
  33. var a1 = [15, 111, 7, 22, 88];
  34. var a2 = a1.sort(); //默认按照字典顺序排序
  35. alert(a2);
  36. }
  37. function f8(){
  38. var a1 = [15, 111, 7, 22, 88];
  39. var a2 = a1.sort(function(t1, t2){
  40. return t2-t1;
  41. });
  42. alert(a2);
  43. }
  44. function f9(){  //按照字符串长度排序
  45. var a1 = [‘abc‘, ‘bb‘, ‘casd‘, ‘a‘];
  46. var a2 = a1.sort(function(t3, t4){
  47. return t4.length-t3.length;
  48. });
  49. alert(a2);
  50. }
  51. </script>
  52. </head>
  53. <body>
  54. <input type="button" value="click me" onclick="f9()"/>
  55. </body>
  56. </html>

2、函数

定义一个函数

function 函数名(参数){

函数体

}

要注意的几个问题

a.不能有返回类型的声明，但是可以有返回值。

b.函数其本质是一个对象，是Function类型的实例，函数名是一个变量，存放了这个对象的地址(函数名是一个变量)

c.在函数内部，可以使用arguments对象访问参数

d.函数不能重载

[html] view plain copy

print?

  1. <html>
  2. <!--函数的使用-->
  3. <head>
  4. <script>
  5. function add(a1, a2){
  6. return a1+a2;
  7. }
  8. function test(){
  9. var sum = add(1, 1);
  10. alert(sum);
  11. }
  12. function test2(){
  13. //  alert(typeof add);
  14. alert(add instanceof Function);  //函数是Function类型的实例
  15. var f2 = add;           //存放的是对象的地址
  16. add = null;              //add指向空
  17. var sum = f2(1, 1);         //等价于 add(1, 1);
  18. alert(sum);
  19. }
  20. function add2(arg1, arg2){
  21. //return  arg1 + arg2;
  22. return arguments[0]+arguments[1];
  23. }
  24. function add3(arg1, arg2){  //首先指向一个对象
  25. return arg1+arg2+100;
  26. }
  27. function add3(){    //指向了另一个对象
  28. return arguments[0]+arguments[1];
  29. }
  30. function test3(){
  31. //var sum = add2(1);         //结果为NaN,因为arg2是undifined
  32. //var sum(1, 1, 1);    //结果为2
  33. //var sum=add(1, 1);
  34. //var sum = add2(1, 1, 1);
  35. var sum = add3(1, 1);
  36. alert(sum);
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. <input type="button" value="click me" onclick="test3()"/>
  42. </body>
  43. </html>

其他Object类型请看下一篇

时间： 2024-10-27 10:29:45

HTML5移动开发之路（28）—— JavaScript回顾3的相关文章

HTML5移动开发之路（29）—— JavaScript回顾4

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(29)-- JavaScript回顾4 一.变量的作用域 JavaScript脚本的执行过程分为两个阶段: 第一阶段,js引擎()先扫描整个javascript代码.当碰到<script>时,会先创建一个全局的活动对象,将<script>中出现的变量的声明,函数的定义保存在活动对 象里面.如果碰到函数,则创建对应的局部活动对象,将函数内部的变量的声明及函数的定义保存在该活动对象里面. 第二阶段

HTML5移动开发之路（30）—— JavaScript回顾5

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(30)-- JavaScript回顾5 一.查找 第一种方式:依据id查找 var obj = document.getElementById(id);   //document是HTMLDocument的实例 [html] view plain copy print? <html> <head> <script> function f1(){ var obj = document

HTML5移动开发之路（27）—— JavaScript回顾2

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(27)-- JavaScript回顾2 JavaScript面向对象基础知识 1.如何定义一个类,使用如下语法来创建一个类 [javascript] view plain copy print? function Person(name, age){ //习惯上第一个字母大写 //this修饰的变量称为属性 this.name = name; this.age = age; //如果属性值是一个函数,则这个

HTML5移动开发之路（26）—— JavaScript回顾1

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(26)-- JavaScript回顾1 很久没有怎么用过JavaScript了,感觉有点生疏,最近在看关于HTML5移动开发方面的资料,有一种直觉告诉我,JavaScript昨天.今天很重要,明天会更重要.现在好多基于JavaScript的框架给我们的开发带来了很大便利,但是要更好的使用这些工具,我们就必须对JavaScript有一个更高的认识,翻开以前的笔记,开始复习吧. 一.JavaScript的作用

HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(19)--HTML5 Local Storage(本地存储) 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. 借用网上的一张图来看下目前主流的本地存储方案: Cookie: 在web中得到广泛应用,但局限

HTML5移动开发之路（20）——HTML5 Web SQL Database

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(20)--HTML5 Web SQL Database 一.Web Database介绍 WebSQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome.Firefox.Opera等主流浏览器都已经支持WebSQL Database WebSQL数据库有三个核心方法: 1)打开数据库openDatabase()方法: 此方法创建数

小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互 当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（53）——jQueryMobile页面间参数传递

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递 在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的