Mki's Blog

JavaScript(一):基本操作

JavaScript学习(一)

浏览器开发者工具

基础操作

字符串相关

查找字符串

string = "my name is Mki";
string.indexOf('Mki');

存在,返回查找到的起始位置。

不存在,返回-1。

提取字符串

string = "my name is Mki";
string.slice(11,13);  //startNum,endNum

若不存在endNum则返回剩下的所有字符。

替换字符串

string = "my name is Mki";
string = string.replace('Mki','Arrival');  //(原字符串,新字符串)

这里要注意,没有第二行的重新赋值,string的值是不会变的。

数组相关

字符串转数组

以切割字符串为例,一套连击。

let string = "my name is Mki, life is always short, but we never treasure.";

创建数组

array=[];

切割string,放入数组。

array = string.split(',');

反向操作,变回字符串

array.join(',');

或者

array.toString();

常见内容

常用函数

放置一些常用的内置函数,不定期更新

Math.random() //随机返回0-1之间的一个数字
xxx = document.querySelector('xxx'); //css选择器

事件

xxx.onfoucus();  //被聚焦
xxx.onblur();    //失去聚焦

xxx.addEventListener('click', function);  //给xxx添加click事件
xxx.removeEventListener('click', function);  //给xxx删除click事件

事件对象

例如

function Change(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}  

xxx.addEventListener('click', Change);

这里的e指的是应用的元素本身。(e==event==evt)

阻止默认行为

e.preventDefault();

面向对象

基本操作

创建对象

let Mki = {};

对象属性设置

Mki = {
    name : 'Mki';
    size : 20;
    hobby : ['sleep', 'eat'];
    Say : function(){
        alert('hello wa!'+this.name);  //this代表本对象
    }
}

创建对象实例

构造器函数

function Cat(name, color){
    this.name = name;
    this.color = color;
    this.miao = function(){
        alert('miao miao miao ');
    }
}
let cat_1 =new Cat('timi','red');

Object()构造

cat_2 = new Object();
cat_2['name'] = 'sakiku';
cat_2.miao = function(){
    alert('oh hu');
}

Create()基于对象构建

相当于继承

cat_3 = Create(cat_2);

继承

首先有一个要继承的对象原型

function Cat(name, color){
    this.name = name;
    this.color = color;
    this.miao = function(){
        alert('miao miao miao ');
    }
};

定义新构造器

function BabyCat(name,color,from){
    Cat.call(this,name,color);   //call() 调用函数
    this.from = from;
};

JSON

JSON是一种按照js对象的语法构造的数据格式。

基本格式

{
    "name" : "Mki";
    "age" : 20
    "hobby" : [
        "sleep",
        "eat",
        "biu!"
    ]
}

使用

使用JSON需要调用 XMLHTTPRequest 这个API,(简称XHR)

let URL='https://www.xxx.com/name.json';
let xhr = new XMLHttpRequest();  //创建一个HTTP请求对象
xhr.open('GET', URL);      //创建新的请求

xhr.responseType = 'json';   //设定返回数据格式
xhr.send();          //发送请求

获取到的json数据保存后类似于对象的使用。

API

API:应用程序接口。比如DOM就是一个API。

API基于对象工作。