JavaScript: Basics - beginners JavaScript tutorials
This page introduces the basics of JavaScript code constructs with examples.
A quick summary of what JavaScript tutorials you will find on this page.
Welcome to a fast track introduction to scripting a web page using JavaScript.
We start off with the traditional 'Hello World' tutorial and go onto building our first function. We quickly move onto how to utilize an external file as a library for storing reusable functions. We then start the process of creating reusable functions for our library. Then we have an example of collecting input from you the user and performing a calculation on that input: in this case to find an average of two numbers.
JavaScript code snippets listed by task and organised in a tutorial style each building on the previous example. New topics are introduced when required.
Traditional 'Hello World' tutorial. |
|
1. |
Writing text directly to the page. (Hello World.) The traditional first lesson in any JavaScript tutorial. Also shows how to include a single-line and a multi-line comments within the JavaScript code.
|
Building a simple JavaScript function. |
|
2. |
Writing text to the page by calling a function. Declaring variables with a 'var statement'. Naming variables: format of the identifier. Initialising variables: use of the assignment operator '='. Use of comment notation to hide JavaScript from old browsers. Included here but the trend is to assume that all browsers in use will now recognise the <script> tag (2008). |
|
You can paste the JavaScript scripts found on this website in the <head></head> or <body></body> section of the web page. Remembering that JavaScript is run line by line: so you can't call a function before the browser knows that it exists. Scripts that write to the page are best placed in the <body></body> section. The scripts must be between <script></script> tags.
Note that JavaScript reserved words or keywords should not be used to name functions or variables.
Discussion on the scope of variables declared in a function and in the surrounding program.
|
|
Utilizing an external file as a library for storing reusable functions. |
|
3. |
Linking to an external .js file that will contain your JavaScript function library. You can place all your functions together in a function library, which is just a file with a .js file extension. You will not need any XHTML or <script></script> tags in the function library file, just the functions themselves, but the web pages requiring them must reference that file.
(Note that we will continue to add the scripts between <script></script> tags in the page for demonstration purposes to keep all the code in one place for convenience.)
|
Creating reusable functions for the library: two simple examples. |
|
4. |
Function with one argument (parameter) that performs a calculation. Use of 'return' statement in a function. Using '*' operator for number multiplication. |
5. |
Function with two arguments (parameters). Use of '+' operator for number addition.
JavaScript has a comprehensive range of operators for building expressions: JavaScript operators table.
|
Collecting input from the user and performing a calculation. |
|
6. |
Collecting user input with the window 'prompt()' method dialog box and performing calculations. Example of use of quotes with strings and variables. Single ' or double quotes " are acceptable but be consistent and do not create mismatched pairs. Use of '+' operator for string concatenation.
JavaScript provides three (3) built-in dialog windows or boxes for basic interaction with the user by applying the window object 'alert()', 'confirm()' and 'prompt()' methods: JavaScript dialog boxes.
|
Learn more JavaScript and build on the above knowledge. See more code examples on JavaScript: Basics plus page.
|
|
| Suggest a code snippet to add to this category. | |
Back to top.
Copyright © 2006-2010 justfigures.co.uk
