JavaScript Simple Application

JavaScript Simple Application

A: Introduction

This note is a summary and focus on the content of chapter 4th of the JavaScript authoritative guide. Not reproduce the book instance. Most of the examples in the book are on GitHub and are interested in reading the book or GitHub code. The GitHub address is placed in the JavaScript directory.

II: JavaScript Application steps

1. Writing JavaScript scripts

2. Reference in the page:

A) JavaScript-related content can be placed directly on the page using the <script> tag.

b) The script can be placed in one or more files with the end of JS file, in the need to use the page to introduce.

Three: Case brief

When there are multiple links in the Web page, when no links are clicked, the display location below the page displays a default picture and default description, replaces the default picture of the location shown below with a link-directed image, and displays the link's description at the specified location when a specific link is clicked.

Four: example implementation key points

1. Get the Herf and title properties of the A link.

2. Add a click event for all links.

3. Block link default behavior.

2. Modify the text content within the SRC and description tags of the default picture label.

Five: Related methods and solutions

1. Block a default behavior:

<li><a onclick= "switchpicture (this); return false "href=". /picture/chenhong.jpg "title=" Chen Hong ">chen hong</a></li>

2. Related methods

function Switchpicture (whichpicture) {var Source = Whichpicture.href;var placeholder = document.getElementById (' Placeholder ');p laceholder.setattribute (' src ', source);d Ocument.getelementbyid (' description '). Firstchild.nodevalue = Whichpicture.getattribute (' title ');}

VI: Supplement

Effect:

Showpicture.js:

function Switchpicture (whichpicture) {var Source = Whichpicture.href;var placeholder = document.getElementById (' Placeholder ');p laceholder.setattribute (' src ', source);d Ocument.getelementbyid (' description '). Firstchild.nodevalue = Whichpicture.getattribute (' title ');} /* Function Countbodychildren () {Alert (document.getElementsByTagName (' body ') [0].childnodes.length);} window.onload = countbodychildren;*/

Showpicture.html:

<! DOCTYPE html>
SHOWPICTURE.CSS:

Body {font-family: "Helvetica", "Arial", Serif;color: #333; Background-color: #ccc; margin:1em 10%;} h1 {color: #333; background-color:transparent;} A {color: #c60; background-color:transparent;font-weight:bold;text-decoration:none;} UL {padding:0;} Li {float:left;padding:1em;list-style:none;} img {display:block;clear:both;}


JavaScript Simple Application