码迷,mamicode.com
首页 > 编程语言 > 详细

javascript学习笔记

时间:2017-05-08 23:12:56      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:移除   html标签   逻辑运算符   var   获取   logs   start   join   成员   

Javascript学习笔记

是一门程序设计语言

基于对象和事件驱动语言(点击之类的),用于客户端,不同于jsp是用在服务端的。

特点:

1,交互性

2,安全性(不允许直接访问硬盘)

3,跨平台(只要能解释JS的浏览器就可以执行,和平台无关)

Javascript和Java之间的关系

Java和Javascript就像雷锋和雷峰塔的关系一样

1,Javascript基于对象,Java面向对象

2,Javascript解释执行,Java要先编译在执行。

3,Javascript弱类型,Java强类型。

 

Javascript和html结合方式

1,将javascript代码封装到<script>标签中

1 <script type="text/javascript">
2       alert("Hello Javascript");
3 </script>

 

2,将javascript代码封装到js文件中,并通过<script>标签中的src属性进行导入,在这个js文件中的函数,当前页面的其他函数都可以使用

注意:通过<script>中的src属性指定导入js之后,当前标签内部的js代码将不会执行,但是后续标签内部的代码不受影响。

1 <script type="text/javascript" src="demo.js"></script>//通常用来导入工具包

Javascript语法

1,关键字

2,标识符

3,注释

4,变量:标记一片内存空间

5,运算符

6,语句

7,函数

8,对象

 

变量

全局变量

在<script type="text/javascript"></script>标签中定义的变量,在该页面中都是有效的

<script type="text/javascript">  
  for(var x = 0 ;x<3;x++)
  {
    document.write("x="+x);
  }
  document.write("x="+x);//此时作为x仍然可以输出,是一个在该页面全局有效的全局变量

</script>

 

 局部变量是在函数内部定义的,只在函数中有效。

运算符

 1 <script type="text/javascript">
 2     //算术运算符
 3     var  x = 4235;//弱类型
 4     alert(x/1000*1000);//输出为4235,并不是4000
 5     alert("12"+1);//121
 6     alert("12"-1);//11
 7     alert(true+1);//2   js中false就是0或者null,非0非null就是true,默认用1表示。
 8     //逻辑运算符 && ||
 9     //位运算符 & | >><< >>>按位运算
10     var c = 6;
11     alert(c&3);//2
12     alert(5^3^3);//5 异或同一个数,等于本身
13     alert(c>>1);//3  右移1位 除以2的1次方
14     alert(c<<2);//24 左移2位 乘以2的平方
15     //三元运算符
16 </script>

一些细节:

a.undefined:未定义,就是一个常量

var x;//定义一个变量,但是不对其进行赋值的话,如果下面使用到该变量,就会出现undefined,说明x的值就是undefined,如果变量x未定义就直接使用的话,会报未定义错误
    //一个是值未定义,一个是变量未定义

 

b.获取变量类型:

1 <script type="text/javascript">
2     typeof("abc");//string 为什么是小写
3     typeof(9);//string
4     typeof(true);//boolean
5     typeof(2.5);//number
6     typeof(78);//number
7 </script>

语句

 1 <script type="text/javascript">
 2     //顺序结构
 3     //if语句
 4     var x = 3;
 5     if(4 == x)//这样写可以预防错误
 6     {
 7         alert("no");
 8     }else
 9     {
10         alert("yes")
11     }
12     //switch语句
13     var x = "abc";
14     switch(x)
    {
15 case "kk": 16 alert("a"); 17 break; 18 case "abc": 19 alert("b"); 20 break; 21 default: 22 alert("c"); 23 break;//可省略
    }
24 //循环结构 25 //while语句 26 var x = 3; 27 while(x<3){ 28 alert("x="+x); 29 //将数据直接写到当前页面中 如果输出的字符串是html标签,此时浏览器就可以进行解析 30 document.write("x="+x+"<br/>"); 31 x++; 32 } 33 //for语句 34 for(var x = 0;x<3;x++){ 35 document.write("x="+x); 36 } 37 //break:跳出选择结构,跳出循环结构 38 //continue:结束本次循环,执行下次循环 39 //带标号的循环。直接break w所表示的循环 40 w:for(var x = 0;x<3;x++){ 41 for(var y = 0;y<4;y++){ 42 document.write("x="+x); 43 break w;//跳出w表示的循环 continue w; 跳出w的当前循环,并进行下一次循环 44 } 45 } 46 47 </script>

数组

1,数组长度是可变的

2,数组的元素类型是任意的

建议在使用数组时使用同一类型的数据,操作方便

<script type="text/javascript">
      //定义方式1    
    var arr = [];
    var arr1 = [1,2,3,5];
    alert(typeof(arr));
    alert("len="+arr.length);
    //定义方式2
    var arr = new Array();//与第一种一样
    var arr1 = new Array(5);//定义数组长度为5
    var arr2 = new Array(4,5,6);//定义一个数组,元素是4,5,6
    //遍历
    for(var x = 0;x<arr.length;x++){
        document.write("arr[x]")
    }
</script>

函数

定义函数的格式

通过关键字来定义

function 函数名(参数列表){}

细节问题

1,只要使用了函数名称,就是对函数的调用

2,函数中有一个数组在对传入的参数进行存储,数组就是arguments,遍历该数组就可以拿到所有的传入参数

3,函数名就是函数对象的引用变量,如果直接把函数对象用字符串输出的话,那输出的结果就是函数的代码,如果把函数名赋值给另一个变量的话,那么就会有两个引用变量指向同一个函数对象。

 

 1 <script type="text/javascript">
 2     //定义一个函数
 3     function demo()
 4     {
 5         alert("demo run");
 6         return;
 7     }
 8     demo();//函数调用
 9     //定义加法
10     function add(x,y)
11     {
12         return x+y;
13     }
14     var sum = add(4,5);
15     alert("sum="+sum);
16     //相关细节问题
17     function show(x,y)
18     {
19         alert("len="+arguments.length)
20         alert("x="+x+"..y="+y);
21     }
22     show(4,5,6,7,8);//调用时,传入5个实参,而函数只有两个形参,所以只有前两个有作用,但是所有的参数都会传入到函数中,存放在arguments参数中
23 
24     function getSum()//函数名就是函数对象的引用变量,如果直接把函数对象用字符串输出的话,那输出的结果就是函数的代码
25     {        //如果把函数名赋值给另一个变量的话,那么就会有两个引用变量指向同一个函数对象
26         return 100;
27     }
28     var sum1 = getSum();
29     alert("sum1="+sum1);
30 function show1() 31 { 32 alert("show1 run..."); 33 } 34 alert(show1());//这个语句会先运行show1(),所以会先弹窗 show1 run... 然后再显示 show1 这个函数的运行结果 由于show1没有返回值,所以会再输出undefined 35 36 alert(show1);//show1 是一个引用变量,指向了show1函数对象,这个语句会将 show1的函数代码弹出 37 38 39 </script>

动态函数

使用较少

使用的是js中的一个内置对象Function

Function中的参数全是字符串,可以通过外部赋值来改变函数的形参列表和具体函数功能

1 <script type="text/javascript">
2     var add = new Function("x,y","var sum; sum = x+y; return sum;")
3     var he = add(4,8);
4     alert("he="+he);
5 </script>

匿名函数

函数的简写形式

<script type="text/javascript">
    var add3 = function()
    {
        return a+b;    
    }
    alert(add3(4,5));

</script>

 

 

对象

java中强调一类对象,js中强调某个对象(将js中的对象理解为java中的类?)

A,Object对象的方法

不同对象有不同的toString方法

a,数组的toString()方法是将数组输出,用逗号隔开

b,函数对象的toSting()方法是将函数代码输出

//Object对象方法
//toString方法
function show(){
  alert("show run...");
}
alert(show.toString());//alert(show)默认也是调用show的toString()方法来输出

var arr = [1,2,3,4];
arr.toString();

 

valueof()方法和toString()方法类似

B,String对象

var str1 = new String("abc");//在java中,String str = "abc";  js中所有数据类型都可以通过var来定义
var str2 = "abcd";
//string的length属性
document.write(str2.length);//字符串长度
//给字符串加上一些html标签的方法
document.write(str2.bold);//在字符串两端加上<B></B>,如果直接输出到html页面中,就会被解析为加粗
alert(str2.bold);//弹窗显示内容为<B>abcd</B>
document.write(str2.fontcolor("red"));//设置字体颜色
document.write(str2.link("http://www.baidu.com"));//将字符串设置为超链接  
document.write(str2.sub(1,3));//子串,1是头,3是长度
document.write(str2.substring(1,3))//子串,包含头,不包含尾 

 

 除了使用string自带的方法,还可以自定义字符串操作方法

a,自定义一个外部函数,用来去除字符串两端的空格

//自定义去除字符串两端空格的方法
function
mytrim(str) {   //定义两个变量,一个记录开始位置,一个记录结束位置,   //对开始位置的字符串进行判断,如果是空格,就递增,知道不是空格为止,结束位置一样   //必须保证开始<=结束,这样才可以进行截取。   var start,end;   start = 0;   end = str.length-1;   while(start <= end && str.charAt(start)==‘ ‘){     start++;   }   while(start <= end && str.charAt(end)==‘ ‘){     end--;   }   return str.substring(start,end+1); } var str = " abcde "; alert(trim(str));

b,将该函数定义为string对象的内部函数

使用字符串的原型来完成

原型就是该对象的一个描述,该描述中如果添加了一个新功能,那么该对象也会添加一个功能,类似于java中在类中添加了一个成员方法,该类对象也就有了一个该方法, 用prototype就可以获得该原型,通过prototype就可以对对象的功能进行扩展。

给string的原型添加一个属性,那么所有的字符串也就具备了这一属性,这个属性可以是成员变量,可以是成员函数

1,加成员变量

String.prototype.abc = 123;//给String的原型添加一个名为abc的成员变量,值为123,那么所有的字符串都会具有一个abc变量,可以直接调用输出

2,加成员函数

String.prototype.trim = mytrim;//给String的原型添加一个名为trim的成员函数,两个函数名不一定非要相同,mytrim就是一个已经定义好的函数

或者使用匿名函数的方式

String.prototype.trim = function(){

  //这样的话就没有形参列表了,这里用this来代替str
  var start,end
  start = 0;
  end = this.length-1;
  while(start <= end && this.charAt(start)==‘ ‘){
    start++;
  }
  while(start <= end && this.charAt(end)==‘ ‘){
    end--;
  }
  return this.substring(start,end+1);
}

C,Array对象

var arr = ["abc","cba","nba","aaa","bbb"];
var arr1 = ["qqq","xiaomi",20];
var new Arr = arr.concat("mm",arr2);//在arr后面加上一个mm元素,arr2作为后续元素加上来
arr.join();//以指定分隔符来分隔数组,默认为逗号分隔
arr.pop();//移除最后一个元素,并返回剩下的数组
arr.push();//添加一个元素并返回新数组长度,如果添加的元素为一个数组,就会形成一个二维数组
arr.shift();//删除并返回第一个元素
arr.unshift();//指定数组插入到开始位置并返回该数组
arr.sort();//字符串怎么排序?字典顺序排序
arr.splice(1,3,12,43,67,"xixi","haha");//从1开始删,删三个,并把后面所有的都加进去


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

待续。。。。。

javascript学习笔记

标签:移除   html标签   逻辑运算符   var   获取   logs   start   join   成员   

原文地址:http://www.cnblogs.com/mxck/p/6814699.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!