1+X | JavaScript

0
tec

前言

网景公司（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 字