1+X | JavaScript

前言

网景公司(netscape)开发,是一个操作DOM的语言,在JS中,一切皆对象。

语法基础

标识符

  • 必须以字母、下划线、$开头,后可以跟字母、数字
  • 不能使用关键字或保留字
  • 严格区分大小写

数据类型

  • 查看类型 - typeof 数据;

  • 基本类型 - Number,string,boolean,undefined,null

    ps:1)在js中不区分整数和浮点数;2)基本类型的数据存放在

  • 引用类型

    object,array,function等

    ps:1)引用类型的数据在栈中存放的是改变亮的地址,数据存放在堆中;2)所有引用类型的变量的

运算符

  • 算数运算符:+-*/ ++ – += =+

    var b = a++;['先把a赋值给b,a再自+1']
    var b = ++a;['a先自+1,再赋值给b']
      
    var b =+ a;['先把a赋值给b,a再+b']
    var b += a;['a先+b,再赋值给b']
    
  • 关系运算符:> < >= <= == ===

    • 字母比较的是ASCII码值;汉字比较的是unicode编码

      '123' == 123; //返回true,只比较值,不比较类型
      '123' === 123; //返回flase,比较值和数据类型
      
  • 三目运算符:a>b?a:b

函数

  • 构造函数

    不能调用,需要通过new实例化去使用

  • 普通函数

    可以通过调用去使用

结构化程序设计

  • 顺序结构

    • 赋值、初始化等语句
  • 分支结构

    • 单分支 if(){}

    • 双分支 if(){}else{}

    • 多分支

      1. if(){}else if(){}else if(){}...else{}

      2. switch(){case ...}

        <script>
         var score = prompt('输入成绩'),rs;
         if(score=='-1'){
             window.close();
         }else{
             switch(parseInt(score)/10){
              case 10:
              case 9:
              case 8:rs='优秀';break;
              case 7:rs='良好';break;
              case 6:rs='及格';break;
              case 5:
              case 4:
              case 3:
              case 2:
              case 1:
              case 0:rs='不及格';break;
              default :rs='您输入的数值错误'
             }
           document.write(rs);
         }
        </script>
        

循环

  1. for(){}

    for(var i=1,sum=0;i<=100;i++){
      sum += 1;
    }
       
    var i=1,sum=0;
    for(;;){
      if(i<=100){
        sum += i;
        i++;
      }else{
        break;
      }
    }
       
    document.write('1+1+3+...100='+sum);
    
  2. while(){}

    var i=1,sum=0;
    while(i<=100){
      sum += i;
      i++;
    }
    document.write('1+1+3+...100='+sum);
    
  3. do{}while()

    var i=1,sum=0;
    do{
      sum += i;
      i++;
    }while(i<=100)
    document.write('1+1+3+...100='+sum);
    
  4. forEach(){}(遍历数组)

    //数组.forEach(function(value,index){})
    var arr = [1,23,33,12,'a'];
    arr.forEach(function(value,index){
      console.log(index+':'+value);
    })
    
  5. for...in

    var arr = [1,23,33,12,'a'];
    for(var index in arr){
     console.log(index+':'+arr[index]);
    }
    

数组

  • 定义数组

    1. 直接定义a=[1,2]

    2. Array()

      a=Array(1,2);
      b=new Array(1,2);
      c=Array(1,Array('a','b'),1) //二维数组
      
  • undefind - 未赋值的数组元素为undefined

  • 取值 - 通过下标,0开始

  • 下标 - 可以是数字或字符串

  • push&pop - 追加&删除

    var arr = [1,2];
    arr.push(100); //[1,2,100],追加元素到最后一位
    arr.pop(); //[1],推出最后一位元素
    
  • join - 拼接

    var arr = ['a','b'];
    arr.join(); //'ab'
    arr.join('--'); //'a--b'
    
  • split - 分割

    var url = location.search;
    var rs = url.replace(0,'');
    var arr = rs.split('&')
    for(var i in arr){
      i.split('=');
    }
    var dict = {};
    dict[] = 
    console.log(rs);
    
  • sort - 排序

  • reverse - 反转

  • toLowerCase - 把字符串转为小写

  • toUpperCase - 把字符串转为大写

  • indexOf - 返回某个指定的字符串在字符串中第一次出现的位置

  • charAt - 返回指定下标位置的字符

  • charCodeAt - 返回指定下标位置的字符的unicode编码

  • toString - 转换为字符型

  • substr - 返回从指定下标开始指定长度的子字符串

  • substring - 提取字符串中介于两个指定下标之间的字符

  • replace - 在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的字串

  • trim - 删除字符串前后的空格

正则表达式

  • new

    var reg = new RegExp();
    
  • 方法

    • match()

    • test()

      //手机号码验证
      var phoneReg = /^1[3-9]\d{9}$/;
      console.log(phoneReg.test('14535754434'));
          
      //身份证验证
      var cardReg = /^([1-9]\d{14})|[1-9]{17}[0-9x]$/;
      
    • replace()

      //空格验证
      console.log('1 2 3'.replace(/\s/g,'')) 
      //g:全局匹配;m:多行;i:忽略大小写
      // 结果:123
      

面向对象

  • 关键字:this

  • 类对象

    //创建一个类对象
    function Person(name){
      this.name = name;
      this.fun = function(){
        return this.name+' is good!';
      }
    }
    //实例化类对象
    var bb = new Person('billie');
    console.log(bb.name);
    console.log(bb.fun());
    

闭包

  • 理解:函数外部调用函数内部的变量

  • 语法

    //写法1
    (function(){
      var x = 123;
      console.log(x);
      window.d=d;
      }
    })()
    //写法2
    function(){
      var x = 123;
      console.log(x);
      return function(){
        return i;
      }
    }()
    

IIFE

this

  • this是一个地址指针
    1. 全局中的this
    2. 函数中的this
    3. 对象方法中的this

模块化

开发规范

  • 服务端
  • 客户端

DOM操作

  • 创建 - createElement

    //document.createElement('标签名')
    
  • 添加 - appendChild

    var dom = document.createElement('p');
    //添加dom
    document.getElementsByClassName('box')[0].appendChild(dom);
    
  • 插入 - innerHTML

    //.innerHTML=''
    document.getElementsByTagName('p')[0].innerHTML='<span>ds</span>';
    
  • 获取

    • getElementById - 返回单个DOM
    • getElementsByClassName - 返回一个DOM数组
    • getElementsByTagName - 返回一个DOM数组
    • getElementsByName - 返回一个DOM数组

    //通过id获取dom
    var idDom = document.getElementById('content');
    idDom.style.cssText='color: blue;border: 1px solid #999;';
    //通过class获取
    var classDom = document.getElementsByClassName('content');
    //通过标签名获取
    var tagDom = document.getElementsByClassName('div');
    
  • 添加属性 - setAttribute

    // 
    document.getElementsByClassName('box')[0].setAttribute('title')
    

XML/JSON

  • xml

  • json

    JSON:JS 对象简谱,轻量级noSQL的数据交换格式。它是基于ECMAScript的一个子集,采用完全独立于编程 语言的文本格式来存储和表示数据。

AJAX(异步请求)

  • 工作原理

  • HTTP状态码

    • 1 - 继续提出请求
    • 2 - 请求成功
    • 3 - 重定向
    • 4 - 请求错误或者无法被执行
    • 5 - 服务器错误
  • 写法

    xmlhttp.open("GET","ajax_test.html",true) - 最后一个参数 true 表示发送异步请求

  • 缺点

    1. 破坏了前进后退
  • 优点

    1. 页面无需刷新,用户体验好
    2. 异步方式通信,响应快
    3. 基于标准化,不需要下载插件
  • 应用于ajax的技术

    • css,DOM,XML,JSON等

websocket

  • 什么是websocket?
  • 采用协议 - ws、wss

JS实现继承的方式

  1. 原型链继承
  2. 构造函数继承
  3. 原型链继承+构造函数继承(组合继承)

后台(服务器端)有哪些语言?

python,Java,PHP,go,node,js

Date()

var myDate = new Date();

Date() 返回当日的日期和时间 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) getMonth() 从 Date 对象返回月份 (0 ~ 11) getFullYear() 从 Date 对象以四位数字返回年份 getYear() 请使用 getFullYear() 方法代替 getHours() 返回 Date 对象的小时 (0 ~ 23) getMinutes() 返回 Date 对象的分钟 (0 ~ 59) getSeconds() 返回 Date 对象的秒数 (0 ~ 59) getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)


2040 字