Now we will begin discussing JavaScript, a powerful client-side scripting language that forms the base for much of a website's interactivity. JavaScript has huge capabilities, but we will only go into some of them, which alone can make any website run as well as it looks (especially using Bootstrap’s helpful CSS classes). First, we will look at JavaScript’s basic syntax so as to understand how to use it.
JavaScript variables contain data, which can later be changed. Variables are defined using ‘var’ followed by a space, the variable name, an equal sign, and the value of the variable:
var myVar = “My first variable!”;
Variables can come in several types: ints, which consist of just a number after the equal sign (var myInt = 5;) ; strings, which consist of a section of text, which is signaled by quotes (see the first example); booleans, which are either ‘true’ or ‘false’ and are signaled by ‘true’ or ‘false’ without quotes (var myState = true;) ; arrays, signaled by brackets [] containing a list of the values (var array = [“first value”, 5, “second value”, true];); and objects, such as a function (var runThisLater = function() {
//do something
}, or maybe var object = {
value1: “something”,
value2: “something else”
}).
JavaScript can also select and dynamically change elements by selecting the id, class, or element type:
document.getElementById(“somePTag”).innerHTML += “<img src=‘whatchamacallit’>”;
//get this element, and add to its HTML content this string
var referenceVar = document.getElementById("somePTag");
referenceVar.innerHTML += "<img src='somewhere'>";
//We give the element an identifier, then use that identifier to affect the element
JavaScript can also use event listeners to detect when a certain event happens over an element and respond accordingly. Normally, these would be a mess, but jQuery makes it much easier:
referenceVar.on('click',function() {
alert("Ouch!");
})
JavaScript also has the ability to display alert messages, which prevent interaction with anything else until a button on them is clicked. Alerts can take 3 forms: alert, confirm, or prompt. An alert box contains only the specified text and an 'OK' button, which dismisses the alert when clicked. These should be used for such events as fatal errors, or for debug purposes. A confirm box behaves exactly like an alert box, but has two buttons; if 'OK' is pressed, the box returns true, but if 'cancel' is pressed, the box returns false. This is useful for required data and if statements. I use these in an if statement to ask the user whether to accept a private-chat request. Prompt boxes require the user to enter text in them. These can be used to ask the user to enter his password to stay logged in before he is rerouted back to the login page. alert("This is an alert box.\nIt is used to get the user's attention.");
//When entering the text displayed in the alert, use\n for a newline.
confirm("This is a confirm box.");
prompt("Enter your password");
Next, we will discuss JavaScript's conditional statements and comparative operators.
__RESOURCES__
http://www.minecaptain.com —My Website, which contains the archive of all previous posts
The blank PHP file —Build your page
Comments