This is my javascript tutorial, we will go briefly into the Document Object Model.
If you want to learn more about changing elements inside of the DOM go to w3c.org, we will not go into all of the different uses of javascript. This is designed to give you a very basic understanding of how javascript works. There is too much to pack into a two web pages.
if - only executes if a specific condition is true
if..else - executes if a specific condition is true, if its not then it executes the next block of code
if..else if..else - executes if a specific condition is true, if it's not then it checks the next statement and executes if that condition is true, if it is not then it executes the last block of code
switch - gives options to the user to execute a specifec block of code. Almost like a choose your own adventure book
Functions
function anyNameHere(){} - used to declare a function
Loops
for - executes a specific, defined number of times
while - executes while a specific condition is not true
Events
onMouseOver - does a specified action when the cursor is over an object
onMouseOut - does a specified action when the cursor is moved from an object
onFocus, onChange, onBlur - used to validate user data inside of a form when the cursor is moved
onSubmit - used to validate form fields before submission
String Objects
length - returns the length of a string to a function
anchor() - creates an html anchor
big() - creates text in a big font
blink() - creates blinking text
bold() - displays text in a bold font
charAt() - returns text in a specific location
concat() - concatenates two strings together
split() - splits a string into an array of strings
substr() - extracts specific number of characters in a string from a specified starting position
toLowerCase() - displays specified text in lower case
toUpperCase() - displays specified text in upper case
valueOf() - returns the primitive value of a string
Date Object
date() - specifies or sets a specific date
DOM Objects
document - represents the document of the web page
image - represents a documents image
form - represents a documents form
button - represents a button on the web page
anchor - represents an anchor tag on the web page
frame - represents a frame on the web page
frameset - represents a frameset tag
iframe - represents an iframe
input button - represents a form button
input checkbox - represents a forms checkbox
input file - represents a file upload option
input hidden - represents a hidden object
input password - represents a password box in a form
First to create a script you need to add the following line of code to the head section like so
<html>
<head>
<script language="javascript">
This is where the actual code goes
</script>
</head>
Let's start by writting simple text to the screen
Open your text editor, or crimson editor, create a new document and save it as "script.html"
The basic structure(syntax/rules) to write text to the screen are as follows:
<html>
<head>
<script language="javascript"> document.write("This was written in javascript");
</script>
</head>
<body>
</body>
</html>
Notice that the write command is followed by (" and ends with the opposite ")
this is essential for all write commands.
Note: All javascript commands must end with a semi-colon!
Now we will learn how to create functions
Let's see what a function looks like, open the previous page we created if it's not already open. Change the document to look like the following example.
<html>
<head>
<script language="javascript"> function writeText()
{
document.write("This was written in javascript");
}
</script>
</head>
<body>
</body>
</html>
Notice that the function must go in between the script tags in the head section of the document. All function declarations must start with the word function followed by the name you want to use for the function to later access it.
After the name comes the opening "(" and closing ")", this tells the site that this is the end of the function name. Then it must have an opening "{" then the javascript code, followed by an ending "}".
NOTE:The code that was written on the web page before is gone because we have not accessed the function!
Now that we know how to declare a function, let's move on!
Now we will create a simple alert box and access the function
Start by adding the following code to the document:
<html>
<head>
<script language="javascript">
function writeText()
{
document.write("This was written in javascript");
}
function alertBx()
{
alert("This is an alert box");
}
</script>
</head>
<body> <input type="button" value="click me" onclick="alertBx();" />
</body>
</html>
Click this button to see what it looks like
Notice that the function is accessed by calling it from the "onclick" command inside of the button.
There are many ways to access functions and we will not go into them all in this tutorial. The function is accessed by using the function name inside of quotes as follows "alertBx();" also notice that the function call must end with a semi colon.
The alert box is created by using the alert command followed by "(" the text you want to display goes inside of here, then it must be followed by an ending ")" and then a semi colon.
This example can also be used to call the writeText function which we will go into later in this tutorial.
Now that we know how to access functions let's move on.
Click this link to go to part two of this tutorial: Part 2
