Learning JavaScript Basics using Visual Studio 2010 and ASP.NET 4.0

This is Ajax Tutorials, section for learning JavaScript, since AJAX is a method or technique of JavaScript, it is important to learn the very basics of JavaScript and begin to understand them in order to work with AJAX.

Welcome to the world of JavaScript. In this chapter we are going to learn some basic concepts of JavaScript. Here we will explore the following.

• What is JavaScript
• Use of JavaScript
• Internal and External JavaScript
• document.getElementById
• Statements
• Code
• Blocks
• Comments

What is JavaScript?

• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
• Everyone can use JavaScript without purchasing a license
What can a JavaScript do?
• JavaScript gives HTML designers a programming tool – HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small “snippets” of code into their HTML pages
• JavaScript can put dynamic text into an HTML page – A JavaScript statement like this: document.write(“< h1 >” + name + “< /h1 >”) can write a variable text into an HTML page
• JavaScript can react to events – A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
• JavaScript can read and write HTML elements – A JavaScript can read and change the content of an HTML element
• JavaScript can be used to validate data – A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
• JavaScript can be used to detect the visitor’s browser – A JavaScript can be used to detect the visitor’s browser, and – depending on the browser – load another page specifically designed for that browser
• JavaScript can be used to create cookies – A JavaScript can be used to store and retrieve information on the visitor’s computer.

What You Need
Microsoft Visual Studio 2010 or Visual Developer.
A sense of humor.
You should know how to use HTML and be able to edit your HTML documents. If you want to learn HTML please visit our good friends at HTML Atoms.
You will need to have a web browser that supports JavaScript. Most modern browsers support JavaScript. We recommend you have the latest browser installed on your computer, IE9 , Google Chrome, Mozilla Firefox.
Some Basics

To get started with JavaScript, you will want to be able to see the tag that will set a script apart from the HTML. The tags used to begin and end a script are the < SCRIPT > and < /SCRIPT > tags. The opening tag should appear like this:

The language=”JavaScript” command is there so the browser can tell the code that follows is in JavaScript and not another scripting language, such as VBScript. The javascript code will follow this tag, and end with the tag:

You can have as many < SCRIPT > tags as you need throughout the body of your HTML document, just as though it were a normal tag. Just remember to close each tag before you go on! Also, if you are going to use JavaScript functions (we will get to these later on) , you will need to place your functions inside the < HEAD > < /HEAD > tags of your document. This way, your functions are loaded before the page begins to display, and you won’t see all kinds of JavaScript errors. Here is an example:

Now, there is still one last thing you should see before we begin writing scripts. Since there are older browsers being used out there, they do not recognize the < SCRIPT > tag. Rather than performing your javascript, they will display the text of your script as though you meant for it to be a few lines of text on the screen. To get around this problem, you have to trick the browser into ignoring the text within the < SCRIPT > tag. This is done by using an HTML comment. The older browsers will ignore the text inside the comments, but a JavaScript capable browser will go ahead and perform your script. Here is how to do it:

Using an External JavaScript

JavaScript can also be placed in external files. External JavaScript files often contains code to be used on several different web pages. External JavaScript files have the file extension .js.

Note: External script cannot contain the < script >< /script > tags!. To use an external script, point to the .js file in the “src” attribute of the < script > tag:
Eg:

Writing to The HTML Document(document.getElementById)

To manipulate HTML elements JavaScript uses the DOM method getElementById(). This method access the element with the specified id. The example below writes the current date into an existing < p > element:

JavaScript is Case Sensitive

Unlike HTML, JavaScript is case sensitive – therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions.
JavaScript Statements

A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do.

This JavaScript statement tells the browser to write “Hello Student” to the web page:

It is normal to add a semicolon at the end of each executable statement. The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. Using semicolons makes it possible to write multiple statements on one line.

JavaScript Code

JavaScript code is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they are written. This example will write a heading and two paragraphs to a web page:

JavaScript Blocks

JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and ends with a right curly bracket}.The purpose of a block is to make the sequence of statements execute together. Normally a block is used to group statements together in a function or in a condition (where a group of statements should be executed if a condition is met).

Comments

Comments can be added to explain the JavaScript, or to make the code more readable. Single line comments start with //. Multi line comments start with /* and end with */.

Comment is used to prevent the execution of a code block (can be suitable for debugging).
————————————————————————————

And that about covers the basics for JavaScript, please check out our following beginners tutorials on Functions, Loops, Events, JavaScript Objects and Variables and Operators.

Download Source Files