美文网首页
01 回顾

01 回顾

作者: 012ca771a446 | 来源:发表于2017-02-21 13:20 被阅读0次

javaScript的组成部分

DOM
Document Object Mode文档对象模型，此处的文档是指的HTML页面（HTML文档）；
为我们提供了一套操作页面的元素的api（一套工具）；
api：application（应用） programming（编程） interface（接口）；
BOM
Browser Object Mode 浏览器对象模型，提供一个和浏览器交互的对象；
和新对象是：window；
ECMAScript
规定的语法标准；

基本数据类型和复杂数据类型

基本（简单）数据类型

string 字符串类型 number 数值（小说和整数） boolean 布尔类型（true | false） null 空 undefined 未定义

复杂（复合）数据类型

Object 对象类型 Array 数组类型 Date 日期类型 Math 类型 Function 函数 ====>所返回的非object，返回function -->其他都是返回objec RegExp 正则表达式 String 字符串对象类型 Number Boolean

判断数据类型

关键字：typeof
语法： typeof 变量

typeof 字符串 string
typeof 10 number
typeof undefined undefined
typeof null ---> object(正确), 在这里要特别注意，typeof bull 返回的是Object，而非null；假如用instanceof 来判断是否为 Object时，返回却为false。

console.log(typeof null);                   //Object
console.log(null instanceof Object);        //true |false(错误的)

逻辑运算符(短路运算符)

01 逻辑非
符号:!
操作符: !表达式
结果:布尔类型的值,要么是true要么是false
02 逻辑与
符号:&&
操作符:表达式1 && 表达式2
结果:并非是布尔类型的,而是表达式之一
如果表达式1为真,那么就返回表达式2,否则就返回表达式1
03 逻辑或
    符号:||
    操作符:表达式1 || 表达式2
    结果:并非是布尔类型的,而是表达式之一
    如果表达式1为真,那么就返回表达式1,否则就返回表达式2

console.log(!2);
console.log(0 && 1);        //0
console.log(0 && 0);        //0
console.log(1 && 1);        //1
console.log(1 && 0);        //0

console.log(0 && 2);        //0
console.log(2 && 0);        //0
console.log(2 && 3);        //3

console.log(0 || 0);        //0
console.log(0 || 1);        //1
console.log(1 || 0);        //1
console.log(1 || 1);        //1
console.log(1 || 2);        //1
console.log(2 || 1);        //2

值类型和引用类型

值类型

string
number
boolean
null
undefined

引用类型

Object类型(以下类型其本质都为Object类型)；
Function(function---->object)
Array
Date
String
Number
Boolean
变量在内存中存储的结构,和超市的储物箱很像,有一个名字(比如说01,02,03),还有一个空间(可以存放数据的)
区别:
区别在于空间中存储的信息
值类型:存储的是具体的数据
引用类型:存储的是一个引用(reference)[地址],该引用指向内存中一块空间,这块空间中存储着具体的数据
举例:
01(变量的名称) --->一个苹果(具体的数据)
02(变量的名称) --->苹果在超市的第二排货架的第一列(地址)

    var a = 10;  //首先找到一个名称为a的箱子,然后把数据10放在箱子中
    var obj = {
        name: "zs",
        age: 20,
        dog: {
            name: "旺财",
            color: "绿色"
        }
    };

赋值(=)

左边变量=右边变量
var a = 10;
内部细节:把右边变量(空间中)存储的值复制一份放在左边变量(空间中)

值类型赋值:

赋值操作:把右边变量(空间中)存储的值[具体数据]复制一份放在左边变量(空间中);
修改了其中的一个变量对另外一个变量没有影响。

引用类型赋值

赋值操作:把右边变量(空间中)存储的值[地址]复制一份放在左边变量(空间中);
修改了其中的一个对象,会对另外一个对象产生影响。

<script>
    var str1 = "让我掉下眼泪的,不止昨夜的酒";
    var str2 = str1;

    console.log(str1 == str2); //true

    //尝试修改变量的值
    str1 = "让我依依不舍的,不止你的温柔";
    console.log(str1);
    console.log(str2);

    var obj1 = {name:"zs"};
    var obj2 = obj1;
    obj1.name = "lisi";
    console.log(obj2.name);

    //重新设置obj1的值
    obj1 = {age:22};   //该行代码切断了obj2和obj1的联系
    console.log(obj2.age); //undefined(正确)
</script>

对象的动态特性

javaScript中的对象和其他的大多数语言都不一样
对象支持动态特性:增加属性(方法) | 删除属性(方法) |修改属性(方法) |查询
对象:键-值对的集合(key-value)
属性:在对象内部声明的变量
方法:在对象内部定义的函数

操作对象的属性和方法可以使用两套方式:

  • 01 点语法
<script>

    //01 创建一个空的对象
    var obj = {};

    //02 动态添加属性
    obj.name = "zhangsan";
    console.log(obj.name);

    //03 修改属性
    obj.name = "lisi";
    console.log(obj.name);

    //区分添加还是修改:在通过点语法的方式访问属性的时候,先检查改属性是否存在,如果存在那么就是修改
    //如果该属性不存在,那么就是添加

    //04 添加方法
    obj.showName = function (){
        console.log("我的名字");
    }

    obj.showName();

    //修改方法
    obj.showName = function (){
        console.log("哈哈哈---");
    }
    obj.showName();

    //05 删除对象的属性
    //关键字 delete
    //语法: delete 对象.属性
    delete obj.name;
    console.log(obj.name);   //undefined
</script>```
 * 02 中括号[]
```<script>
    //01 创建一个空的对象
    var obj = {};

    //02 动态添加属性
    var name = "testName";
    obj[name] = "zhangsan";   //注意:在使用[]语法的时候,key必须是字符串需要加""

    //name是window的name
    console.log(obj);

    //03 修改属性
    obj["name"] = "lisi";
    console.log(obj["name"]);

    //区分添加还是修改:在通过点语法的方式访问属性的时候,先检查改属性是否存在,如果存在那么就是修改
    //如果该属性不存在,那么就是添加

    //04 添加方法
    obj["showName"] = function (){
        console.log("我的名字");
    }
    obj["showName"]();

    //修改方法
    obj["showName"] = function (){
        console.log("哈哈哈---");
    }
    obj["showName"]();

    //05 删除对象的属性
    //关键字 delete
    //语法: delete 对象.属性
    delete obj["name"];
    console.log(obj["name"]);   //undefined
    
    obj["background color"] = "red";
    console.log(obj);
</script>```
####delete关键字
作用:
 * 1删除对象中的属性
 * 2删除没有使用var关键字声明的全局变量
        注意:
        (1)返回值 布尔类型的值(我们可以通过该值来判断是否删除成功)
        (2)使用var关键字声明的变量无法被删除
        (3)删除对象中不存在的属性没有任何变化,但是返回值为true
        (4)不能删除window下面的全局变量(使用var声明),但是可以删除直接定义在window上面的属性
```<script>
    var dog = {
        name:"阿黄",
        color:"红色"
    }
    console.log(delete dog.color);
    console.log(dog.color); //undefined

    var a = 10;
    b = 20;   //没有使用var关键字声明的变量默认会成为全局变量,全局变量默认都会成为window的属性
    console.log(b);

    delete b;
    //console.log(b);
    console.log(a);

    console.log(delete a);   //删除不成功  false
    console.log(a);

    console.log(delete dog.age);   //返回的是成功还是失败?  成功
    
    //window
    console.log(window.a);
    delete window.a;
    console.log(window.a);

    window.demo = "demo";
    console.log(window.demo);
    delete window.demo;
    console.log(window.demo);
</script>```
###循环分支
* for循环(最常用)
* while
* do...while(至少会执行一次)
* for...in(主要用于遍历对象)

var n = 0;
while (n >0)
{
//打印
console.log(n);
n --;
}
var a = 10;
do {
console.log(a);
a ++;
}while (a<10);
//条件结构
//if..else
//switch..case
var a = 3;
switch (a) {
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
default:
console.log("其他的数据");
}

###异常处理
 * 01异常处理

异常处理的结构:
try{

}
catch(e){

}

 * 02
        正常情况下,如果程序出现了错误或者是异常,那么该行代码后面的所有代码都无法得到执行
        但是,有些时候我们需要保证即便程序出现了问题,后面的代码也能够正常执行,这种情况就可以使用异常捕获结构
 * 03 手动抛出异常

语法 throw 具体的信息
抛出的内容:字符串 + 对象
自己编码规范:如果出错或者是有异常,那么就抛出一个对象(msg code)
函数未定义 1001
变量未定义 1002
访问了错误的数据 1003

 * 04 完整的异常捕获结构
        try{

        }
        catch(e){

        }
        finally{

        }
例子:

<script>
function demo() {
console.log("我是测试的函数");
}
try {
var a = 10;
console.log(a);
a(); //报错

    //把可能出错的代码,放在try代码块中
}
catch (e) {
    //如果上面的代码出现了错误,那么就会执行这个catch代码块中的任务
    //一般在这个代码块中要做相应的补救处理
    console.log("出错了");
    //参数:e 异常信息
    console.log(e);
}
demo();

</script>

<script>
try {
//可能出现问题的代码
function sum(a, b) {
if (a == undefined) {
//throw "请输入具体的参数!";
throw {
ErrMsg: "找不到该对象!",
ErrCode: 1004
}
}
console.log(a + b);
}
sum();
} catch (e) {
console.log(e, "____");
}
</script>

<script>
try {
//可能出错的代码
} catch (e) {
console.log(e, "____");
//出错了就执行这个代码块
}
finally {
//不管是否出错,都会执行这里的代码块
//一般在前端开发中不会使用,多多用于后端开发Node.js 主要用于在最后释放资源
}

###DOM操作
增加 | 删除 | 修改 |查询

//01 创建一个div
var divdemo = document.ctresteElement("div");
//02 设置div的背景颜色为红色
divdemo.style.backgroundColor = 'red';
//03 把div添加到页面中
document.body.appendChild(divdemo);
//04 获得页面中之前创建div
var divTest = document.getElementByTagName('div')[0];
//05 删除
document.body.removeChild(divTest);

###简单的函数封装
 * 面向过程思维

<body>
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<p>我是屁</p>
<p>我是屁</p>
<p>我是屁</p>
需求:
获取页面中所有的div,设置他们的边框,1px solid #e2e
需求:
获取页面中所有的p标签,设置他们的边框,1px solid #e2e
<script>
//01 封装获取标签的代码
function getElements(eleName) {
return document.getElementsByTagName(eleName);
}

//02 封装设置样式的函数
function setStyle(eles) {
    for (var i = 0; i < eles.length; i++) {
        eles[i].style.border = "1px solid #002";
    }
}
var divs = getElements("div");
var ps = getElements("p");
setStyle(divs);
setStyle(ps);

</script>
</body>

 * 面向对象思维

<script>
var $ = {
getEle: {
getElementsByTagName: function (eleName) {
return document.getElementsByTagName(eleName);
},
getElementsById: function (id) {
return document.getElementById(id);
},
getElementsByClassName: function (className) {
return document.getElementsByClassName(className);
}
},
setStyle: {
setBorder: function (eles) {
for (var i = 0; i < eles.length; i++) {
eles[i].style.border = "1px solid #002";
}
},
setColor: function (eles) {
for (var i = 0; i < eles.length; i++) {
//......
}
},
setCss: function (eles) {
for (var i = 0; i < eles.length; i++) {
//.....
}
},
}
}

$.setStyle.setBorder($.getEle.getElementsByTagName("div"));
$.setStyle.setBorder($.getEle.getElementsByTagName("p"));

</script>

相关文章

网友评论

      本文标题：01 回顾

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

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|01 回顾|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！