美文网首页
JavsScript前端入门

JavsScript前端入门

作者: 洗阳光 | 来源:发表于2015-08-12 19:32 被阅读451次

    介绍

    JavaScript是一种在浏览器中运行的语言,主要用于实现浏览器段的动作,如用户交互,数据处理。在HTML中实现JS有两种办法,一种是通过script标签,另外一种是事件响应代码。
    script标签的方式:

      <script>
     document.write("hello,world") //向世界宣布我要学习这门语言啦!
      </script>
    

    事件响应代码:

    <html>
     <body onLoad="alert('hi')">//注意单引号和双引号!
    </body>
    </html>
    

    变量

    • 变量用于保存数据
    • 通过var命名
    • 命名时避免关键字,可出现英文字母、数字、下划线、美元符号(什么鬼),其中第一个字符必须是字母、下划线或者美元符号
    • 驼峰格式命名法,下划线命名法

    计算操作符

    • +:连接字符串,数值相加
    • %:去除法结果里的余数(取模) //可以用于判断一个数的奇偶8
    • ++:自增
    • ==:相等
    • !=:不相等
    • &&;与
    • ||:或
    • !:非

    判断

    var age = 20;
     if(age > 18) {
     alert(""成年啦!);
     }
      alert("好啦好啦,知道啦");
     document.write("你的年龄是" + age);
    
    • 条件判断:if -else
    • 嵌套判断:if {else if{if()}}else
    • 多路分支:
    switch {  case;:
    case; :
     case: break;
     default: break;}
    
    • 条件运算符:<exp>?<v1>:<v2> //满足exp吗?满足就执行v1,否则v2

    循环

    • while语句
    //求最大公约数
     var u = 42;
     var v = 21;
     var temp= v;
     while(v != 0)
     { teml = u % v;
     u = v;
     v = temp; 
     }
     alert("最大公约数是"+u);
    
    • do- while 循环
    // reverse number
     var number = 23871 ;
     var reverse = 0;
     do
     {
     var lastDigit = number % 10; //取最右边一位
     reverse = (reverse * 10) + lastDigit;
     number = Math.floor(number / 10); //如果没有取整的话会导致浮点数运算错误
     }while(number > 0)
     alert("That number reversed is" + reverse);
    
    • for循环
    //找零钱
     var amt = 74; 
     for (var one = 0; one < amt; one++) 
      for (var five = 0; five < amt/5; five++) 
      for (var ten = 0; ten < amt/10; ten++) 
      for (var twenty = 0; twenty < amt/20; twenty++) 
      if (one+five*5+ten*10+twenty*20 == amt) document.write(one+"张1元"+five+"张5元"+ten+"张10元"+twenty+"张20元等于"+amt+" ");
    
    • 循环控制
    • berak, continue

    函数

    • 函数就是一段代码,我们给它起个名字,放起来,以后就可以拿来直接使用
    • JavaScript有很多内置函数,能帮助我们实现很多有用的功能
    • function fun_name(){}
    //求最大公约数
     function gcd ( u , v ) {
     var a = u;
     var b = v;
     var temp = v;
     while (v != 0){
     temp = u%v;
     u = v;
     v = temp;
     }
     document.write (a+"和"+b"的最大公约数是"+n"</br>");
     }
     gcd(42,24)
    
    // 有返回值的函数
     function max (a,b) {a>b?a:b}
    
    • 模块化:写程序时,尽量分解成多个小函数,写函数时尽量基于已有函数
    • 注意函数变量的作用域:函数内部用var申明的为局部变量,否则为全局变量

    数组

    • 当你需要放一些数据,特别是每个数据将通过一个对应的索引数字来访问时,你需要数组
    • 创建数组的四种方式
    var a = new Array ();
    var b = new Arrat(size); 
    var c = new Arrat (d1,d2,...,dn);
    var d = [d1,d2,...,dn];
    
    • 问数组: [] 运算符访问数组中的一个单元,索引从0开始,a[x]=n直接创建了数组中的一个单元x,并且赋值n
    • 数组长度:a.length给出数组a的长度,是其中最大的下表+1,其中.length可追加值,从而有利于写出可扩展性代码,例如 colors[color.length]="black";
    • 转换数组为字符串:
    • tostring(),valueof(),join(",")
    • 堆栈操作
    var colors = new Array ();
     var count = colors.push("red" , "green");
     alert(count);
     count = colors.push "black");
     alert(count);
     var item = colors.pop();
     alert(item);
     alert(colors.length);
    
    • 队列操作
    ...
     var item = = colors.shift();
     alert(item);
     alert(colors.length);
    
    • 排序操作
      • sort()//排序
      • .reverse()//倒转排序
    • 数组操作
      • 连接:colors2 = colors.concat("yellow",["black","brown"]);
      • 截取:colors3 = colors.slice(1,4);//从1取到3
      • splice(开始位置,删除个数,插入元素...)
      • 删除:splice(0,2);
      • 插入:splice(2,0,"red","green")
      • 替换:splice(2,1,"red","green")

    对象

    • 对象是JavaScript的一种复合数据类型,它可以把多个数据集中在一个变量中,并且给其中的每个数据起名字(或者属性集合)
    • JavaScript并不像其他OOP语言那样有类的概念,不是先设计类再制造对象
    • 创建对象
     var o = new Object();
     var circle = {x;,y:,radius:2);
    
    • 访问对象属性:.运算符
     var book = new Object();
     book.title = "HTML5秘籍";
     book.translator = "李松峰";
     book.chapter1 = new Object();
     book.chapter1.title = "HTML5简介"; //动态添加属性
     delete book.chapter1; //删除对象属性
     book.chapter1 = null;
    
    • 遍历所有属性
      • for(var x in o) //将o对象作为x
      • alert(x);/属性名字
      • alert(o[x])//值(访问数组的属性名字包括在方括号里)
    • 构造方法
      • 不直接制造属性
      • 没有return
      • 通过this来定义成员
    function Rect (w.h){
     this.width = w;
     this.height = h;
     this.area = function(){
     return this.width*this.height;
     }
     }
     var r = new Rect(5,10);
     alert (r,area());
    
    • 原型对象
      对象的prototype属性指定了它的原型对象,可以用.运算符直接读出它的原型对象

    相关文章

      网友评论

          本文标题:JavsScript前端入门

          本文链接:https://www.haomeiwen.com/subject/qsgiqttx.html