11.10笔记整理、作业和学习心得

11.10笔记整理、作业和学习心得

1、运算符

1.1加法运算符

加法运算符“+”是最常用的运算符之一，但是使用却相对复杂。因为在Javascript中，加法运算符可以完成两种含义的操作，一种是算术的加法，一种是做字符串拼接。

console.log(1 + 1); // 2
console.log(true + true); // 2
console.log(1 + true); // 2
console.log('1' + 1); // 11

算法步骤：
1、如果运算子是个对象，先转成原始类型的值（即先执行该对象的valueof（）方法，如果还不是原始数据类型 ，再执行toString方法）；
2、两个运算子都是原始数据类型以后，只要有一个运算子是字符串，则两个运算子都转化为字符串，做字符串拼接操作。
3、否则，两个运算子都转化为数值，做算术加法运算。

1.2算术运算符

• 名称 表示
• 加法运算符 x+y
• 减法运算符 x-y
• 乘法运算符 x*y
• 除法运算符 x/y
• 余数运算符（模运算符） x%y
• 自增运算符 ++x、x++
• 自减运算符 - -x、- -y
• 数值运算符 +x
• 负数值运算符 -x

var i = 0;
var arr6 = ['a','b','c','d'];
while (i < arr6.length) {
    console.log(arr6[i++]);
    // 等同于
    // console.log(arr6[i]);
    // i = i + 1;
}

1.3赋值运算符

最常见的赋值运算符就是“=”
除了=之外，还有包括“+=”、“=”、“/=”、“=”、“%=”、“>>=”、“<<=”、“>>>=”、“&=”、“|=”、“^=”
最常用的包括“+=”、“-=”、“/=”、“=”、“%=”。

1.4比较运算符

比较运算符运算的结果是一个boolean值，表示是否满足条件。
== 相等、=== 严格相等、！= 不等于、！== 严格不等于、< 小于、<= 小于等于、> 大于、>= 大于等于

关于==和===
相等运算符比较两个值是否相等，严格相等运算符比较他们是否为“同一个值”。如果两个值不是同一类型，严格相等运算符直接返回false，而相等运算符会将他们转成同一数据类型，再用严格相等运算符进行比较。

1.5布尔运算符

将表达式转为布尔值
取反运算符！、且运算符&&、或运算符||、三元运算符？：

1.5.1 取反运算符

取反运算符有转换数据类型的作用。

console.log(!undefined); // true
console.log(!null); // true
console.log(!0); // true
console.log(!NaN); // true
console.log(!""); // true
console.log(!54); // false
console.log(!'hello'); // false

1.5.2 且运算符”&&“

且：有一个假即假
规则：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值是false，则返回第一个运算子的值，且不再对第二个运算子求值。

console.log(true && true); // true;
console.log(false && true); // false;
console.log(true && 'abc'); // 'abc';
console.log('f' && 'abc'); // 'abc'
console.log(NaN && 'abc'); // NaN

1.5.3 或运算符”||“

或：有一个真即真；
规则：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的值为false，则返回第二个运算子的值。

console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
console.log(true || "abc"); // true
console.log(false || "abc"); // abc

或运算符常用于为一个变量设置默认值

function hello(text) {
   text = text || 'hello';
   console.log(text);
}
hello()

1.5.4 三元运算符

var text=(intelligence===0?'人工智障':'人工智能');
console.log(text);

用if…else结构也能实现

2、DOM模型

2.1 DOM和DOM节点

2.1.1 DOM

DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。

2.1.2 DOM节点

DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。
在DOM中，节点的类型一共有7种：

• Document：整个文档树的顶层节点
• DocumentType：dotype标签。比如：
• Element：网页的各种HTML标签。比如：
• Attribute：网页元素的属性比如：id=”id” class=”class” type=”text”
• Text：标签之间或标签包含的文本
• Comment：注释
• DocumentFragment：文档片段

2.1.3 节点树

一个文档的所有节点，按照所在的层次，可以抽象成一个树状结构。这种树状结构就是DOM。
最顶层的节点就是document类型的节点，它代表了整个文档。文档里面最高一层的HTML标签，一般是，它构成树结构的根节点（root node），其他的Html标签都是它的下级。

除了根节点，其他节点对于周围的几点都存在3种关系

• 父节点关系（parentNode）：直接的那个上级节点
• 字节点关系（childNodes）：直接的下级节点
• 同级节点关系（sibling）：拥有同一父节点的节点

DOM提供操作接口，用来获取三种关系的节点。
获取子节点：firstChild（第一个子节点）lastChild（最后一个子节点）等
获取同级别：nextSibling（紧邻在后的同级节点）和previousSibling（紧邻在前的同级节点）

2.2 特征相关属性

2.2.1 Node.nodeName和Node.nodeType

console.log("document.nodeName=" + document.nodeName); // #document
console.log("document.nodeType=" + document.nodeType); // 9 

2.2.2 Node.nodeValue

返回是一个字符串，表示当前节点本身的文本值，该属性可读写。
由于只有Text节点、Comment节点和xml文档的CDATA节点有文本值，因此只有这三类节点有nodeValue，其他节点一律返回null

console.log("p.nodeValue=" + document.getElementById("_p").nodeValue); //null

2.2.3 Node.textContent

返回当前节点和它的后代节点的文本内容，该属性是可读写的。

console.log("p.textContent=" + document.getElementById("_p").textContent); // hello,world
document.getElementById("_p").textContent = "hello, <span color='red'>nantong!</span>";
// hello, <span color='red'>nantong!</span>

2.2.3 Node.nextSibling

返回紧跟在当前节点后面的一个同级节点。如果没有找到返回null
注意：该属性还包括文本节点。因此如果当前节点后面有空格，该属性返回一个文本节点，内容为空格。

var _pb = document.getElementById("_p").nextSibling;
console.log(_pb.textContent); // 空格

2.2.5 Node.previousSibling

返回当前节点前面的，距离最新的一个同级节点。

2.2.6 Node.parentNode

返回当前节点的父节点。父节点只可能包括三种类型：element节点、document节点、documentfragment节点

2.2.7 Node.parentElement

返回当前节点的父element节点。不是W3C标准，仅支持IE。

2.2.8 childNodes

返回一个nodelist集合，成员包括当前节点的所有子节点。
注意：除了Html元素节点，还包括Text节点和Comment节点。如果当前节点不包含任何子节点，则返回一个空的nodelist集合。

Html:
<div id="_asia">
    <span id="_china">China</span>
    <!-- xxxx -->
    <span id="_korea">Korea</span>
    <span id="_japan">Japan</span>
</div>
var _asia = document.getElementById("_asia");
var _asias = _asia.childNodes;
console.log(_asias);

2.2.9 Node.firstChild/lastChild

返回当前节点的第一个或者最后一个子节点。如果没有找到返回null。

11.10作业

1、选取数组中的最小值

var arr2=[23,12,54,25,90,6,10,2,5];
var tmp;
for(var i=1;i<arr2.length;i++){
    tmp=0;
    for(var j=1;j<arr2.length-i;j++){
        if( arr2[tmp] < arr2[j] ){
            tmp=j;
        }
    }
    var index=arr2[arr2.length-i];
    arr2[arr2.length-i]=arr2[tmp];
    arr2[tmp]=index;
}
console.log(arr2[0]);


var arr3=[23,12,54,25,90,6,10,2];
var k=0;
for(var i=1;i<=arr3.length;i++){

    if(arr3[k]>arr3[i]){
        k=i;
    }
}
console.log(arr3[k]);

2、使用对象数组和document.write构造页面

document.write('<h1 id="title">Coding Coffee欢迎您！</h1>');
var items=[{name:'蓝山咖啡',imgurl:'img/c2.jpg',descroption:
    '纯蓝山咖啡口感、香味较淡，但喝起来却非常香醇精致；具有贵族的品味，乃咖啡中之极品。'},
    {name:'卡布其诺',imgurl:'img/c4.jpg',descroption:
    '卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶相混合的意大利咖啡。此时咖啡的颜色，就象卡布奇诺教会的修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名。'},
    {name:'拿铁咖啡',imgurl:'img/c5.jpg',descroption:
    '拿铁是最为国人熟悉的意式咖啡品项，它是在沉厚浓郁的意式浓缩咖啡中，加入牛奶等调和，甚至更多牛奶的花式咖啡，有了牛奶的温润调味，让原本甘苦的咖啡变得柔滑香甜、甘美浓郁。'},
    {name:'欧蕾咖啡',imgurl:'img/c6.jpg',descroption:
    '欧蕾咖啡最大的特点就是它要求牛奶和浓缩咖啡一同注入杯中，牛奶和咖啡在第一时间相遇，碰撞出的是一种闲适自由的心。'},
    {name:'猫屎咖啡',imgurl:'img/c7.jpg',descroption:
    '麝香猫咖啡（Kopi Luwak），又称猫屎咖啡，它是由麝香猫在吃完咖啡果后把咖啡豆原封不动的排出，人们把它的粪便中的咖啡豆提取出来后进行加工而成。'}];

for(var i=0;i<items.length;i++){
    document.write('<div class="parent">');
        document.write('<div class="left" >');
            document.write('<img src='+items[i].imgurl+'>');
        document.write('</div>');

        document.write('<div class="right">');
            document.write('<h2 class="smallTitle">');
                document.write(items[i].name);
            document.write('</h2>');
            document.write('<p class="smallTheme">');
                document.write(items[i].descroption);
            document.write('</p>');
    document.write('</div>');
}

11.10学习心得

今天学习了各种运算符，包括加法运算符、算术运算符、赋值运算符、比较运算符、布尔运算符，要理解每一种运算符的含义及其用法。
DOM模型：DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。