11.09课堂笔记、作业以及学习心得

11.09课堂笔记、作业以及学习心得

1.条件语句补充

1.1 switch结构

switch我们一般用在多个离散的值进行条件判断时使用，特别是有很多的值的时候。

var money = 20;
switch(student)
{
case 2:
console.log("买根火柴");
break;
case 10:
console.log("可以买自行车");
break;
case 20:
console.log("可以买电动车");
break;
case 100:
console.log("可以买汽车");
break;
default:
console.log("洗洗睡吧");
}

1.2 三元运算符

一般用于简单的逻辑判断和赋值语句中。

var a=1;
var b;
if (a === 1) {
b =true;
} else {
b =false;
}

// 语法(condition) ? expre1 : expre2;
// 实现的效果和上述的if...else结构一样
b = (a === 1 ? true : false);
console.log(b);

1.3 do…while

do…while循环和while循环本质的差异在于，while循环体内的代码可能存在一次都不会执行，但是do…while的循环体内代码至少会执行一次。

语法：

do {
statement;
} while (expression)

1.4 for循环

for循环可以指定循环的起点、终点和终止条件。

var sumifor = 0;
for (var i = 1; i <= 10000; i++) {
sumifor = sumifor + i;
}
document.write("<br/>sumifor=" + sumifor);

1.5 break和continue关键字的作用

break和continue都有跳出循环的作用，就是让代码不按照既有的顺序往下执行；

但是break是直接跳出循环，执行循环的下一条语句。

continue：当在循环体内出现continue关键字，则continue关键字下面的语句不会执行，但是程序会继续执行循环，不会跳出循环执行循环的下一条语句。

2、对象

2.1 属性的操作

有两种方式读取对象的属性，一种使用点运算符，还有一种是使用方括号运算符。

var obj = {
name : "Tom",
age : 27,
sex : true,
3:"333"
};
console.log(obj.name); // Tom
console.log(obj["name"]); // Tom
console.log(obj[3]); // 333

2.2 检查变量是否声明

在判断属性在变量中是否存在的时候，我们一般使用in运算符进行判断，虽然直接（obj.score）有时也会达到一样的效果，但是有漏洞，比如socre的属性为“”或false时，就会达不到预期的效果。

var obj = {
name : "Tom",
age : 27,
sex : true,
3:"333",
score : ""
};
if (obj.score) {
console.log("score is exist");
}  else {
console.log("score is not exist");
}
// score is not exist
// 要求使用 in 这种严谨的判断方式
if ("score" in obj) {
console.log("score is exist");
}  else {
console.log("score is not exist");
}
// score is exist

2.3 属性的赋值

可以通过点操作符和方括号操作符对对象的属性进行赋值。

Javascript允许对对象的属性进行“后绑定”，你可以在变量声明后的任意时刻，新增属性，并进行赋值，没有必要在对象定义的时候，就把对象的属性都定义好。

var obj = {  };
obj.name = "Jack";
obj["age"] = 20;
console.log(obj.name + " " + obj.age );

2.4 查看所有属性

通过Object.keys(obj)方法获取到所有的属性数组。

var obj = {};
//声明对象
obj.name = "Jack";
obj["age"] = 20;
给对象属性赋值
console.log(Object.keys(obj));

2.5 delete命令

delete命令用于删除对象的某个属性，如果删除成功，返回true。

3、数据类型

3.1 确定一个值的数据类型

在Javascript中有3种方法确定一个值的数据类型

（1）typeof运算符

console.log(typeof 123); // number
console.log(typeof '123'); // string
console.log(typeof true); // boolean
console.log(typeof test); // function
console.log(typeof undefined); // undefined
console.log(typeof [1,2,3]); // object
console.log(typeof {}); // object
console.log(typeof null); // object

（2）instanceof运算符

console.log(object instanceof [1,2,3]); // true

（3）object.prototype.toString方法

3.2 数值类型

1.整数和浮点数

在Javascript内部，所有的数字都是以64位浮点形式存储的，即便是整数也是如此，所以，在Javascript中1 和1.0，是同一个数字。

console.log(1 === 1.0); // true

因为浮点数不是精确的值，在位制转换过程中会精度丢失。

console.log(0.1 + 0.2 === 0.3); // false
console.log(0.3 / 0.1); // false

2.NaN（Not a Number）

主要出现在将字符串错误的解析为数字。

console.log(5 - 'x'); // NaN
console.log(0 / 0); // NaN

3.与数值类型相关的几个全局方法

parseInt()：把字符串解析为整数，要注意的是，字符串在解析为整数的时候，是一个个字符解析的，如果遇到不能转为数字的字符，就不再解析下去，返回已经解析完成的字符数字。

console.log(parseInt(' 12')); // 12
console.log(parseInt('12  abc 12')); // 12

3.3 字符串

字符串是一个或多个排在一起的字符，可以用单引号和双引号包裹。

在单引号包裹的字符串内部可以使用双引号，同样的，在双引号包裹的字符串内部也是可以使用单引号。

在源代码中如果需要使用多行字符串，一般使用 + 或者 \ ，但是一般都是使用 + 拼接。

console.log("hello,'world'!");
console.log('hello,world!\hello,world!\hello,world!hello,world!');

1.转义字符

\0 null

\b 后退键

\f 换页符

\n 换行符

\r 回车符

\t 制表符

\v 垂直制表符

\’ 单引号

\” 双引号

\ 反斜杠

2.转换为字符串

几乎每个值都有toString方法，出了null和undefined

3。字符串和数组

字符串可以理解为一个特殊的字符类型的数组，因此可以使用数组的中括号返回某个索引位置的字符。但是不能通过索引位置赋值。

3.4 布尔类型

在Javascript的boolean类型中，除true和false表现真假外，0也可以表示假，非0表示真。

3.5 函数

1.函数名的提升

Javascript引擎将函数名视同变量名。所以采用function命令声明函数时，整个函数就会像变量声明一样，提升到代码头部。

2.函数的属性和方法

name属性：输出函数的名字

length属性：输出函数参数的个数

toString（）方法：返回函数的源码

3.函数的作用域

在Javascript中只有两种作用域，一种是全局作用域：即变量在整个程序中一直存在，所有的地方都可以读取。

另一种叫函数作用域：即变量只在函数内部存在。

4.参数

函数在运行的过程中，有时需要提供外部数据，不同的外部数据可能会得到不同的结果，我们把这种外部数据叫做参数。在js中不要用指定参数的数据类型

5.传递方式

（1）、函数参数如果是原始数据类型（数值、字符串、布尔型），都是传值传递，如果在函数体内修改了变量的值，不会影响到函数体外。

（2）、但是，如果函数的参数是复合数据类型的值（数组、对象、函数等），传递方式是引用传递。也就是说，在函数内部修改了原对象的值，会影响到原来的值。

3.6数组

数组是按次序排列的一组值。每个值的位置都有编号（从0开始的）。整个数组用方括号表示。

1.数组的本质

本质上，数组就是一个对象。通过typeof运算符返回的类型就是object。

var arr=[1,2,3,4];
console.log(typeof arr);  //object

2.length属性

length属性返回的是数组的成员数量。Javascript使用32位整数保存数组的元素个数，所以length的最大值为232-1。

只要是数组，就有length属性，而且length属性是一个动态的值，该值等于键名中的最大整数+1。

补充：清空一个数字比较有效的方法就是设置length=0

3.for…in循环和遍历数组

通过for…in遍历数组的时候，会把非数字键的属性也遍历出来。

11.09作业

尝试使用循环和document.write()方法构建页面

（1）html部分

<html>
<head>
<meta charset="UTF-8">
<title> Coding Coffee </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link type="text/css" rel="stylesheet" href="css/list.css"></link>
</head>

<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>

（2）css部分

body{
background-color:#fdffff;
}

#title{
color:green;
font-size:60px;
text-align:center;
}

#smallTitle{
color:blue;
font-size:35px;
text-align:center;
}

#theme{
color:#ff8040;
font-size:15px;
}

#bigTheme{
color:#00aeae;
font-size:30px;
}

#smallTheme{
font-size:20px;
font-family:"Times New Roman";
}

.parent{
width:900px;
height:400px;
/*border:2px solid red;*/
margin:0 auto;
background-color:#fbfffd;
}

.left{
float:left;
width:400px;
height:400px;
}
.right{
float:right;
width:450px;
height:400px;
}

（3）js部分

document.write('<h1 id="title">Coding Coffee欢迎您！</h1>');

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

for(var i=0;i<arr.length;i++){
document.write('<div class="parent">');

for(var j=0;j<arr[i].length;j++){
if(j==0){
document.write('<div class="left">');
document.write('<img src=img/c2.jpg>');
document.write('</div>');
}else if(j==1){
document.write('<div class="right">');
document.write('<h2 class="smallTitle">');
document.write(arr[i][j]);
document.write('</h2>');

}else{
document.write('<p class="smallTheme">');
document.write(arr[i][j]);
document.write('</p>');
}
}

document.write('</div>');
}

11.09学习心得

今天初步学了javascript有关的基础概念，认识了js中各种数据类型，。

使用循环和document.write()方法，构建页面。

document.write('<img src="arr[i][j]">')
//没有写入图片，而是将arr[i][j]作为字符串，作为图片地址去查找