Calvin (Deutschbein)
Week 11
Cloud
We don't need to be JS pros, but we do need to be aware of JS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>
This is directly from the living standard and uses identation except on inline links.
HTML is a mark-up language. It was meant to:
It was not meant to:
Consider the following HTML snippet
Are <p> and <strong> the same kind of thing?
Style plays by its own rules.
That is: Do we really need n ways to to express a concept as simple as bold?
Style attributes and elements are written in CSS, or "Cascading Style Sheets"
When we write CSS inside HTML:
It is most common to write CSS separately, in a .css file.
Simply reference the relevant stylesheet using the following in the HTML head:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Normal</p>
<p class="invert">Invert</p>
<p id="fancy">Fancy</p>
<p id="both">Both</p>
</body>
</html>
p { background: blue; color: white; }
.invert, #both { background: white; color: blue; }
#fancy, #both { font-style: italics; }
Usually the names are "index.html" and "styles.css"
p {
background: blue;
color: white;
}
.invert, #both {
background: white;
color: blue;
}
#fancy, #both {
font-style: italics;
}
This is the "hyper" in HTML, as we are now linking pages.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This page is just a demo.</p>
</body>
</html>
|
styles.css
p
{
background: blue;
color: white;
}
|
They just have to be in the same directory.
$ ls -al *.html *.css
-rw-r--r-- 1 cd-desk 197121 161 Jun 20 11:05 index.html
-rw-r--r-- 1 cd-desk 197121 47 Jun 20 11:06 styles.css
user@DESKTOP-THMS2PJ:~$ curl https://willamette.edu/ 2>/dev/null| wc
647 2677 46650
user@DESKTOP-THMS2PJ:~$ curl https://willamette.edu/css/dist/style.css 2>/dev/null | wc
9022 28518 292022
What is that bash command doing?
All of HTML/CSS gives static styling.
|
HTML is a
|
CSS is a
|
<script>
<script>alert('Hello, world!');</script>
Let's hear it for JavaScript, folks.
<button onclick="SomeFunc()" style="background:white;color:black;font-size:40px">Push for alert!</button>
*In addition to not being its own language, it also is its own language (Node), but more on that latter.
<script type="text/javascript">
function SendAlert(){
alert('Hello World');
}
</script>
<script type="text/javascript">
function SendAlert() {
alert('Hello World');
}
</script>
<button onclick="SendAlert()" style="background:white;color:black;font;font-size:40px">Push for alert!</button>
This may require some debugging with browser permissions - it is a pop-up after all!
Once this is working, experiment more. Does JavaScript work on Github pages?
JavaScript is a full-featured language, with the associated benefits and costs
JavaScript and Java have no relation. The language's actual name is ECMAScript.
JavaScript has many useful keywords.
var declares a variable. let and const are variations.var is old, and bad in a complicated way. Don't worry about it.
const makes a constant - write all your code with constants initially.
JavaScript has many useful keywords.
const to a let if and only if you most update the value of the variable.
<script type="text/javascript">
function SendAlert() {
const greeting = 'Hello World';
alert(greeting);
}
</script>
JavaScript has many useful keywords.
if and for behave "as expected", but use C/C++/Java syntax (not R/Python)
if with a condition in parenthesis and a code block in curly braces.
function SendAlert() {
let greeting = 'Hello World';
if (navigator.userAgent.indexOf("Firefox") != -1) {
let greeting = 'You have good taste.';
}
alert(greeting);
}
JavaScript has many useful keywords.
if with elsefunction SendAlert() {
let greeting = 'Whatever I guess.';
if (navigator.userAgent.indexOf("Firefox")!=-1) {
greeting = 'You have good taste.';
} else if (navigator.userAgent.indexOf("MSIE")!=-1) {
greeting = 'Get Firefox.';
} else {
;
}
alert(greeting);
}
JavaScript has many useful keywords.
for uses, say traditional "for" instead of R/Python "for each".letlet text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "\n";
}
alert(text);Note we get to use either single or double quotes on strings.
JavaScript has many useful keywords.
function creates a function that may be called by name.
def and R function
return
function triple(n) {
return 3 * n;
}
Note we get to use R/Python/C/Java etc. style arithmetic.
null and undefined for case and error handling.
// That is, C++-style single-line commentsWe can use JavaScript to create dark modes
I like cyan on black.
.dark-mode {
background-color: black;
color: #00ffff;
}
document.body.classListfunction toggler() {
document.body.classList.toggle("dark-mode");
}
.dark-mode {
background-color: black;
color: #00ffff;
}
button element with an onclick attribute.
Recall
function toggler() {
document.body.classList.toggle("dark-mode");
}
.dark-mode {
background-color: black;
color: #00ffff;
}
See the example.
See the example.
I see JavaScript "embedded" much more than CSS
But there's a lot of .js libraries so we need to practice linking.
<script type="text/javascript" src="scripts.js">
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<p>Oh I'll need a button won't I?</p>
</body>
</html>
|
styles.css
.dark {
/* I like cyan and black */
background-color: black;
color: #00ffff;
}
scripts.js function toggler() {
// using a const to linebreak
const bd = document.body;
bd.classList.toggle("dark");
}
|
They just have to be in the same directory.
$ ls -al *.html *.css *.js
-rw-r--r-- 1 cd-desk 197121 337 Jun 20 13:57 index.html
-rw-r--r-- 1 cd-desk 197121 97 Jun 20 13:56 scripts.js
-rw-r--r-- 1 cd-desk 197121 55 Jun 20 13:55 styles.css
See an example.
As time allows.