class Kid {
// Constructor for initializing
// Kid properties
constructor(name, gender, age) {
this.name = name;
this.gender = gender;
this.age = age;
}
// Define instance methods
haveBirthday( ) {
this.age++;
}
toString( ) {
return `${this.name};${this.gender};${this.age}`;
}
}
// Test Kid class by creating a Kid object.
k = new Kid("Alice", "F", 11);
document.writeln(`${k.name} ${k.gender} ${k.age}<br>`);
document.writeln(`${k.toString( )} ${k}<br>`);
k.haveBirthday( );
document.writeln(k.age);
class Clock {
constructor(hr, min, sec) {
this.hr = hr;
this.min = min;
this.sec = sec;
}
tick( ) {
this.sec++;
if(this.sec == 60) {
this.sec = 0;
this.min++;
}
if(this.min == 60) {
this.min = 0;
this.hr++;
}
if(this.hr == 24) {
this.hr = 0;
}
}
toString( ) {
var h = this.hr.toString( ).padStart(2, "0");
var m = this.min.toString( ).padStart(2, "0");
var s = this.sec.toString( ).padStart(2, "0");
return `${h}:${m}:${s}`;
}
}
c = new Clock(20, 44, 9);
document.writeln(c + "<br>");
for(let i = 1; i <= 20000; i++) {
c.tick( );
}
document.writeln(c);
var lottoObject = new Lotto(30, 5);
lottoObject.selectBalls( );
document.writeln(lottoObject);
for(let i = 1; i <= 5; i++) {
document.writeln(lottoObject.getBall(i));
}
h1 p td li span
<body>
<div id="content">
<h1>Sample HTML Page</h1>
<p class="info">Lorum ipsum dolor sit amet.</p>
<p>Lorum ipsum dolor <a href="#">sit</a> amet.</p>
</div>
<div id="nav">
<ul>
<li><a href="#" class="intro">Item 1<a></li>
<li><a href="#">Item 2</li>
<li><a href="#">Item 3</li>
</ul>
</div>
<div id="footer">
Lorum ipsum dolor <a href="#">sit</a> amet.
</div>
</body>
Here are some CSS selectors:
li { color: blue; }
.intro { font-weight: bold; }
p.intro { color: red; }
a.intro { color: green; }
#nav { color: blue; }
li a { color: green; }
#nav a { color: red; }
#nav ul li a { color: green; }
* { margin: 0px; padding: 0px; }
div > em { color: blue; }
h2 + h3 { margin: -1em; }
img[src="small.gif"] { border: 1px solid #000000; }
p:first-line { font-weight: bold; }
p:first-letter { font-size: 200%; font-weight: bold; }
<body>
<h1>Planetary Outpost Status Summaries</h1>
<ol>
<li>Green Planet<br>
All is well.</li>
<li class="redtext">Red Planet<br>
All systems A-OK.</p>
</ol>
<h2>Number of Planets</h2>
<p id="para">3</p>
</body>
+--------- body ---------+
| / \ |
| / \ |
h1 ol h2 p
/ \
li li
body
h1
Planetary Outpost Status Summaries
ol
li
Green Planet<br>All is well.
li
Red Planet<br>All systems A-OK.
h2
Number of Planets
p
3
document.getElementById("123")
document.getElementsByTagName("input")
document.getElementsByClassName("redtext")
document.querySelector("li .redtext");
document.querySelectorAll("li .redtext");
innerHTML nodeName firstChild lastChild childNodes previousSibling nextSibling
element.attributeName = "HTMLAttributeValue"; element.style.styleName = "cssStyleValue";
document.createElement(element); document.removeChild(element); document.appendChild(element); document.replaceChild(oldElement, newElement);
<p id="output" />
var elements = document.getElementsByTagName("html");
var para = document.getElementById("output");
para.innerHTML = elements[0].nodeName;
var elements = document.getElementsByTagName("li");
var para = document.getElementById("output");
para.innerHTML = elements.length;
<body />
This is a test.