小强的HTML5移动开发之路（28）—— JavaScript回顾3
一、基本数据类型
number:数字类型
string:字符串 (注意s小写：string是基本类型)
boolean:布尔类型 //前三个都有对应的包装类
null：空类型
undefined:未定义类型
测试一：
<html>
<!--基本类型测试-->
<head>
<script>
function f1(){ //number类型
/*有返回值时也不能function void f1(){}*/
alert('hello');
/*alert(); 弹出消息框*/
alert('hehe');
var i=100;
//js当中字符串可用单引号也可用双引号
i='hello';
//typeof是一个运算符，可以返回变量实际存放的数据的类型
alert(typeof i);
/*js是弱类型语言 不能： number i=100; 不能在声明时指明其类型，在运行时才能确定*/
}
function f2(){ //string类型
var str1='hello';
var str2='hello';
if(str1==str2){
alert("str1==str2");
}else{
alert("str1!=str2");
}
var str3='100';
var i=100;
if(str3==i){ //两个＝号，进行类型转换
alert("str3==i");
}else{
alert("str3!=i");
}
if(str3===i){ //三个=号，不进行类型转换
alert("str3==i");
}else{
alert("str3!=i");
}
}
function f3(){ //boolean类型
//布尔类型只有两个值：true/false;
var flag=true;
alert(typeof flag);
//var str="abc";
var str=new Object();//创建一个对象,对象会转换为true;
var str=null; //转换为false;
var str; //undefined 转换为false;
//强制转换，非空的字符串转换为true,非零的数字转换为true;
if(str){
alert('结果为真');
}else{
alert('结果为假');
}
}
function f4(){ //null类型
var obj=null;
//null类型只有一个值——null;
//输出的结果是Object
alert(typeof obj);
}
function f5(){ //undefined类型
var obj;
alert(typeof obj);
}
</script>
</head>
<body style="font-size:30px;">
<input type="button" value="演示基本类型的使用"
onclick="f1();"/>
</body>
</html>测试二：parseInt
<html>
<head>
<script>
/*number--->string
string---->number
*/
function f1(){ //字符串变数字
// var str1='fsfs'; 读出NaN
// var str1="1234fsfs"; 可以读出1234
// var str1="fsfs1234"; 不可以读出
// var str1="22323.08";
var str1='1234';
//window.parseInt(); window可以省略
var n1=parseInt(str1);
//js浮点运算会有误差，先放大x倍，再缩小x倍
// var n2=parseFloat(str1);
//undefined + 数字 ＝ NaN
alert(n1+100);
}
function f2(){
var n1=100;
//number--->Number(对应的包装类型) 再调用toString();
var s1=n1.toString();
// var s1=n1+'';
}
</script>
</head>
<body>
<input type="button" value="演示基本数据类型" onclick="f1();"/>
</body>
</html>测试三：string的方法
length属性：返回字符串的长度
charAt(index):返回指定位置的字符
substring(from,to):返回子字符串
indexOf(str):返回字符串在原字符串中的位置
lastIndexOf(str):
match(regexp):返回符合正则表达式的一个数组
截取
function f4(){ //string的方法
var str1="abcdef";
var str2=str1.substring(1,4);
alert(str2);
}正则
function f5(){
var str="asdfas12323adfasf23423";
//在js中用/reg/,在执行时，会将//内的内容转换成一个RegExp对象
var reg=/[0-9]+/g;
//reg中是一个对象，不是字符串,注意加一个g搜索整个字符串，还有i忽略大小写。
var arr=str.match(reg);
alert(arr);
}查找
function f6(){
var str1="sdf1223asdfasf23423";
var reg=/[0-9]+/;
//alert(typeof reg);
alert(reg instanceof RegExp);
var index = str1.search(reg);
alert(index);
}替换
function f7(){
var str1="sdf444asdfadf4423";
var reg=/[0-9]+/g;
var str2 = str1.replace(reg,'888');
alert(str2);
}
二、Object类型（数组、函数，其他的在下一篇中）
1、数组
js数组的长度可变
js数组元素是任意的(可以混合存放不同类型的数据)
<html>
<head>
<script>
function f1(){ //创建数组的第一种方式
var arr=new Array(); //()可以省略不写
arr[0]=1;
arr[3]=2;
arr[5]='abc';
alert(arr.length);
alert(arr[1]);
alert(arr[3]);
}
function f2(){ //第二种方式
var arr=[];
arr[0]=1;
arr[3]=22;
var arr=[1,2,3,4,5,6];
arr[7]=11;
alert(arr.length);
}
function f3(){ //多维数组的创建
var arr = new Array();
arr[0]=[1,2,3,4,5];
arr[1]=[6,7,8,9,10,11,12,13];
arr[2]=[14,15,16,17,18,19];
for(var i=0;i<arr.length;i++){
for(j=0;j<arr[i].length;j++){
alert(arr[i][j]);
}
}
}
function f4(){ //数组常用的属性和方法
var arr=[11,22,33,44];
arr.length=2; //数组的长度可以写,后面的被砍掉
alert(arr);
alert(typeof abc);
}
</script>
</head>
<body>
<input type="button" value="数组的使用" onclick="f4()"/>
</body>
</html>数组中的一些函数
<html>
<head>
<script>
function f1(){
var a1 = [1, 2, 3];
var str = a1.join(|);
alert(str);
}
function f2(){
var a1 = [1, 2, 3];
var a2 = [4, 5, 6];
var a3 = a1.concat(a2); //数组连接
alert(a3);
}
function f4(){
var a1 = [1, 2, 3];
var a2 = a1.reverse(); //是对原有数组翻转
alert(a2);
alert(a1); //原数组变了
}
function f5(){
var a1 = [1, 2, 3, 4, 5, 6];
var a2 = a1.slice(2,4); //对数组截取
alert(a2);
alert(a1); //原数组没有变化
}
function f6(){
var a1 = [5, 1, 7, 2, 8];
var a2 = a1.sort(); //从小到大
alert(a2);
}
function f7(){
var a1 = [15, 111, 7, 22, 88];
var a2 = a1.sort(); //默认按照字典顺序排序
alert(a2);
}
function f8(){
var a1 = [15, 111, 7, 22, 88];
var a2 = a1.sort(function(t1, t2){
return t2-t1;
});
alert(a2);
}
function f9(){ //按照字符串长度排序
var a1 = ['abc', 'bb', 'casd', 'a'];
var a2 = a1.sort(function(t3, t4){
return t4.length-t3.length;
});
alert(a2);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="f9()"/>
</body>
</html>2、函数
定义一个函数
function 函数名(参数){
函数体
}
要注意的几个问题
a.不能有返回类型的声明，但是可以有返回值。
b.函数其本质是一个对象，是Function类型的实例，函数名是一个变量，存放了这个对象的地址(函数名是一个变量)
c.在函数内部，可以使用arguments对象访问参数
d.函数不能重载
<html>
<!--函数的使用-->
<head>
<script>
function add(a1, a2){
return a1+a2;
}
function test(){
var sum = add(1, 1);
alert(sum);
}
function test2(){
// alert(typeof add);
alert(add instanceof Function); //函数是Function类型的实例
var f2 = add; //存放的是对象的地址
add = null; //add指向空
var sum = f2(1, 1); //等价于 add(1, 1);
alert(sum);
}
function add2(arg1, arg2){
//return arg1 + arg2;
return arguments[0]+arguments[1];
}
function add3(arg1, arg2){ //首先指向一个对象
return arg1+arg2+100;
}
function add3(){ //指向了另一个对象
return arguments[0]+arguments[1];
}
function test3(){
//var sum = add2(1); //结果为NaN,因为arg2是undifined
//var sum(1, 1, 1); //结果为2
//var sum=add(1, 1);
//var sum = add2(1, 1, 1);
var sum = add3(1, 1);
alert(sum);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="test3()"/>
</body>
</html>其他Object类型请看下一篇
小强的HTML5移动开发之路（28）—— JavaScript回顾3的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（33）—— jqMobi基础
一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月 ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
随机推荐
- Python图片的横坐标汉字
给一个例子 : # -*- coding: utf-8 -*-import matplotlib.pyplot as plt import py_hanzi as ch #关键在于这 ...
- 【Codeforces Round #299 (Div. 2) C】 Tavas and Karafs
[链接] 我是链接,点我呀:) [题意] 给你一个规则,让你知道第i根萝卜的高度为si = A+(i-1)*B 现在给你n个询问; 每次询问给你一个固定的起点l; 让你找一个最大的右端点r; 使得l. ...
- 【CS Round #48 (Div. 2 only)】Water Volume
[链接]h在这里写链接 [题意] 在这里写题意 [题解] 枚举0在哪个位置就好. [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> us ...
- Android 仿今日头条频道管理（下）（GridView之间Item的移动和拖拽）
前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...
- 深度学习 Deep Learning UFLDL 最新Tutorial 学习笔记 4：Debugging: Gradient Checking
1 Gradient Checking 说明 前面我们已经实现了Linear Regression和Logistic Regression.关键在于代价函数Cost Function和其梯度Gradi ...
- 【EasyUi】页面设计必学之Layout
接触EasyUi也快一年了.非常多时候都把重心放在实现功能方面.要显示大量数据了就用DataGrid,要实现分页效果了就想着Tabs,如此等等,再接下来就是考虑CSS.js怎样让这个功能实现的更好. ...
- 在mac中导入hadoop2.6.0源代码至eclipse 分类： A1_HADOOP 2015-04-12 09:27 342人阅读 评论(0) 收藏
一.环境准备 1.安装jdk.maven等 2.下载hadoop源代码,并解压 3.将tools.jar复制到Classes中,具体原因见http://wiki.apache.org/hadoop/H ...
- ES权威指南1
Elasticsearch学习笔记 一 本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws. 本文参考和学习资料 <ES权威指南> ...
- javascript运算符应用
下面的代码会输出什么?为什么? console.log(1 + "2" + "2"); console.log(1 + +"2" + &qu ...
- GAS Syntax
GAS or GNU as syntax is a different form of syntax for assembly language files, known also as AT& ...