p41:
1.运算符:运算符也称为操作符,是用于实现赋值,比较和执行运算等功能的比较的符号
js中常用于运算符:算数运算符,递增递减运算符,比较运算符,逻辑运算符,赋值运算符
算数运算符:加减乘除以及取余
浮点数运算的时候会有问题:
console.log(0.1 + 0.2);//0.00000000000004
//数值太小转换为二进制再运算会产生错误
2.表达式:是由数字,运算符,变量等以能求得数值的有意义排列方法所得的组合
(是由数字,运算符,变量等组成的式子)
表达式最终都应该有一个结果,都会有一个返回值
3.递增和递减运算符:想要一个变量自己加一,
var num = 1;
num = num + 1;
console.log(num); //2 实现变量自己加一的效果
前置递增运算符:
var num = 1;
++num; //递增运算符 可以放在变量前面或者变量后面
console.log(num);//2
后置递增运算符:
var num = 20;
num++;
console.log(num);//后置递增,单独使用时与前置递增是一样的
后置递增:先返回原值,后自加1;先表达式返回原值,后面变量再自加一
前置递增:先自加,再返回值
4.例题:
var a = 10;
++a;//++a=11, a=11;
var b = ++a + 2; ++a 12
console.log(b);//14
var c = 10;
c++; //11
var d = c++ + 2; 11
console.log(d);//13
var e = 10;
var f = e++ + ++e; 1, e++ 10 e=11,++e=12 10+12
console.log(f);//22
大多数使用后置递增,并且代码单独占一行, 要么时num++,或者num--;
5.比较运算符:是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值,比如true或者false
console.log(3 >= 5);//返回false
我们程序里面的等于符号 是 == ,默认转换数据类型,会把字符串型的数据转换为数字型
===是全等于,代表不论什么都要相等,数据类型也要相等
=赋值,==判断(此处有隐式转换),===全等
+=完成加法和赋值:
var year = 2010;
var message = 'this year is';
message += year;
alert(message);
6.逻辑运算符
概念:逻辑运算符是用来进行
布尔值运算的运算符,其返回值也是布尔值,后面开发经常用于多个条件的判断
&&逻辑与 ||逻辑或 !逻辑非
function square(num) {
var total = num * num; //声明他是局部变量 只在函数中使用
return total;
}
var total = 50;
var number = square(20);//numbeu此时得到的就是函数中的tatal
alert(total);
<script>
var shopping = document.getElementsByTagName("p");//getElementsByTagName元素名
for (var i = 0; i < shopping.length; i++) {
var title_text = shopping[i].getAttribute("title");//getAttribute() 括号里面是 打算查询的属性的名字
if (title_text) {
shopping[i].setAttribute("title", "brand new title text");//setAttribute对属性节点的值做出修改
alert(shopping[i].getAttribute("title"))
};
}
</script>
今日学习DOM:
DOM的新属性:
childNodes
nodeType
nodeValue
firstChild
lastChild
案例:建立javascript图片库:
代码 :html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
<h1>This is some photos</h1>
<ul>
<li><a href="1.jpg" onclick="showPic(this); return false;" title="a friends">friends</a></li>
<li><a href="2.jpg" onclick="showPic(this); return false;" title="a cup">cups</a></li>
<li><a href="3.jpg" onclick="showPic(this); return false;" title="a milk">milk</a></li>
<li><a href="4.jpg" onclick="showPic(this); return false;" title="a people">people</a></li>
<li><a href="5.jpg" onclick="showPic(this); return false;" title="a cow">cow</a></li>
</ul>
<img id="placeholder" src="fc.jpg" alt="my image gallery">;
<p id="description">choose an image.</p>
</body>
</html>
js文件:
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
function countBodyChildren() {
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.nodeType);
}
window.onload = countBodyChildren;
学习了新属性。