Chapter 1: Getting Acquainted with JavaScript

Web design and development have come a long way since the evolution of the HTML language, but HTML still could not do everything in one shot, so the inventions of external scripts like CSS, JavaScript, Jquery, and PHP came along and made the web explode with interactivity. These scripts make it possible to have really cool navigational bars, roll-over menus and buttons, and the coolest feature of Ajax combined with JavaScript can create easy to use map navigation.

Today we will be focusing on the power of JavaScript and teach you all the necessary tools for your everyday web projects and to make your code run as smoothly as possible from start to finish.

Thanks for your interest and I look forward to joining you on this journey and that this will help you out in your own projects. When your finished with the tutorial or have any comments along the way, you can leave your comments and or thoughts in my CONTACT page.

What is JavaScript?

JavaScript is the programing language used to make your web pages more interactive than your average static image based websites. If your not a programmer, don't fret because there are many resources out there for gathering scripts that you can copy directly into your site. To make things easier for you, we have included all the scripts from our site www.javascriptworld.com, also included are notes, addenda, and updates.

The Misconception of JavaScript vs Java

The misconception that some people still think JavaScript and Java are the same, but in reality they are actually two very different languages all together. JavaScript originally derived from the old language called LiveScript through Netscape Navigator and later renamed to JavaScript when it came out in 1995 by Brendan Eich who came up with the language. This language was meant for interactivity between the user and the browser. Java on the other hand was designed to be purely a programing language to build applications for computers like C++ and Linux.

What JavaScript Can Do

JavaScript has many uses when it comes to the interface for the user which allows for a smooth path for the user to travel on. This is known as an active user interface which means that the user activates parts of the page by moving the mouse over different areas. You have probably experienced this many times when viewing a page and it's called a rollover. This rollover feature is great when you want to catch the user's interest.

User feedback is another important interactivity such as filling out forms or just leaving a simple comment in a comment box, which can later be saved on a server or your own computer, this is known as CGI (Common Gateway Interface)which we will learn about later, but for now you should know that javascript can make filling out forms easier and that it can be saved for later use. Besides forms, it can also be used to make calculations, and be able to validate the information the user puts so that the process is clear.

JavaScript also allows you to create pop-up windows as a message to the user, clocks to keep track of events, calendars for keeping track of important date information, and finally JavaScript can also be used to build HTML pages on the fly, and Web-based applications.

What JavaScript Can't Do

You should know that JavaScript is a client-side language, which means that it can only perform it's actions using your machine and not the server. The main reason for this is to protect you from outside sources on the web.

        • JavaScript does not allow for writing files on a server machine. 
        The reason you would need to do this is for page-hit counts, and forms
        filled out. To save this kind of information outside of your machine, 
        you would use a CGI server (provider with good security features) which then 
        would use written programs such as PHP, Perl, and Java.
        
        • JavaScript can not close a window that has not been opened in
        the first place. This is to protect you from having a website take 
        over your browser and closing your windows.
        
        • JavaScript can not read an open page from another server, because a webpage
        can't view the information about what the user doing.

What is Ajax?

Ajax is a cool and useful feature because it's the way you make interactive Web applications. The best example to give for this is imagine your ready to go out and dine somewhere nice. Well your first instinct might be to go on your computer and search for the nearest or best restaurant in the area for that special occasion. This search would most likely take you to google maps where you can interact with the map by zooming in, panning around, and linking to the company's website to view their menu. All of these features uses this Ajax with JavaScript and makes life so much easier and quicker. Back in the painful slow web days, you would have to click on a + or - to zoom in and out, and sometimes have to wait till the whole page refreshes just to see the new result. Ajax really fixed this issue and now you can apply this to your own pages.

Ajax stands for Asynchronous JavaScript and XML, and was created by Jesse James Garrett in 2005, a Web developer and author. Ajax is really a small part in a multiple use of other technolgies which all work together to give you this cool experience. Here are some of those members:

        • HTML
        
        • CSS (Casscading Style Sheets)
        
        • The DOM (Document Object Model) accessed using JavaScript

Client-side vs. Server-side

What does Client-side vs. Server-side mean? Well simply put; A Client-side refers to the actual work process taking place on your computer and not on a server. A Server-side refers that the work process takes place out-side of your computer such a server provider that is hosting your site.

The Snap-Together Language

The best way to understand the JavaScript language is that it's an object-oriented language which means that it has parts linked to other parts that make it work as a whole. Below I will go into detail on each of these parts and their functions using the charts below to illustrate more clearly.

Objects:

JavaScript uses an Object based language which is your starting point from which browser reads, such as Buttons, Forms, Windows, and Elements. This would be equivalent to any ordinary objects such as a bicycle, car, or house. If you want to have more than one bike, or car, then you need to assign them with a unique name so that you can tell them apart. This is the same with your objects too so that you can refer to them later on in your scripts.

Properties:

Now that you have give your objects unique names, now it's time to give them descriptions known as Properties. This would also be like describing the individual parts to a bike like a bike has handle bars, gears, seat, and so on. Your Objects can also have objects with-in objects with even their own properties known as sub-objects.

Methods:

Methods are what the objects can do as a result by the user. For instance a person gets on a bike and starts to peddle, so that bike is now in motion. The same can be said about a button which click(), windows open(), and Text can be selected(). The parentheses represent that this is a method, and not a property.

Handling Events

Event handling is the manual actions the user does while exploring your web page. These events include filling out forms, moving over images, and clicking on buttons. Like a person riding a bike can ring the bell, apply the brakes, or change gears, all while in motion.

Event Handlers

Event	What it handles
onabort	The user aborted loading the page
onblur	The user left the object
onchange	The user changed the object
onclick	The user clicked an object
onerror	The script encountered an error
onfocus	The user made an object active
onload	The object finished loading
onmouseover	The cursor moved over an object
onmouseout	The cursor moved off an object
onselect	The user selected the contents of an object
onsubmit	The user submitted a form
onunload	The user left the page

Links to examples of what event handlers can do:

View a Keyboard Events Chart

View a Mouse Click Events Chart

View a Mouse Move Events Chart

View a Form and Field Events Chart

Values and Variables

JavaScript has information that need values assigned to them, these values include numbers, and string of characters such as words inclosed with quotes. The chart below shows other value types that can be used.

Variables also use values and look something like this: myName and is assigned the string "Michael". If you want to write it another way, you could write it like this too: myName = "Michael". The equal sign in this scenario can be read as "is set to." This is basically saying that myName now has a value "Michael".

Note: JavaScript is case sensitive and that it will see myname, myName, and MyName differently.

Note: Variable names can not have any spaces or any other punctuations, and start with any numbers. Also there are pre-reserved words used by JavaScript for specific tasks

I have included a link with these words to prevent you from having to make rerevisions to your coding. ⇒ JavaScript Reserved Words

Value Types

Type	Description	Example
Number	Any numeric value	3.141592654
String	Characters inside quote marks	"Hello, world"
Boolean	True or False	True
Null	Empty and meaningless
Object	Any value associated with the object
Function	Value returned by a function

Operators

Operators are symbols that work with variables and use the familiar arithmetics like the +, -, x, y etc.

Note: While both x++ and ++x add one to x, they are not identical; the former increments x after the assignment is complete, and the latter before. For example, if x is 5, y=x++ results in y set to 5 and x set to 6, while y=++x results in both x and y set to 6. The operator --(minus sign) works similarly.

Note: If you mix numeric and string values when adding two values together, the result is a string. For example, "dog" + 7 results in "dog7".

Operators	What it does
x + y (Numeric)	Adds x and y together
x + y (String)	The motion in which the computer communiactes with the server
x - y	Subtracts y from x
x * y	Multiplies x and y together
x / y	Divides x by y
x % y	Modulus of x and y (i.e., the remainder when x is divided by y)
x++, --x	Subtracts one from x (same as x= x + 1
-x	Reverses the sign on x

Assignments and Comparisons

Assignments