前端学习之《JavaScript DOM 编程艺术》读书笔记（4）

最新推荐文章于 2024-03-24 20:24:10 发布

佳慧在路上

最新推荐文章于 2024-03-24 20:24:10 发布

阅读量669

点赞数

分类专栏：读书笔记新手上路之网页前端学习编程语言文章标签： javascript 读书笔记编程 dom 前端

本文链接：https://blog.csdn.net/liujiahuiUSTB/article/details/51211477

版权

新手上路之网页前端学习同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

编程语言

5 篇文章 0 订阅

订阅专栏

读书笔记

2 篇文章 0 订阅

订阅专栏

JavaScript作为一种解释型语言。

1.它不需要声明变量和变量的类型。

var age=”thirty”;age=33; age=true；age=1.99999；
这都是可以允许的；并且var甚至可以省略掉，它大多是为了代码易于阅读才有的，在函数中，var声明的变量是局部变量，没有声明的是全局

变量；双引号和单引号都可以放在字符型的外面；变量和其他元素的名字区分大小写

2.数组：Array

var beatles=Array();
填充数组时同1，不过，数组的下标可以用字符串来表示！
比如beatles[“name”]=”John”;
编程规范。变量用小写，单词间用下划线。函数第一个字母小写，之后的单词第一个大写，不用下划线。

3.它同其他语言一样，有顺序，循环，选择等语句，和同Java差不多一样的操作符。

4.对象

一种数据类型。它是自我包含的数据集合。包含在对象里的数据可以通过两种形式访问——属性和方法。

5.DOM：

document object model。文档对象模型。
JavaScript里有三种对象
1.用户定义对象
2.内建对象：内建在JavaScript语言里，如date，math。
3.宿主对象：由浏览器提供，比如 document对象。
model 模型，更像map的意思。
在这个概念中，node——节点，很重要。

6.举例介绍DOM提供的四种方法。

getElementById（）
getElementByTagName（）
getAttribute（）
setAttribute（）

7.举例介绍DOM提供的五种属性。

childNodes
nodeType
nodeValue
firstChild
lastChild
对几个属性和方法的练习
实现点击图片超链接之后，图片替换掉占位符图片。图片title替换掉图片下方的图片标题。

<!doctype html>
<html>
<head>
<script type="text/javascript" src="Showpic.js"></script>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<h1>What to Buy</h1>
<p title="a gentle">Don't forget to buy this stuff.</p>
<ul id="purchase">
  <li><a href="image/pic1.jpg" onclick="showPic(this);return false;" title="A telephone">Atitle dsj dsjkdsof s</a></li>
  <li><a href="image/pic2.jpg" onclick="showPic(this);return false;" title="A board">Cheese.</a></li>
  <li><a href="image/pic3.jpg" onclick="showPic(this);return false;" title="A box">MIlk</a></li>
</ul>
<img id="place" src="image/pic4.jpg"/>
<p id="description">choose an image</p>
</body>
</html>

// JavaScript Document——Showpic.js
function showPic(whichpic){
    var source=whichpic.getAttribute("href");
    var place=document.getElementById("place");
    place.setAttribute("src",source);
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
}