Web、移动开发之Web前端:(4)JavaScript

创建时间:2017/12/30 18:12:21
关键字: js语法 js流程控制 js面向对象 base64编码+

1、javascript语法规范

1.1 <script></script>可以放在任何一个地方。

可以是<head></head>内部

可以是<body></body>内部

1.2 javascript执行顺序

自上而下顺序执行。如以下页面先加载我有一批小毛驴我从来也不骑然后弹出警告窗口关闭警告窗口之后再加载有一天我心血来潮,我骑它去赶集。

 

<body>

<!--顺序-->

我有一批小毛驴我从来也不骑

<script>

alert('我的第一个JS代码2');

</script>

有一天我心血来潮,我骑它去赶集

</body>

1.3大小写敏感,弱类型。

所有的变量都用var来定义。

如果有错误,没有定义变量就使用,将不执行。

 

如执行以下代码会报错:

<body>

<!--顺序-->

我有一批小毛驴我从来也不骑

<script>

           alert(a);

</script>

有一天我心血来潮,我骑它去赶集

        

但是以下写法是可以的,省略了var关键字,先从上下文找,没有找到a变量,就定义一个。

<body>

<!--顺序-->

我有一批小毛驴我从来也不骑

<script>

        a=5;

alert(a);

</script>

有一天我心血来潮,我骑它去赶集

</body>

 

1.4 javascript的注释

HTML的注释<!---->在JS中的代码不起作用,所以在写的时候通常加上这个,避免JS错误对HTML的影响。(整个JS块注释是可以的)

JS 的注释同C#。 //   /* */

 

<!--顺序-->

我有一批小毛驴我从来也不骑

<!--

<script>

alert('我的第一个JS代码2');

</script>

有一天我心血来潮,我骑它去赶集

-->

<!--

<script>

var num = 10;

alert(num 1);

num="10";

alert(num 1);

</script>

-->

 

<!--多个js是一起的,前面定义变量,后面可以使用-->

<script>

var num = 10;

</script>

我有一批小毛驴我从来也不骑

<script>

alert(num 1);

num="10";

alert(num 1);

</script>

 

有一天我心血来潮,我骑它去赶集

 

<!--大小写敏感-->

<script>

var num = 10;

</script>

我有一批小毛驴我从来也不骑

<script>

alert(num 1);

num="10";

alert(NUM 1);//错误

</script>

有一天我心血来潮,我骑它去赶集

 

<!--调用方法-->

<script>

<!--

alert(new Date().toLocaleDateString());

-->

</script>

1.5标准写法

<script type = “text/javascript”>

</script>

2、javascript流程控制

2.1选择结构if-esle

<script  type ="text/javascript">

var num1;

num1 = 12345;

if(num1%2==0){

alert("偶数");

alert(num1);

}

else{

alert("奇数");

alert(num1);

}

</script>

2.2 选择结构switch-case

<script  type ="text/javascript">

var num1;

num1 = 90;

switch(parseInt(num1/10 '')){

case 10: alert("Perfect!");break;

case 9 : alert("优秀");break;

case 8 : alert("良好");break;

default: alert('非优秀!');

}

</script>

2.3 循环结构for循环

<script  type ="text/javascript">

var sum=0;

for(var num = 0;num<=100;num ){

sum = sum num;

}

alert(sum);

</script>

3、javascript中方法

不加var修饰,默认是全局变量。

不用写返回类型,如果需要返回值,将方法执行完成后写上return及值即可。

3.1 不带参数的方法

<script  type ="text/javascript">

function getsum(){

sum=0;

var i;

for(i = 0;i<=100;i ){

sum = sum i;

}

alert("这是一个不带参数的方法!")

alert(sum);

}

getsum();

</script>

3.2 带参数的方法

求从num1加到num2的和。

<script type ="text/javascript">

function getsum2(num1,num2){

if(typeof(num1)=="number"&&typeof(num2)=="number"){

if(num1>num2){

var temp;

temp = num1;

num1=num2;

num2=temp;

}

sum2=0;

var i;

for(i = num1;i<=num2;i ){

sum2 = sum2 i;

}

alert(sum2);

}

else{

return NaN;

alert('非数字!');

}

}

getsum2(100,0);

</script>

 

<!--调用带参数的方法-->

<script  type ="text/javascript">

function getsum1(num){

getsum2(0,num)

}

getsum1(50);

getsum1(adc); //有问题,这是一个未定义的变量执行到这会报错

getsum1('adc');

</script>

</body>

</html>

3.3 同名方法的覆盖

JS中方法没有重载,不允许有同名方法,如果有多个同名方法,最近写的方法会覆盖掉前面写的,之前写的方法永远都调用不到!(所以自己写的方法不要与系统方法同名,否则系统的方法就调用不到了!)

当然,如果想重写已有的方法,则可以写同名方法。

 

由上可知,对于无参的方法,调用时传入参数,也是正常执行的。

对于有参的方法,传入更多的参数也是可以执行的。

如:

<script  type ="text/javascript">

function getsum(){

sum=0;

var i;

for(i = 0;i<=100;i ){

sum = sum i;

}

alert("这是一个不带参数的方法!")

alert(sum);

}

getsum();

</script>

 

<!—使用Arguments对象处理可变参数方法-->

<script type ="text/javascript">

function multiArgs() {

for(var i = 0;i<arguments.length;i ){

alert(arguments[0] arguments[1]);

}

}

multiArgs(123,true,'haha',new Date());//输出124

multiArgs(123,223,'haha',new Date());//输出346

</script>

3.4 匿名方法

JS中大量使用匿名方法,function关键字之后没有方法名:

匿名方法通常可赋值给一个变量,方便调用。

<script type ="text/javascript">

var fun = function(){

alert("我是一个匿名方法!");

}

fun();

</script>

3.5求素数的和

注:1既不是素数也不是合数,其他的自然数里面,只有素数和合数。

 

<!--求指定范围内所有素数及和-->

<script type ="text/javascript">

function getPrime(num1,num2){

if(typeof(num1)=="number"&&typeof(num2)=="number"&&(num1>=2||num2>=2)){

sum = 0;

//参数处理

if(num1>num2){

temp = num1;

num1 = num2;

num2 = temp;

if(num1<2){

num2=2;

}

}

 

//关键代码

for(var i = num1;i<=num2;i ){

var count = 0;

for(var j=2;j<i;j ){

if(i!=2&&i%j==0){

count ;

}

}

if(count==0){

alert(i);

sum =i;

}

}

return sum;

}

else{

alert('参数有误,必须为数字,且至少有一个数大于2!');

}

}

</script>

 

<!--调用方法-->

<script type="text/javascript">

var number=getPrime(2,100);

alert(number);

         getPrime(-1,1);//错误的调用

</script>

4、javascript面向对象

对象:字符串数组类等

 

4.1类、对象

4.1.1 函数闭包模拟对象

内部原理:Js本身是没有对象的,通过函数闭包(函数中再定义函数)来模拟出来的

function fun() {

this.ff = function() {

alert('123');

};

}

var f = new fun();//通过new fun() 返回一个对象,而不是执行方法体的代码

f.ff();//这里调用了对象的方法

4.1.2 定义类和创建对象

js中写方法(类似于构造方法),在方法中使用this.成员名(){};

new 表示引用对象。

如果没有new,就是直接调用方法。

如果调的方法没有返回值,却赋值给一个变量,就出现undefined错误。

<script type = "text/javascript">

function Person1(){

this.Name = "李四";

this.Age = 20;

this.Sex = "女";

this.func = function(){

alert("我是" this.Name ",我" this.Age "岁," "我是" this.Sex "生。");

}

alert("主方法");

}

Person1();//调用主方法

 

var p= new Person1();//引用对象

alert("大家好,我是" p.Name ",我今年" p.Age "岁了," "我是一个" p.Sex "生。");//李四的信息

p.Name = "张三";

p.Age = 22;

p.Sex = "男";

p.func();//弹出张三的信息

 

</script>

 

4.1.3 带参数的类

通常用参数来初始化实例。如:

<script type = "text/javascript">

function Person(name,age,gender){

this.Name = name;

this.Age = age;

this.Gender = gender;

this.SayHello = function(){

alert("我是" this.Name ",我" this.Age "岁," "我是" this.Sex "生。");

}

return this.SayHello();

}

var per = new Person("李四",21,"女");  //通过传入的参数构造类的实例

per.SayHello();

</script>

4.1.4 嵌套创建对象

<script type = "text/javascript">

function Person(){

this.Name = "王五";

this.Age = 20;

this.Gender = "男";

 

                //通过匿名方法返回一个对象

this.girlfriend = function(){

this.Name = "张桑";

this.Age = 22;

this.Gender = "女";

alert("我是" this.Name ",我" this.Age "岁," "我是" this.Gender "生。");

    };

}

var p = new Person();

alert(p.Name);

alert(p.Age);

alert(p.Gender);

p.girlfriend();

</script>

4.1.5 动态创建类

先创建一个空类,然后给类添加成员。

<script type = "text/javascript">

function Person(){}

var p = new Person();

p.Name = "张三";

p.Age = 22;

p.Gender = "男";

p.SayHello = function(){

alert("大家好,我是" this.Name ",我今年" this.Age "岁了," "我是一个" this.Gender "生。");

};

//索引访问成员

alert(p["Name"]);

alert(p["Age"]);

alert(p["Gender"]);

 

p.SayHello();

</script>

4.2 字符串

字符串的一些方法:

4.2.1 indexOf

 

<script type = "text/javascript">

var str = "abcdefgedgedg";

var ind1 = str.indexOf("e",0);

alert(ind1);

var ind2 = str.indexOf("e",ind1 1);

alert(ind2);

var ind3 = str.indexOf("e",ind2 1);

alert(ind3);

</script>

 

<script type = "text/javascript">

var index =-1;

var res2 ="";

var str2 ="abcdefgedgedg";

do{

index = str2.indexOf("e",index 1);//从index 1开始查找

if(index!=-1){

res2 =" " index;

}

 

}while(index!=-1);

alert(res2);

</script>

4.2.2 split

处理日期格式:

<script type = "text/javascript">

var str3 = "2012-08-15";

var res3 = str3.split("-");//得到数组

alert(res3);

str3 = res3[0] "年" res3[1] "月" res3[2] "日";

alert(str3);

</script>

4.2.3 substring

substring(start, end)

substring 方法用于提取字符串中介于两个指定下标之间的字符。

 

开始和结束的位置,从零开始的索引

参数描述
start  必需。一个非负的整数,规定要提取的子串的第一个字符的位置。
end可选。一个非负的整数,比要提取的子串的最后一个字符的位置多1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

返回值
一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。

 

说明
substring 方法返回的子串包括 start 处的字符,但不包括 end 处的字符。
如果 start 与 end 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。
如果 start 比 end 大,那么该方法在提取子串之前会先交换这两个参数。
如果 start 或 end 为负数,那么它将被替换为 0。

4.2.4 substr

stringObject.substr(start [, length ])

substr 方法用于返回一个从指定位置开始的指定长度的子字符串。

 

参数    描述
start   必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length 可选。在返回的子字符串中应包括的字符个数。
说明

如果start为负数,则start=str.length start。
如果 length 为 0 或负数,将返回一个空字符串。
如果没有指定该参数,则子字符串将延续到stringObject的最后。

4.2.5 repalce

用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

以下示例引自w3school

<script type="text/javascript">

 

var str="Welcome to Microsoft! "

str=str "We are proud to announce that Microsoft has "

str=str "one of the largest Web Developers sites in the world."

 

document.write(str.replace(/Microsoft/g, "W3School"))

 

</script>

页面输出:

Welcome to W3School! We are proud to announce that W3School

has one of the largest Web Developers sites in the world.

4.3 数组

遍历数组方式

for循环

for-in循环,在遍历的时候,将数组的“下标”传到了临时变量中

4.3.1 数字数组

<script type = "text/javascript">

/*创建数组*/

var nums = new Array();

for(var i =1; i<=5;i ){

nums[i-1]=i;

}

alert(nums);

 

/*遍历数组*/

for(var i =0; i<nums.length;i ){

alert(nums[i]);

}

/*for in遍历数组的元素索引,即Key*/

for(var i in nums){

alert(nums[i]);

}

</script>

4.3.2 用数组方式得到"类"的成员

前面介绍类的时候,用到了下标索引的方式获得成员。

<script type = "text/javascript">

function Person() {

this.Name = "张三";

this.Age = 19;

this.Gender = "男";

}

 

var p = new Person();

//i指的是key

for(var i in p) {

alert(p[i]);

}

</script>

4.3.3 键值对数组

实际上使用数组的时候,数组的“下标”不必绝对是数字

可以换成任意数数据类型,即可得到一个键值对了

var kv = new Array();

kv["老大"] = "总经理";

kv["老二"] = "经理";

for(var i in kv) {

alert(i);

}//得到key

 

var kv1 = new Array();

kv1["平民"] = "讲师";

 

var kv = {'头儿':'总经理', '二把手':'经理'};  //json 对象

var dics=[{ "name":'张三',"age":18 },{ "name":'李四',"age":19 }];//json对象组成数组

 

4.3.4 数组的操作

//求一个数组中的最大值

function getMax(narry){

var max = narry[0];

for (var i in narry){

if(max<narry[i]){

max = narry[i];

}

};

alert(max);

}

//数字数组

var nums = [9,3,232,21,654,221,33,21];

getMax(nums);

//字符串数组

var strs = ["djk3","djfs","jfk2","jfks232","2323","83728"];

getMax(strs);

 

//连接字符串数组,返回字符串

var strArr = ["djk3","djfs","jfk2","jfks232","2323","83728"];

var newstr = strArr.join('|');

alert(newstr);

 

//翻转数组

var strs = ["djk3","djfs","jfk2","jfks232","2323","83728"];

var newstr = new Array();

for(var i=0;i<strs.length;i ){

newstr[i] = strs[strs.length-1-i];

}

alert(newstr);

 

//替换变量(扩展方法)

<script type = "text/javascript">

/*为字符串两边加五角星的方法*/

String.prototype.AddWJX = function(){

return '☆' this '☆';

}

var str = "小马哥";

str = str.AddWJX();

alert(str);

</script>

 

说明:扩展方法

->一个类写好了,但是以前提供的方法不够完成现在的任务

->又不希望修改这个类,但有希望该类的对象具备新的方法

 

-> js中可以使用prototype属性来添加扩展方法

语法: 类名.prototype.方法名 = 方法

4.3.5 数组元素的添加和删除

1) unshift()将参数作为数组新的元素添加到原数组开头,并返回数组的长度

var a = [1,2,3,4,5];

var b = a.unshift(-2,-1); //a:[-2,-1,1,2,3,4,5]   b:7

注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。

2) shift()删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined

var a = [1,2,3,4,5];

var b = a.shift(); //a:[2,3,4,5]   b:1

3) push(): 将参数添加到原数组末尾,并返回数组的长度

var a = [1,2,3,4,5];

var b = a.push(6,7); //a:[1,2,3,4,5,6,7]   b:7

4) pop()删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined

var a = [1,2,3,4,5];

var b = a.pop(); //a:[1,2,3,4]   b:5 //不用返回的话直接调用就可以了

5) slice(start,end):返回一个新的数组,包含从 start 到 end (不包括)的元素

var arr2 = new Array();

arr2[0] = "aaa";

arr2[1] = "bbb";

arr2[2] = "ccc";

arr2 = arr2.slice(0,1);

alert(arr2.length);//1

alert(arr2[0]);//aaa

6) concat()返回一个新数组,是将参数添加到原数组中构成

var a = [1,2,3,4,5];

var b = a.concat(6,7); //a:[1,2,3,4,5]   b:[1,2,3,4,5,6,7]

7) splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,...

var a = [1,2,3,4,5];

var b = a.splice(2,2,7,8,9); //a:[1,2,7,8,9,5]   b:[3,4]

8) reverse:将数组反序

var a = [1,2,3,4,5];

var b = a.reverse(); //a:[5,4,3,2,1]   b:[5,4,3,2,1]

9) sort(orderfunction):按指定的参数对数组进行排序

var a = [1,2,3,4,5];

var b = a.sort(); //a:[1,2,3,4,5]   b:[1,2,3,4,5]

10) join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符

var a = [1,2,3,4,5];

var b = a.join("|"); //a:[1,2,3,4,5]   b:"1|2|3|4|5"

join是一种把数组转换成字符串的好方法

 

利用数组模拟javaStringBuffer处理字符串的方法:

 

/**

* 字符串处理函数

*/

function StringBuffer()

{

var arr = new Array;

this.append = function(str)

{

    arr[arr.length] = str;

};

this.toString = function()

{

    return arr.join(""); //把append进来的数组ping成一个字符串

};

}

 

/**

* 把数组转换成特定符号分割的字符串

*/

function arrayToString(arr,separator)

{

if(!separator) separator = "";//separator为null则默认为空

    return arr.join(separator);

}

4.3.6 封装数组移除元素的函数

 /*对原数组操作,移除元素*/

         Array.prototype.remove = function (item) {

            var n = 0;

            for (var i = 0; i < this.length; i ) {

                if (this[i] != item) {

                    this[n ] = this[i];

                }

            }

            this.length -= 1;

        }  

 

        /*移除指定元素,返回新的数组*/

        Array.prototype.remove = function(obj) {

          var a= [];

          for (var i=0; i<this.length; i ) {

            if (this[i] != obj) {

                a.push(this[i]);

            }

          }

          return a;

        }

 

4.4 键值对对象与json对象

4.4.1 键值对对象的定义和赋值

这样定义是合法的 var obj = {};  或者var obj = {key: ""};

 

可以这样使用

var obj = {};//先声明obj

function setObj(key){

            var pass=$('input[name="' key '"]').val();

            obj['key'] = pass;

return;

}

setObj("obj1");

setObj("obj2");

setObj("obj3");

在方法内部赋值,给obj追加属性。

4.4.2 Json对象介绍

var kv = {'头儿':'总经理', '二把手':'经理'};  //json 对象

4.4.3 Json对象数组

var dics=[{ "name":'张三',"age":18 },{ "name":'李四',"age":19 }];//json对象组成数组

4.4.4 Json对象的转换

从字符串转换为Json对象。

5、javascript类型转换

<body>

<script  type ="text/javascript">

var num;

num = "1" 2 3;//自动转换为字符串

alert(num);

</script>

 

<script  type ="text/javascript">

var num1 = parseInt('0101',2);

alert(num1);

</script>

</body>

5.1转换函数parseInt、parseFloat

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。

5.1.1 parseInt()

在判断字符串是否是数字值前,parseInt()和parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时parseInt()将把该字符之前的字符串转换成数字。

 

例如,如果要把字符串 "1234blue "转换成整数,那么parseInt()将返回1234,因为当它检测到字符b时,就会停止检测过程。字符串中包含的数字字面量会被正确转换为数字,因此字符串 "0xA "会被正确转换为数字10。不过,字符串 "22.5 "将被转换成22,因为对于整数来说,小数点是无效字符。一些示例如下:

parseInt("1234blue");   //returns   1234

parseInt("0xA");   //returns   10

parseInt("22.5");   //returns   22

parseInt("blue");   //returns   NaN

 

parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的,所以要解析十六进制的值,需如下调用parseInt()方法:

parseInt("AF",   16);   //returns   175

parseInt("10",   2);   //returns   2

parseInt("10",   8);   //returns   8

parseInt("10",   10);   //returns   10

如果十进制数包含前导0,那么最好采用基数10,这样才不会意外地得到八进制的值。例如:

parseInt("010");   //returns   8

parseInt("010",   8);   //returns   8

parseInt("010",   10);   //returns   10

5.1.2 parseFloat()

parseFloat()方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字符之前的字符串转换成数字。不过,对于这个方法来说,第一个出现的小数点是有效字符。如果有两个小数点,第二个小数点将被看作无效的,parseFloat()方法会把这个小数点之前的字符串转换成数字。这意味着字符串 "22.34.5 "将被解析成22.34。

parseFloat()没有基模式,字符串必须以十进制形式表示浮点数,而不能用八进制形式或十六进制形式。该方法会忽略前导0,所以八进制数0105将被解析为105。对于十六进制数0xA,该方法将返回NaN,因为在浮点数中,x不是有效字符。下面是使用parseFloat()方法的示例:

parseFloat("1234blue");   //returns   1234.0

parseFloat("22.5");   //returns   22.5

parseFloat("22.34.5");   //returns   22.34

parseFloat("0105");   //returns   105

parseFloat("0xA");   //returns   NaN

parseFloat("blue");   //returns   NaN

 

5.2强制类型转换

可使用强制类型转换(type casting)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类型的。

ECMAScript中可用的3种强制类型转换如下:

Boolean(value)——把给定的值转换成Boolean型;

Number(value)——把给定的值转换成数字(可以是整数或浮点数);

String(value)——把给定的值转换成字符串。

5.2.1 Boolean型的强制类型转换

用这三个函数之一转换值,将创建一个新值,存放由原始值直接转换成的值。这会造成意想不到的后果。

当要转换的值是至少有一个字符的字符串、非0数字或对象时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null,它将返回false。下面的代码段测试Boolean型的强制类型转换

Boolean("hi");   //true   –   non-empty   string

Boolean(100);   //true   –   non-zero   number

Boolean(new Object());   //true   –   object

 

Boolean("");   //false   –   empty   string

Boolean(null);   //false   --   null

Boolean(0);   //false   --   zero

5.2.2 Number型的强制类型转换

Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似。

 

不同之处:

1.只是它转换的是整个值,而不是部分值。

用Number()进行强制类型转换, "4.5.6 "将返回NaN,因为整个字符串值不能转换成数字。如果字符串值能被完整地转换,Number()将判断是调用parseInt()方法还是调用 parseFloat()方法。

2.Number()能处理bool类型值和null值,并转换成数字。

 

下表说明了对不同的值调用Number()方法会发生的情况:

用 法结果

Number(undefined)   NaN

Number( "5.6.7 ")   NaN

Number(new   Object())   NaN

 

Number(null)   0

Number(false)   0

Number(true)   1

Number( "5.5 ")   5.5

Number( "56 ")   56

Number(100)   100  

5.2.3 String()型的强制类型转换

String()是最简单的,因为它可把任何值转换成字符串。要执行这种强制类型转换,只需要调用作为参数传递进来的值的 toString()方法,即把1转换成   "1 ",把true转换成 "true ",把false转换成 "false ",依此类推。

强制转换成字符串和调用toString()方法的唯一不同之处在于,对null或undefined值强制类型转换可以生成字符串而不引发错误

var s1 = String(null);   //"null"

var oNull = null;

var s2= oNull.toString();   // causes   an   error

5.3js变量弱类型转换

<script>

var str= '012.345 ';

var x = str-0; //转换成float  12.345

x = x*1;//还是float12.345

</script>

利用js的弱类型的特点,进行算术运算,实现字符串到数字的类型转换,不推荐这个方法,可读性不好。

6javascript中URL编码

6.1 javascript的编码解码

6.1.1 escape和unescape

对应C#:HttpUtility.UrlEncode HttpUtility.UrlDecode

 

escape 不编码字符有69个:*, ,-,.,/,@,_,0-9,a-z,A-Z

 

js使用数据时可以使用escape例如:搜藏中history纪录。

0-255以外的unicode值进行编码时输出%u****格式,其它情况下escape,encodeURI,encodeURIComponent编码结果相同。

解码使用:unescape

6.1.2 encodeURI 和decodeURI()

对应C#:[HttpContext.Current.]Server.UrlDecode[HttpContext.Current.]Server.UrlEncode

encodeURI不编码字符有82个:!,#,$,&,',(,),*, ,,,-,.,/:,;,=,?@,_,~,0-9,a-z,A-Z

 

进行url跳转时可以整体使用encodeURI

例如:Location.href=encodeURI("http://cang.baidu.com/do/s?word=百度&ct=21");

6.1.3 encodeURIComponent 和decodeURIComponent()

对应C#:[HttpContext.Current.]Server.UrlDecode[HttpContext.Current.]Server.UrlEncode

 

encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z,即/,?,&,=这些字符也会被编码。

传递参数时使用encodeURIComponent,这样组合的url才不会被#等特殊字符截断。

如:<script language="javascript">document.write('<a href="http://passport.baidu.com/?logout&aid=7& u=' encodeURIComponent("http://cang.baidu.com/bruce42") '">退出</a& gt;');</script>

6.1.4 解码格式问题处理

URL所使用的字符编码都不同, URL可能是gb2312,也可能是utf-8,可采用一种进行解码再编码,与解码前的比较,如果不一致,则换另外一种格式解码。

Encoding gb2312=Encoding.GetEncoding("gb2312");  
Encoding utf8=Encoding.UTF8;  

string key=HttpUtility.UrlDecode(strUrl, utf8);

string encode=HttpUtility.UrlEncode(key, utf8).ToLower();

if (strUrl!= encode) 
    key = HttpUtility.UrlDecode(strUrl, gb2312); 

6.2 URL特殊符号及编码(十六进制值)

1. URL 中 号表示空格   号本身URL编码为

2.空格 URL中的空格可以用 号URL编码为

3./ 分隔目录和子目录URL编码 /

4.? 分隔实际的 URL 和参数  ?号本身URL编码为 ?

5.% 指定特殊字符URL编码为%

6.# 表示书签 URL编码为#

7.& URL 中指定的参数间的分隔符URL编码&

8.= URL 中指定参数的值URL编码=

6.3 Url编码应用:url参数中包含另一个url

6.3.1 传递的url的处理

将待传递url各参数值进行Base64编码,并将特殊字符( 号、/号等)做了Url编码处理,以便服务端正确得到信息。该url赋值给变量strUrl,并将参数连接附&替换成“|”,防止被提前解析。

strUrl = "?ae=Item&a=Open&t=IPM.Note&id=RgAAAABspvLmueUyQ7 PPY6PwoMQBwBDx5RwCsGyS7J5NXIhCwMVAAAAAAJ3AADjLWdmowHjQpW0JvJ/VNRDAAABXQyKAAAJ&exvsurl=1";//客户端原始的

strUrl=strUrl.Replace("&", "|");

6.3.2 主UrlstrUrl作为单独的一个参数传递

string url="http://localhost/hander.aspx";

url=“url?par=" param "&strUrl=" strUrl;

然后再需要的地方向hander.aspx页面发起请求。

6.3.3服务端页面解析处理strUrl

1) hander.aspx页面先获取到strUrl

string strUrl= Request.QueryString["strUrl"];

由于此处会对得到的strUrl进行url解码,因此得到的特殊字符( 号、/号等)已经被Url解码,不再是十六进制的编码格式了,如下:

//得到strUrl= "?ae=Item&a=Open&t=IPM.Note&id=RgAAAABspvLmueUyQ7 PPY6PwoMQBwBDx5RwCsGyS7J5NXIhCwMVAAAAAAJ3AADjLWdmowHjQpW0JvJ/VNRDAAABXQyKAAAJ&exvsurl=1";

2) 使用strUl前进行转换和编码处理

(1)参数连接符&的还原

 strqueryString = Request.QueryString["readstring"].ToString().Replace("|", "&");

(2)URL中参数值的编码处理:

由于得到的strUrl本身是要作为url来使用的,其中的 、/等符号还不能直接用的(会被当作空格等),应该对其各参数值进行url编码。

strqueryString = Server.UrlEncode(strqueryString);//先整体编码

strqueryString = strqueryString.Replace("?", "?").Replace("=", "=").Replace("&", "&");//将? = &不应该编码的字符替换回来。

6.4Js C#编码解码实例

发送参数Js编码:

    var strXML = $('#dataXML').val().trim();

var EncodedstrXMl = encodeURIComponent(strXML);

//Ajax post发送

接收参数C#解码:

 string EncodedStrXML = context.Request.Form["dataXML"];

 string strXML = HttpUtility.UrlDecode(EncodedStrXML);

 Asp.Net后台页面解码:

 string strXML =Server.UrlEncode(EncodedStrXML);

 

说明

编码:Server.UrlEncode(string)  
解码:Server.UrlDecode(string)  后两种客户端编码都可以用这个方法在后台解码。

1、HttpUtility.UrlEncode,HttpUtility.UrlDecode是静态方法,而Server.UrlEncode,Server.UrlDecode是实例方法。
2、Server是HttpServerUtility类的实例,是System.Web.UI.Page的属性。
3、HttpUtility.UrlEncode编码的字符串和Server.UrlEncode进行编码的字符串对象不一样

其中Server.UrlEncode()则以默认的即Default编码对URL进行编码。而HttpUtility.UrlEncode()默认是以UTF8对URL进行编码

 

7javascript实现Unicode转码

str.replace(/[^\u0000-\u00FF]/g,function ($0) { return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;")})

示例:将文本框的值转码后存入隐藏域中:

$("#<%=hidKeywords.ClientID%>").val($("#<%=MessageTxt.ClientID%>").val().replace(/[^\u0000-\u00FF]/g, function ($0) { return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;") }));

8、base64 编码及“ ”号处理

URL 中的参数应使用 url 编码规则,即把参数字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号( )。

对于带有中文的参数来说,这种编码会使编码后的字符串变得很长。如果希望有短一点的方式对参数编码,可以采用 base64 编码方式对字符串进行编码。

但是 base64 编码方式不能处理 JavaScript 中的中文,因为 JavaScript 中的中文都是以 UTF-16 方式保存的。而 base64 只能处理单字节字符,所以不能直接用 base64 对带有中文的 JavaScript 字符串进行编码。可以通过 utf.js 这个程序中提供的 utf16to8 来将 UTF-16 编码的中文先转化为 UTF-8 方式,然后再进行 base64 编码。这样编码后的字符串,在传递到服务器端后可以直接通过 base64_decode 解码成 UTF-8 的中文字符串。

还有个问题需要注意。base64 编码中使用了加号( ),而 在 URL 传递时会被当成空格,因此必须要将 base64 编码后的字符串中的加号替换成 才能当作 URL 参数进行传递。否则在服务器端解码后就会出错。

9、javascript的null、undefined与NaN  

9.1判断undefined:使用typeof()

<span style="font-size: small;">var tmp = undefined;  

if (typeof(tmp) == "undefined"){  

alert("undefined");  

}

</span>

说明:typeof 返回的是字符串,有六种可能:"number"、"string"、"boolean"、"object"、"function"、"undefined"

9.2判断null:排除0和undefined(及null),再根据bool值判断

<span style="font-size: small;">var tmp = null;  

if (!tmp &&typeof(tmp)!="undefined"&&tmp!=0){  

   alert("null");  

}

</span>

9.3判断NaN:使用isNaN()

<span style="font-size: small;">var tmp = 0/0;  

if(isNaN(tmp)){  

    alert("NaN");  

}

</span>

说明:如果把 NaN 与任何值(包括其自身)相比得到的结果均是 false,所以要判断某个值是否是 NaN,不能使用 == 或 === 运算符。

 

提示:isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果,以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误,比如用 0 作除数的情况。

9.4 判断undefined和null:判断其一(null==undefined)

<span style="font-size: small;">var tmp = undefined;  

if (tmp== undefined)  

{  

    alert("null or undefined");  

}

</span>

<span style="font-size: small;">var tmp = undefined;  

if (tmp== null)  

{  

    alert("null or undefined");  

}

</span>

 

说明:null==undefined 为

9.5判断undefined、null与NaN:bool值判断(都为false)

<span style="font-size: small;">var tmp = null;  

if (!tmp)  

{

    alert("null or undefined or NaN");  

}

</span>

提示:一般不那么区分就使用这个足够。