• Javascript学习总结


    Javascript基础

    简介

    什么是Javascript?

      JS是网景公司开发的一种基于客户端(client-side,区别于服务器端server-side)浏览器,事件驱动式的网页脚本语言。其作用是:用于交互式操作、表单验证、网页特效、Web游戏、服务器脚本开发等。

    Javascript创建方式

      JS有两种创建方式,分为外部与内部,且两种方式都可置于body或head标签内。在实际运用中常置于body底部,因为HTML代码从上到下执行,先加载CSS可避免html出现无样式状态;减少浏览器打开时间,避免因为加载JS代码块阻塞网页呈现。

    1.外部

        <script type="text/javascript" src="myScript.js"></script>
    

    2.内部

    • Javascript:前缀
    • 在script标签中加入JS文件,格式如下:
        <script type="text/javascript">
        JS文件
        </script>
    

    语法

    变量和数据类型

    变量:JS是弱类型脚本语言,使用变量前,可以无需定义,直接使用。

    A.定义方式

    1. 隐式定义:直接给变量赋值
    2. 显式定义:使用var关键字定义变量

    B.变量声明规则

    1. 以字母开头,其余字母可以是下划线_,美元$,任意字母与数字
    2. 以美元$,和下划线_开头合法,但不常用
    3. 区别大小写

    数据类型:JS是弱类型脚本语言,声明变量时无需指定变量的数据类型。JS是解释时动态决定的,数据保存在内存中有数据类型。

    A.常用数据类型

    1. 数值(number)类型:整数和浮点数
    2. 布尔(boolean)类型:true或false
    3. 字符串(string)类型:用“”或‘’括起来
    4. 未定义(undefined)类型:专门用来确定一个已经创建但无初值的变量
    5. 空(null)类型:表明某个变量的值为空
    6. 对象(object)类型:JS中对象,数组等
        数组 var a=[];
             var a=new Array();//不推荐使用
    

    B.数据类型转换

    1. 数值转换成字符串,用“+”或tostring()方法
    2. 字符串转换成整型,parseInt()
    3. 字符串转换成浮点型,parseFloat()

    C.字符串处理

    charAt() 获取字符串特定索引处字符
    toUpperCase() 将字符串的所有字符转换成大写字母,相反的转换成小写为toLowerCase()
    indexOf() 返回字符串中特定字符串第一次出现位置,相反的最后一次为lastindexOf()
    subString() 返回字符串某个字串,不支持负数参数,格式为[ )
    slice() 返回字符串某个字串,支持负数参数,当从右往左,-1,-2,...
    concat() 用于将多个字符串拼加成一个字符串
    repalce() 替换某个字符串中的子串
    split() 用于将一个字符串分割成多个字符串,可指定分隔符,返回数组
    match() 使用正则表达式搜索目标子串,返回目标字符串,不匹配返回null
    search() 使用正则表达式搜索目标子串,返回目标字符串,不匹配返回-1

    判断两字符串是否相等用==即可,无须用equals()方法

    D.正则表达式

    是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符以及这些特定字符的组合,组成一个规则字符串,这个规则字符串用来表达对字符串的一种过滤逻辑。

    目的:匹配字符串并获取特定部分。

    1.创建正则表达式语法:

        var 对象名=/规则/;
        var 对象名=new RegExp('规则');
    

    2.RegExp对象使用的常用方法:

    exec(str) 检索字符串中指定值。返回找到值,并确定其位置,若无,返回null
    test(str) 检索字符串中是否有指定值。返回true或false

    3.正则表达式支持的常用通配符

    . 匹配任意字符
    d 匹配0-9所有数字
    D 匹配非数字(有一个即可)
    s 匹配所有空白数字,包括空格、制表符、换行符、回车符等
    S 匹配所有非空白符(有一个即可)
    w 匹配所有单词字符,包括0-9,26个英文字母和下划线
    W 匹配所有非单词字符(有一个即可)
     匹配所有单词边界(首字母,末字母)
    B 匹配所有非单词边界
     
    [abc] 查找[]之间的任意字符
    [^abc] 查找不在[]之间的任意字符
    [0-9] 查找0至9之间的数字,等同于/d
    [a-z] 查找从a到z之间的字符
    [A-Z] 查找从A到Z之间的字符
    [A-z] 查找从A到z之间的字符
    (red|blue|green) 任何指定选项
     
    n+ 匹配包含至少一个n的字符串
    n* 匹配包含0个或多个n的字符串
    n? 匹配包含0个或一个n的字符串
    n{X} 匹配包含X个n的序列字符串
    n{X,Y} 匹配包含X个或Y个序列字符串
    n{X,} 匹配包含至少X个n序列字符串
    n$ 匹配包含结尾为n的字符串
    ^n 匹配包含开头为n的字符串
     

    正则表达式修饰符语法:

        var 对象名=/规则/修饰符;
    
    i 不区分大小写匹配
    g 全局匹配
    m 多行匹配
     

    E.数组

        var a=[];
        var a=new Array();//不推荐使用
    

    运算符

    算术运算符 + - * / % ++ --
    赋值运算符 =
    比较运算符 > < >= <= == != ===(严格恒等于) !==
    逻辑运算符 && || !
    位运算符 & | ~ ^ << >>
    其他运算符 三目(? :) ,(取最右边表达式结果) void typeof(判断字符属于什么类型数据) instanceof

    流程控制语句

    A.分支语句:if和switch

    B.循环语句:while,do while,for,for in

        for(变量 in 对象){
        执行的语句块;
        }//一般用来遍历对象 遍历数组中的所有数组元素或遍历JS对象的所有属性
    

    C.提供break(直接终止循环)和continue(终止本次循环,直接进入下一次循环)来改变循环的控制流

    常用特殊语句型

    A.语句块

    B.空语句

    C.异常抛出语句 throw new Error(‘xxx’);

    D.异常捕捉语句:

        try{
            //代码块,有任何一个语句抛出异常,该代码结束运行
        }
        catch(e){
            //try代码块抛出异常时执行此代码块
            //e为局部变量,用来指向Error对象或其他抛出对象
            //catch只有一个,e前不用加var
        }
        finally{
            //无论代码怎么,finally代码块始终执行
        }
    

    E.with语句 with(重复对象名)

    函数

    函数是事件驱动的或者当它被调用时执行的可重复使用的代码块。

    A.函数定义的三种方式

    1. 有名函数
          function 函数名(参数列表){
              语句块;
          }
      
    2. 匿名函数
          var func=function(参数列表){
              语句块;
          }
      
    3. 使用function类构造匿名函数
          new function(参数列表,函数执行体);
      
    4. 立即执行函数IIFE(Immediately Invoked Function Expression)
          (function foo(){
              语句块;
          })();   //第一个()把函数变成表达式,第二个()执行这个函数
          改进
          (function (){
              语句块;
          }());
      

    B.函数返回值

    JS无声明返回类型,可有函数返回值。return 值

    C.局部变量和局部函数

    变量只有全局变量跟局部变量之分。

    1. 全局变量:直接定义的变量
    2. 局部变量:函数中定义的变量。只在函数内部有效,可覆盖全局变量
    1. 外部函数:可直接调用其内部函数
    2. 局部函数:函数中定义

    D.函数调用的三种方式

    1. 直接调用函数
          格式: 对象.函数引用; //函数未指明分配给哪个对象使用,默认window对象
      
    2. 以call方法调用函数
          格式: 函数引用.call(调用名,参数1,参数2,……)
      
    3. 以apply方法调用函数
          格式: 函数引用.apply(调用名,arguments) //arguments相当于数组,可存放多个参数
      

    对象

    JS对象-常用的内置对象:是一种非常重要的数据类型,是自我包含的数据集合。

    A.创建Date对象方法

    new Date();
    new Date(month dd,yyyy hh:mm:ss);
    new Date(yyyy,mth,dd,hh,mm,ss);
    new Date(yyyy,mth,dd);
    new Date(ms);

      Date对象获取时间细节方法:

    getDate() 从Date对象返回一个月中的某一天(1~31)
    getDay() 从Date对象返回一周中的某一天(0~6)
    getMonth() 从Date对象返回月份(0~11)
    getFullYear() 从Date对象以四位数字返回年份
    getHours() 返回Date对象的小时(0~23)
    getMinutes() 返回Date对象的分钟(0~59)
    getSeconds() 返回Date对象的秒数(0~59)
    getTime() 返回1970年1月1日至今的毫秒数

      Date对象设置时间细节方法:

    setDate() 从Date对象设置一个月中的某一天(1~31)
    setMonth() 从Date对象设置月份(0~11)
    setFullYear() 从Date对象以四位数字设置年份
    setHours() 设置Date对象的小时(0~23)
    setMinutes() 设置Date对象的分钟(0~59)
    setSeconds() 设置Date对象的秒数(0~59)
    setTime() 设置1970年1月1日至今的毫秒数

    B.Math对象的常用方法

    abs(x) 返回绝对值
    ceil(x) 上舍入
    floor(x) 下舍入
    max(x,y) 返回最大值
    min(x,y) 返回最小值
    pow(x,y) 返回x的y次幂
    random() 返回0~1之间的随机数
    round(x) 返回四舍五入
    sqrt(x) 返回x的平方根

    JS对象-创建:对象是拥有属性(是与对象相关的值)和方法(是能在对象上执行的动作)的数据。

    A.访问对象属性

        格式:1.objectName.propertyName
              2.objectName.["propertyName"]  //常用于for...in遍历对象属性
    

    B.访问对象方法

        格式:objectName.methodName()
    

    C.创建对象

    • 使用new关键字调用构造器创建对象
        例1:
            function student(name,age){
                this.name=name;
                this.age=age;
            }
            var s1=new student();
            var s2=new student("Jack",30);
            document.write(s1.name+"--"+s1.age+"<br/>");  //undefined--undefined
            document.write(s2.name+"--"+s2.age+"<br/>");  //Jack--30
        例2:
            function student(name,age){
                this.name=name;
                this.age=age;
                student.gender="male";
                this.info=function(){
                    document.write(this.name+"--"+this.age+"--"+student.gender+"<br/>");
                }
            }
            var s1=new student();
            s1.info();  //undefined--undefined--male
            var s2=new student("Jack",30);
            s2.info();  //Jack--30--male
    
    • 使用object直接创建对象
        例:
            var myobj=new object();
            myobj.name="Jack";
            myobj.age=30;
            my.info=function(){
                document.write(this.name+"--"+this.age+"<br/>");
            }
            myobj.info();  //Jack--30
    
    • 使用JSON语法创建对象
    1. JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
    2. JSON 格式:{名:值,名:值,……} //值可以是各种数据的值,也可以是JSON对象。JSON数组用[]。
          例1:{"name":"Jack","age":"30","email":"h.chen@iotek.com.cn"}
          例2:{"people":[
                        {"firstname":"Bill","lastname":"Mclaugnlin"},
                        {"firstname":"Jason","lastname":"Hunter"},
                        {"firstname":"Elliotte","lastname":"Harold"},
               ]}
      
    3. JS使用JSON创建对象:object={名:值,名:值,……}
          例1:var p={
                  name:"Jack";
                  gender:"male";
                  info:function(){
                      document.write(this.name+"--"+this.gender);
                  }  //此处不加逗号
              };     //此处不加分号不报错,但不规范
              p.info();  //Jack--male
          例2: var person={
                  name:"Jack",
                  age:30,
                  son:[
                      {name:"Tom",age:2},
                      {name:"Jerry",age:5}
                  ],
                  info:function(){
                      document.write("父亲名字:"+this.name+",年龄:"+this.age+"<br/>");
                      for(var child in this.son){
                          document.write("儿子名字:"+this.son[child].name+",年龄:"+this.son[child].age+"<br/>");
                      }
                  }
              };
              person.info();
          输出:父亲名字:Jack,年龄:30
               儿子名字:Tom,年龄:2
               儿子名字:Jerry,年龄:5
      
  • 相关阅读:
    201871010132-张潇潇-作业四 软件研发团队组建
    201871010132-张潇潇 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
    201871010132-张潇潇 实验二 个人项目—《西北师范大学学生疫情上报系统》项目报告
    201871010132-张潇潇 实验一软件工程准备-软件工程初识
    张潇潇--学期获奖总结
    201871010132--张潇潇--《面向对象程序设计(java)》课程总结
    201871010132--张潇潇--《面向对象程序设计(java)》第十七周学习总结
    201871010132--张潇潇--《面向对象程序设计(java)》第十六周学习总结
    201871010132--张潇潇--《面向对象程序设计(java)》第十五周学习总结
    201871010132--张潇潇--《面向对象程序设计(java)》第十四周学习总结
  • 原文地址:https://www.cnblogs.com/lijuanhu321/p/8684359.html
Copyright © 2020-2023  润新知