Skip to content

Commit 0520e52

Browse files
csemrmcsemrm
committed
class 4
1 parent 5951e21 commit 0520e52

File tree

5 files changed

+450
-0
lines changed

5 files changed

+450
-0
lines changed

‎class 4/2.1.html

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title> Program flow Implementation </title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<script type="text/javascript">
9+
10+
// 0-1000//
11+
12+
// 0,1,2,3,4,5,6---1000 // i++ = i=i+
13+
14+
window.onload = function () {
15+
max = 10; // 9< 10 = true;
16+
for (var i = 0; i < max; i = i + 2) {
17+
18+
19+
const li = document.createElement('li');
20+
li.textContent = 'Item ' + i;
21+
document.getElementById('list').appendChild(li);
22+
}
23+
24+
25+
26+
27+
28+
const myarray = ['Alabama', 'Alaska', 'American Samoa'];//, 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Federated States of Micronesia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
29+
30+
i = i - 1; // first iter = i = 2-1;
31+
// i ++ ;
32+
// i -- ;
33+
// i = i+5;
34+
35+
for (var i = 2; i >= 0; i--) {
36+
li = document.createElement('li');
37+
li.textContent = myarray[i];
38+
document.getElementById('list_array').appendChild(li);
39+
}
40+
41+
const arrayAss = {
42+
'AL': 'Alabama',
43+
'AK': 'Alaska',
44+
'AZ': 'Arizona',
45+
'AR': 'Arkansas',
46+
'CA': 'California',
47+
'CO': 'Colorado',
48+
'CT': 'Connecticut',
49+
};
50+
for (key in arrayAss) { // for ..in
51+
li = document.createElement('li');
52+
li.textContent = key + ' continue => ' + arrayAss[key];
53+
54+
if (key == 'CA'){
55+
continue;
56+
}
57+
document.getElementById('list_obj').appendChild(li);
58+
59+
}
60+
61+
62+
63+
const data = [[1, 2, 3], [1, 3, 4], [4, 5, 6]];
64+
data.forEach((student) => {
65+
student.forEach((data) => {
66+
console.log(data);
67+
});
68+
});
69+
70+
for (var i = 0; i < data.length; i++) {
71+
li = document.createElement('li');
72+
ul = document.createElement('ul');
73+
74+
for (var j = 0; j < data[i].length; j++) {
75+
// break;
76+
console.log(data[i][j]);
77+
li2 = document.createElement('li');
78+
li2.textContent = '[' + i + ']' + '[' + j + ']' + ' key => ' + data[i][j];
79+
ul.appendChild(li2);
80+
}
81+
li.appendChild(ul);
82+
83+
document.getElementById('multi_array').appendChild(li);
84+
85+
}
86+
87+
i = 0, max = 10;
88+
89+
while (true) {
90+
const li = document.createElement('li');
91+
li.textContent = ' while ' + i;
92+
document.getElementById('list').appendChild(li);
93+
i++;
94+
95+
if (i === 100) {
96+
break;
97+
}
98+
99+
}
100+
101+
102+
// do first and check later // do while loop
103+
i = 0;
104+
max = 10;
105+
do {
106+
107+
const li = document.createElement('li');
108+
li.textContent = 'do while ' + i;
109+
document.getElementById('list').appendChild(li);
110+
i++;
111+
112+
} while (i <= max);
113+
114+
115+
const length = 5;
116+
i = 0;
117+
while (i < length) {
118+
119+
console.log('while i: ' + i);
120+
j = 0;
121+
while (j < length) {
122+
123+
console.log('while i j: ' + i + ' j' + j);
124+
//break; continue;
125+
j++;
126+
}
127+
i++;
128+
129+
}
130+
}
131+
132+
133+
</script><!-- comment -->
134+
</head>
135+
<body>
136+
<h1>Program flow Implementation</h1>
137+
138+
<section>
139+
<header>
140+
This section is for the array.
141+
</header>
142+
<article>
143+
<h2> for loop with array </h2>
144+
<ul id="list"> </ul>
145+
146+
147+
148+
<h2> for loop with array </h2>
149+
<hr/>
150+
<ul id="list_array">
151+
</ul>
152+
153+
154+
155+
156+
<h2> for-in loop with object </h2>
157+
<hr/>
158+
<ul id="list_obj">
159+
160+
</ul>
161+
162+
<h2>multidimensional array javascript</h2>
163+
<ul id="multi_array">
164+
165+
</ul>
166+
</article>
167+
168+
<ul>
169+
<li> p1 </li>
170+
<li> p2 </li>
171+
<li> p3 </li>
172+
<li> p4 </li>
173+
<li> p5 </li>
174+
<li> p6 </li>
175+
</ul>
176+
</section>
177+
178+
</body>
179+
</html>

‎class 4/customevent.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<html>
2+
<head>
3+
<script>
4+
5+
6+
7+
myEvent = new CustomEvent(
8+
"bodyLoadAction",
9+
{
10+
detail: {
11+
description: "a description of the custom event",
12+
timeofevent: new Date(),
13+
eventcode: 20},
14+
bubbles: true,
15+
cancelable: true,
16+
name: 'milon'
17+
}
18+
);
19+
function customEventHandler() {
20+
console.log(window.event.detail);
21+
alert(window.event.detail.eventcode);
22+
}
23+
document.addEventListener("bodyLoadAction", customEventHandler);
24+
25+
function onH1ClickHandler() {
26+
document.dispatchEvent(myEvent);
27+
}
28+
29+
</script>
30+
</head>
31+
<body>
32+
<button onclick="onH1ClickHandler()">Program flow Implementation</button>
33+
34+
</body>
35+
</html>

‎class 4/drag_drop.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
.dropped {
6+
width: 50%;
7+
height: 50%;
8+
position: relative;
9+
top: 25%;
10+
left: 25%;
11+
background-color:black;
12+
}
13+
.over {
14+
transform: scale(1.1);
15+
}
16+
.bucket {
17+
width: 100px;
18+
height: 100px;
19+
margin: 10px 10px 10px 10px;
20+
position:absolute;
21+
}
22+
.chip {
23+
width:20px;
24+
height:20px;
25+
position:absolute;
26+
}
27+
div:first-of-type {
28+
background-color: red;
29+
}
30+
div:nth-of-type(2) {
31+
background-color: green;
32+
left:25%;
33+
}
34+
div:nth-of-type(3) {
35+
background-color: blue;
36+
left:50%;
37+
}
38+
#chip {
39+
background-color: black;
40+
width:50px;
41+
height:50px;
42+
}
43+
.begin {
44+
position:absolute;
45+
left: 150px;
46+
top: 150px;
47+
}
48+
</style>
49+
50+
51+
</head>
52+
<body>
53+
54+
55+
56+
<div id="bucket1" class="bucket"></div>
57+
<div id="bucket2" class="bucket"></div>
58+
<div id="bucket3" class="bucket"></div>
59+
<div id="chip" draggable="true" class="chip"></div>
60+
61+
<script type="text/javascript">
62+
63+
window.onload = function () {
64+
var chip = document.getElementById("chip");
65+
66+
chip.addEventListener("dragstart", function ()
67+
{
68+
window.event.dataTransfer.setData("Text", this.id);
69+
});
70+
71+
var b1 = document.getElementById("bucket3");
72+
73+
b1.addEventListener("dragenter", function () {
74+
b1.classList.add("over");
75+
window.event.returnValue = false;
76+
});
77+
78+
b1.addEventListener("dragleave", function () {
79+
b1.classList.remove("over");
80+
});
81+
b1.addEventListener("dragover", function () {
82+
window.event.returnValue = false;
83+
});
84+
b1.addEventListener("drop", function () {
85+
window.event.returnValue = false;
86+
var data = event.dataTransfer.getData("Text");
87+
var d = document.getElementById(data);
88+
d.classList.remove("begin");
89+
d.classList.add("dropped");
90+
this.appendChild(d);
91+
});
92+
}
93+
</script>
94+
</body>
95+
</html>

‎class 4/events.html

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<html>
2+
<head>
3+
<title>Program flow Implementation</title>
4+
<script>
5+
6+
7+
window.onload = function () {
8+
9+
10+
// alert(" this iswindow onload function ");
11+
// document.getElementById('form').addEventListener('submit', onFormSubmit);
12+
// document.getElementById('first_name').addEventListener('change', onInputChange);
13+
}
14+
function onFormSubmit(event) {
15+
event.preventDefault();
16+
17+
first_name = document.getElementById('first_name').value;
18+
19+
last_name = document.getElementById('last_name').value;
20+
email = document.getElementById('email').value;
21+
22+
// alert(first_name + ' ' + last_name + ' ' + email);
23+
24+
25+
// alert("form submit event called.");
26+
}
27+
function onInputChange(event) {
28+
console.log("input change event called.");
29+
}
30+
function onInputBlur(event) {
31+
console.log(event);
32+
}
33+
function removeevent() {
34+
document.getElementById('first_name').removeEventListener('change', onInputChange);
35+
}
36+
function onfocusevent() {
37+
/// alert('onfocusevent');
38+
}
39+
function onkeyupEvent(event) {
40+
console.log('onkeyupEvent '+event);
41+
// alert('onkeyupEvent');
42+
}
43+
function onfocusevent(){
44+
// alert('dd');
45+
}
46+
</script>
47+
</head>
48+
<body>
49+
<h1>Program flow Implementation</h1>
50+
<section>
51+
<form id="form" method="post">
52+
<div>
53+
<label for="first_name">First Name</label>
54+
<input id="first_name" onblur="onInputBlur(this.value)" value="" onfocus="onfocusevent()" onfocusin="onfocusinEvet()" onkeyup="onkeyupEvent(this)" />
55+
</div>
56+
<div>
57+
<label for="last_name">Last Name</label>
58+
<input id="last_name" name="last_name" type="text" />
59+
</div>
60+
<div>
61+
<label for="email">Email</label>
62+
<input id="email" name="email" type="email" />
63+
</div>
64+
<div>
65+
<label for="url">URL</label>
66+
<input id="url" name="url" type="url" />
67+
</div>
68+
<div>
69+
<label for="aRange">Range</label>
70+
<input id="aRange" type="range" max="200" min="0" value="0" onchange="onInputChange()" />
71+
</div>
72+
<div>
73+
<button type="reset">Reset</button>
74+
<button type="submit" >Submit </button>
75+
</div>
76+
</form>
77+
</section>
78+
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)