Lesson 1: Intro to Html.js.css:

Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
This tutorial is about JavaScript, and how JavaScript works with HTML and CSS.

We will be using the website
to do the heavy lifting . My job is to guide you thru w3schools Tutorials .
I may skip around a bit to get you going faster . But basically we will be using their Tutorials
Your job will be to go to the URLs (click on the Buttons) , read the information ,
And do the exercises , ie., click on the green " Try it yourself " button .
Also , you will need to " Create Account " and " Sign In " here: . Its free !
As I work with you , I will be using two email accounts , depending on which computer I am using at the time .
vmars@vmars.us and vmars316@live.com .
Also , Here are some fun games I have written in javascript










Lesson 2: Html Formatting of text:

Below is unformatted text:

JavaScript is the programming language of HTML and the Web. Programming makes computers do what you want them to do. JavaScript is easy to learn.

Below is same text , but formatted with <br> commands:

JavaScript is the programming language of HTML and the Web.
Programming makes computers do what you want them to do.
JavaScript is easy to learn.

This is how you tell html , here is some javascript code :

< script type='text/javascript' >

This is how you tell html that javascript code ends here:

< /script >


Lesson 3: my first .js code:

JavaScript Popup Boxes









Here is the .js code for the Buttons above:

<h3>Lesson 3: my first .js code:</h3>
<h4>JavaScript Popup Boxes</h4>
<button onclick="myFunction01()">myFunction01: alert</button>
<br><br><button onclick="myFunction02()">myFunction02: alert multi-lines</button>
<br><br><button onclick="myFunction03()">myFunction03: location</button>
<br><br><button onclick="myFunction04()">myFunction04: confirm</button>
<br><br><button onclick="myFunction05()">myFunction05: prompt</button>
<p id="name"></p>
<script type='text/javascript'>
function myFunction01() {
    alert("myFunction01: Hello! I am an alert box!");
	}

	function myFunction02() {
    alert("myFunction02:\n Hello! I am an alert box!");
}

function myFunction03() {
// a javascript way to go to a new URL address
    window.location = "http://www.w3schools.com/jsref/met_win_alert.asp"; 
}

function myFunction04() {
// a javascript way to go to a new URL address
var r = confirm("Press a button");
if (r == true) {
    x = "You pressed OK!";
} else {
    x = "You pressed Cancel!";
}	
alert(x)
}

function myFunction05() {
var person = prompt("Please enter your name , ie.", "Harry Potter");
if (person != null) {
    document.getElementById("name").innerHTML =
    "Hello " + person + "! How are you today?";
// OR
alert("Hello " + person + "! How are you today?")	
}

}
</script>

Homework: read these,




Lesson 4:

Assignment:

Review the lessons above (on this page) .

Create your own html page. In it make:
1) Make a 'prompt' that says " Enter a number from 1 to 5"
2) Check the number returned from the 'prompt'
     If it is less than 1
     show a 'prompt' that says "Number entered is less than 1 , Try Again!"
     If it is greater '>' than 5
     show a 'prompt' that says "Number entered is greater than 5 , Try Again!

User your knowledge gained so far , plus , your knowledge gained from Excel Macros writing to solve this game (=, +, - <, > ).

Below , is a template to get you started :

Some helps here : 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> myHtml5 Template </title>
<!--  file:///C:/Notepad++Portable/javascript-Ben/myHtml5-Template.html  -->
</head>
<body>

<!-- this is an html comment:  html code goes here: -->

<script type='text/javascript'>

// this is a javascript comment:  javascript code goes here: 

</script>

</body>
</html>