Create a new HTML file in the html directory, i.e. yourname.html
We will create a link to the page in index.html: "Alexa's Page"
Add head and body elements to the page (copy head from main page, change title)
You can put javaScript directly in your page, but best practice tends to be to put it in a separate file
So, create a file with a .js extension and save it in the 'scripts' directory
Put a link to your .js file just before the body closing tag (see source for this page for syntax)
You can test if your .js file is loading by adding an alert line to it, i.e. alert("some text"). If the .js is loaded/working the alert will fire when the page loads
Add html to the .html page and javaScript to the .js page, add, commit and push to GitHub for testing your code
If desired you can also add a css style page to the styles directory, this file should have a .css extension
Using JavaScript:
JavaScript is a scripting language originally designed for adding coding elements to web pages
It is mostly used in conjunction with html and css, though its use has expanded rapidly into other areas
All modern browsers have a built-in JavaScript engine, so no local instalation is required, just a web server to show your pages
JavaScript syntax is similar to but not identical with Java: Java Syntax Wiki
Lines of code are terminated by semicolons (actually sometimes optional, but recommended for clarity), braces/curly brackets deliniate blocks of code
Variables are not typed, can be declared with keyword var, initial assignment of value is not requried, scoping is similar to Java
Typically code is event driven, i.e. responds to mouse clicks/key strokes, i.e. myButton.onclick = function() { 'do something' }
In order to interact with html elements, jS vars must be linked to the desired element(s)
One way to do that is with a querySelector function, which you can see on the main.js page
This can get cumbersome, especially in complex pages with many dynamic elements. The jQuery library was developed to simplify this process (see below).
Linking js variables to html objects using jQuery:
jQuery statement begin with a $ followed by the html element in parens:
For example: $("#myButton")
The preceeding '#' indicates an id supplied in the html code
The identifier is followed by a period ('dot operator') and a function name and parameters:
For example: $("#myButton").html('new button label')
That's all you need to link the elements, though of course there are many ways to specify html objects
and many kinds and forms of functions that can be linked to.
