Skip to content

Commit d51a94a

Browse files
hannabeasiamhannabeasiam
authored
Merge pull request #3 from hannabeasiam/lesson09
Lesson09
2 parents 76cccaf + bcc8aad commit d51a94a

13 files changed

Lines changed: 255 additions & 0 deletions

‎lesson09/AppendingContent.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Appending Content</title>
6+
<script type="text/javascript">
7+
function AnswerWrong() {
8+
var txt = document.createElement('p');
9+
txt.innerHTML = 'Wrong answer!';
10+
txt.style.color = 'red';
11+
txt.setAttribute('class','wrong');
12+
window.document.body.appendChild(txt);
13+
}
14+
function AnswerRight() {
15+
var txt = 'RIGHT ANSWER!';
16+
var newtext = document.createTextNode(txt);
17+
newtext.id = 'newidname';
18+
window.document.body.appendChild(newtext);
19+
}
20+
function addImage() {
21+
var img = document.createElement('img');
22+
img.src = 'images/pic1.jpg';
23+
var imagePlace = document.getElementById('imageHere');
24+
imagePlace.appendChild(img);
25+
}
26+
function reloadPage() {
27+
window.location.reload();
28+
document.formButtons.button1.disabled = false;
29+
document.formButtons.button2.disabled = false;
30+
document.formButtons.button3.disabled = false;
31+
}
32+
</script>
33+
</head>
34+
<body id="body">
35+
<h2>CIW JavaScript Specialist</h2>
36+
<h3>Appending Content</h3>
37+
Question: How many little pigs had houses made of straw?<br>
38+
<form name="formButtons">
39+
<p><input type="button" name="button1" value="1 little pig" onClick="AnswerRight();this.disabled=true;"></p>
40+
<p><input type="button" name="button2" value="2 little pigs" onClick="AnswerWrong();this.disabled=true;"></p>
41+
<p><input type="button" name="button3" value="3 little pigs" onClick="AnswerWrong();this.disabled=true;"></p>
42+
<p><input type="button" value="Reload Page" onClick="reloadPage()"></p>
43+
<p><input type="button" value="Add image" onClick="addImage()"></p>
44+
<p id="imageHere"> </p>
45+
</form>
46+
</body>
47+
</html>

‎lesson09/AppendingScript.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Appending Content JavaScript</title>
6+
<script type="text/javascript">
7+
function loadScript(){
8+
var scriptTag = document.createElement('script');
9+
scriptTag.src = 'hello.js';
10+
var src = document.getElementById("scriptHere");
11+
src.appendChild(scriptTag);
12+
}
13+
</script>
14+
</head>
15+
<body onload="loadScript()" id="body">
16+
<p id="scriptHere"></p>
17+
</body>
18+
</html>
19+
20+

‎lesson09/changeAttribute.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Change Attribute</title>
6+
<script type="text/javascript">
7+
8+
function getValues() {
9+
let div = null;
10+
if (div == null) {
11+
div = document.getElementById('SetDiv');
12+
}
13+
let theClass = div.getAttribute('class');
14+
alert('theClass='+theClass);
15+
//set attribute, add attribute class, value 'center'
16+
div.setAttribute('class','center');
17+
theClass = div.getAttribute('class');
18+
alert('theClass='+theClass);
19+
div.setAttribute('class','right');
20+
theClass = div.getAttribute('class');
21+
alert('theClass='+theClass);
22+
div.setAttribute('class','justify');
23+
theClass = div.getAttribute('class');
24+
alert('theClass='+theClass);
25+
div.removeAttribute('class');
26+
theClass = div.getAttribute('class');
27+
alert('theClass='+theClass);
28+
}
29+
</script>
30+
</head>
31+
<body>
32+
<h2>CIW JavaScript Specialist</h2>
33+
<h3>Change Attribute</h3>
34+
<div id="SetDiv" class="left">
35+
<p>What are the attributes of this div tag?</p>
36+
</div>
37+
<input type="button" value="Click Me!" onClick="getValues()">
38+
</body>
39+
</html>

‎lesson09/getElemenById.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Change URL</title>
6+
<script type="text/javascript">
7+
8+
function changeLink() {
9+
let changedLink = 0;
10+
if (changedLink == 0) {
11+
//get Element with ID 'ChangeURL' in HTML to assign value
12+
document.getElementById('ChangeURL').innerHTML = 'CIW Certified';
13+
document.getElementById('ChangeURL').href = 'http://ciwcertified.com';
14+
//we also can add attribute by using get Element ID
15+
document.getElementById('ChangeURL').target='_blank';
16+
changedLink++;
17+
console.log(changedLink);
18+
} else {
19+
document.getElementById('ChangeURL').innerHTML =
20+
'Microsoft';
21+
document.getElementById('ChangeURL').href =
22+
'http://microsoft.com';
23+
document.getElementById('ChangeURL').target='_blank';
24+
changedLink--;
25+
console.log(changedLink);
26+
}
27+
}
28+
</script>
29+
</head>
30+
<body>
31+
<h2>CIW JavaScript Specialist</h2>
32+
<h3>Change URL</h3>
33+
<a id="ChangeURL"
34+
href="http://www.microsoft.com">Microsoft</a><br>
35+
<input type="button" value="Change Link" onClick="changeLink()">
36+
</body>
37+
</html>

‎lesson09/getElementByClassName.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Check CSS class data</title>
6+
<script type="text/javascript">
7+
function getValues(objName) {
8+
let fieldArray = document.getElementsByClassName(objName);
9+
alert('Total objects with class \"input\" = ' + fieldArray.length);
10+
for (let i=0;i<fieldArray.length;i++) {
11+
alert((i+1)+' = '+fieldArray[i].innerHTML);
12+
};
13+
}
14+
</script>
15+
</head>
16+
<body>
17+
<h2>CIW JavaScript Specialist</h2>
18+
<h3>Check CSS class data</h3>
19+
<p class="input">First</p>
20+
<p class="input">Second</p>
21+
<p class="input">Third</p>
22+
<input type="button" value="Get elements with class input" onClick="getValues('input')">
23+
</body>
24+
</html>

‎lesson09/getElementByName.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Check named element data</title>
6+
<script type="text/javascript">
7+
//objName pass parameter
8+
function getValues(objName) {
9+
//get all Element Name with passed parameter objName, store as fieldArray
10+
let fieldArray = document.getElementsByName(objName);
11+
alert('Total objects with name \"txtField\" = ' + fieldArray.length);
12+
for (let i=0;i<fieldArray.length;i++) {
13+
alert(fieldArray[i].id+' = '+fieldArray[i].value);
14+
};
15+
}
16+
</script>
17+
</head>
18+
<body>
19+
<h2>CIW JavaScript Specialist</h2>
20+
<h3>Check named element data</h3>
21+
<input id="Text1" type="text" name="txtField" value="CIW"><br>
22+
<input id="Text2" type="text" name="txtField" value="CERTIFICATION"><br>
23+
<input id="Text3" type="text" name="txtField" value="RULES"><br>
24+
<!--get Value will pass parameter 'txtField'-->
25+
<input type="button" value="Get elements named txtField" onClick="getValues('txtField')">
26+
</body>
27+
</html>

‎lesson09/getElementByTagName.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Cool slide show</title>
6+
<script type="text/javascript">
7+
//var numslides = 0;
8+
//var currentslide = 0;
9+
//var slides = new Array();
10+
function StartSlideShow() {
11+
let numslides = 0;
12+
let currentslide = 0;
13+
let slides = new Array();
14+
//get all element Tag Name with img, and save under img
15+
let img = document.getElementsByTagName('img');
16+
console.log('img number : ' + img.length);
17+
//loop number of img
18+
for (let i=0;i<img.length;i++) {
19+
//assign array slides as array img array did not set img as array seperatley but define here
20+
slides[i] = img[i];
21+
if (numslides == 0) {
22+
//all img tag became array, change style.display as block, block makes display one img max in one section
23+
img[i].style.display = 'block';
24+
console.log('slides id: ' +slides[i]);
25+
} else {
26+
//if img is not starting from 0, display nothing
27+
img[i].style.display = 'none';
28+
}
29+
//in current img tag, once mouce is over img make pointer cursor
30+
img[i].style.cursor = 'pointer';
31+
//onclick event in current img, call NextSlide function
32+
img[i].onclick = NextSlide;
33+
//increment numslides
34+
numslides++;
35+
}
36+
function NextSlide() {
37+
slides[currentslide].style.display = 'none';
38+
currentslide++;
39+
console.log('currentslide: ' + currentslide);
40+
//if current slide is greater or equal then number of slide, set current slide as 0 again,
41+
//so make it recursive again
42+
if (currentslide >= numslides) currentslide = 0;
43+
slides[currentslide].style.display = 'block';
44+
}
45+
46+
}
47+
</script>
48+
</head>
49+
<!--instead of window.onload = StartSlideShow; call onload in HTML tag -->
50+
<body onload = "StartSlideShow()">
51+
<h2>CIW JavaScript Specialist</h2>
52+
<h3>Cool slide show</h3>
53+
<img class="slide" src="images/pic1.jpg" width="400" height="300" alt="First picture">
54+
<img class="slide" src="images/pic2.jpg" width="400" height="300" alt="Second picture">
55+
<img class="slide" src="images/pic3.jpg" width="400" height="300" alt="Third picture">
56+
<img class="slide" src="images/pic4.jpg" width="400" height="300" alt="Fourth picture">
57+
<img class="slide" src="images/pic5.jpg" width="400" height="300" alt="Fifth picture">
58+
<p>Click the image to advance the slides.</p>
59+
</body>
60+
</html>

‎lesson09/hello.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
alert('Helloooo!');

‎lesson09/images/pic1.jpg‎

8.24 KB
Loading

‎lesson09/images/pic2.jpg‎

8 KB
Loading

0 commit comments

Comments
 (0)