Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,849 members, 7,810,273 topics. Date: Saturday, 27 April 2024 at 04:17 AM

Javascript Tutorial From The Scratch Brought to you from Part 1 - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Javascript Tutorial From The Scratch Brought to you from Part 1 (4305 Views)

Free Tutorial From Baze9ja.tk– How To Make Money Blogging[for BLOGGERS] / JavaScript Tutorial From The Scratch Brought To You From Part 2 / Responsive Web Design Tutorial From Scratch (2) (3) (4)

(1) (2) (Reply) (Go Down)

Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 3:57pm On Jun 27, 2014
01. Introduction to javascript
02. Alert Box: Display messages with alert
03. Math Rules: Order of operation math rules
04: Write Javascript: the Script Element
05. Variables: Store data with variables
06. Prompt Box: Ask questions with prompt
07. Adding Strings: Joining strings and numbers with +
08. If Statements: Check user responses with if statements
09. Boolean values: true & false
10. Confirm Box: The confirm command
11. Null value: The special value null
12. If Conditions: Combining conditions with && and ||
13. While loop: Repeat code with while loops

After the completion of this tutorial, we are moving into the Part 2 which is going to be featuring Events, Handlers, Prototype classes and other OOP features in general.


Author: Anthony Ogundipe aka *dhtml
Author's Site: http://.net


Javascript Editor Used For This Class [Created By Same Author]
Source: http://sourceforge.net/projects/javascripteditor/

Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 4:16pm On Jun 27, 2014
What is this gringringringringrin the TROLL is back.

Hmmm, no javascript events. Who teaches a javascript tutorial without teaching the events and methods, this must be a begi--.. abi javascript for Amateurs not beginners.

Okay, lemme watch from the stands. If you quote me I will TROLL ooOoOOOooo.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by sunday478(m): 4:23pm On Jun 27, 2014
Sincerely, I rreally missed this topic. thank you for bring it back sir
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 4:50pm On Jun 27, 2014
rutchiekens: What is this gringringringringrin the TROLL is back.

Hmmm, no javascript events. Who teaches a javascript tutorial without teaching the events and methods, this must be a begi--.. abi javascript for Amateurs not beginners.

Okay, lemme watch from the stands. If you quote me I will TROLL ooOoOOOooo.
[size=18pt]AAAAAAND MISTER CHICKEN IS BACK AGAIN!! YAY!!![/size]
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 4:56pm On Jun 27, 2014
*dhtml:

[size=18pt]AAAAAAND MISTER CHICKEN IS BACK AGAIN!! YAY!!![/size]


Spreads carpet.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:10pm On Jun 27, 2014
I have backup to the old one, in case you guys need it.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:16pm On Jun 27, 2014
That is a good student, zip and post the backup on this thread then.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by OmolodMilkman93(m): 6:30pm On Jun 27, 2014
waitin for d backup,.... Taking my position
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Donkunxex(m): 6:31pm On Jun 27, 2014
xo dis thread no lost
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:01pm On Jun 27, 2014
The old outline is better
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:11pm On Jun 27, 2014
*dhtml this is it.


01. Introduction to javascript
02. Alert Box: Display messages with alert
03. Math Rules: Order of operation math rules
05. Variables: Store data with variables
06. Prompt Box: Ask questions with prompt
07. Adding Strings: Joining strings and numbers with +
08. If Statements: Check user responses with if
statements
09. Boolean values: true & false
10. Confirm Box: The confirm command
11. Null value: The special value null
12. If Conditions: Combining conditions with && and ||
13. While loop: Repeat code with while loops
14. Robot Challenge 3: Simplify code with while loops
15. Processing ajax requests
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:13pm On Jun 27, 2014
Called someone to retrieve the book for me. grin
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:59pm On Jun 27, 2014
That is good, however, i need to travel on monday for a few days, so i am going to accelerate the thread and try finish it between now and tomorow.
I will have to make the posts from my head all over again, so it may be different from before, but i will try to be consistent.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by DAvIt0(m): 8:14pm On Jun 27, 2014
Really Great bringing the thread back alive. Let's fire on
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 8:27pm On Jun 27, 2014
Okay, i shall bring the fire very shortly.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by adewasco2k(m): 8:59pm On Jun 27, 2014
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 9:24pm On Jun 27, 2014
Javascript Tutorial From The Scratch [no
Externals Like Jquery] by *dhtml ( m): 1:04pm On
Jun 18
I am going to start a javascript tutorial once
again on this board, this is a revision for those
that already know javascript but it will assume
that the viewers are beginners, so I shall be as
detailed as possible and provide example codes
and possible screen captures from time to time.
01. Introduction to javascript
02. Alert Box: Display messages with alert
03. Math Rules: Order of operation math rules
05. Variables: Store data with variables
06. Prompt Box: Ask questions with prompt
07. Adding Strings: Joining strings and numbers
with +
08. If Statements: Check user responses with if
statements
09. Boolean values: true & false
10. Confirm Box: The confirm command
11. Null value: The special value null
12. If Conditions: Combining conditions with &&
and ||
13. While loop: Repeat code with while loops
14. Robot Challenge 3: Simplify code with while
loops
15. Processing ajax requests
I decided to create a simple to use javascript
editor to go along with the thread
It is a standalone application about 17MB in
size.
The screenshot is attached below. You can
download it from sourceforge.net/p/
javascripteditor
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by blueyedgeek( m):
1:14pm On Jun 18
*Spreads mat yakata*
How often are you going to be updating the
thread?
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by *dhtml ( m): 1:23pm On
Jun 18
Updates shall be when i am free. I am not
copying and pasting from anywhere, i shall be
writing it from my head as often as i am free. I
shall kick off today most likely in the evening.
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by emable( m): 2:18pm On
Jun 18
we'll be waiting
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by phatjoe50 : 2:38pm On
Jun 18
I'm hooked!!!
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by PoisonousCoder:
2:41pm On Jun 18
*dhtml:
Updates shall be when i am free. I am not
copying and pasting from anywhere, i shall be
writing it from my head as often as i am free. I
shall kick off today most likely in the evening.
How are they sure you are not copying and
pasting from somewheregrin grin grin grin you
shouldn't have said that in the first place grin grin
grin grin
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by Nastydroid( m):
3:42pm On Jun 18
*spreads mat*
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by Vstuffs ( m): 4:00pm On
Jun 18
Run to get my book and biro
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by Sethuncahier (m):
4:49pm On Jun 18
Following!!!
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by yat@11 : 4:51pm On
Jun 18
following
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by PoisonousCoder:
5:41pm On Jun 18
Will admin allow you to write js on NL. Cos I
know what Javascript is capable of.
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by *dhtml ( m): 6:02pm On
Jun 18
The tutorial will soon kick off, there are many
tools that can be used to create and edit
javascript, however, for students it is very
important to quickly see the result of your code.
So i created a window-based application that can
solve the task, it is in my first post of this
thread,
And in case you miss it, the screenshot is
attached below. You can download it from
sourceforge.net/p/javascripteditor
The tutorial will kick off later in the night, i did
not plan to create this software, it was just an
after-thought really.
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by Djangocode (m):
6:21pm On Jun 18
Nice One @dhtml..
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by *dhtml ( m): 8:25pm On
Jun 18
Chapter 1a. Introduction to Javascript
Pre-requisites:
this class shall assume that you have already
learnt how to code HTML. Javascript is written
inside HTML codes inline, and can also be
externalized.
Javascript is said to be the most popular
language according to some sources. It is also
said by some to be the world's most
misunderstood programming language.
I am however interested in technicalities since
this is a practical section.
From my own point of view, the key facts about
javascript are listed below:
1. Javascript has very little in common with Java,
so being a Java guru does not necessarily mean
you will understand javascript (i use both
languages so i know).
2. JavaScript is an object oriented dynamic
language: it has types and operators, core
objects, and methods. Its syntax comes from the
Java and C languages, so many structures from
those languages apply to JavaScript as well.
3. JavaScript does not have classes; instead, the
class functionality is accomplished by object
prototypes.
4. Javascript functions are objects, giving
functions the capacity to hold executable code
and be passed around like any other object.
5. Javascript has lots of uses, it is not only used
to develop websites. This Javascript Editor that
was introduced in this tutorial is a windows
software, but javascript code was used in 95% of
its development.
6. Javascript is exclusively a client-sided
language, this means that it must first be
downloaded from a server and then executed
inside the browser. Unlike server-sided scripts
like PHP,PERL,JSP which are executed on the
browser and the output if any is sent to the
client.
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by sisqology( m): 8:32pm
On Jun 18
*dhtml:
I am going to start a javascript tutorial once
again on this board, this is a revision for those
that already know javascript but it will assume
that the viewers are beginners, so I shall be as
detailed as possible and provide example codes
and possible screen captures from time to time.
01. Introduction to javascript
02. Alert Box: Display messages with alert
03. Math Rules: Order of operation math rules
05. Variables: Store data with variables
06. Prompt Box: Ask questions with prompt
07. Adding Strings: Joining strings and numbers
with +
08. If Statements: Check user responses with if
statements
09. Boolean values: true & false
10. Confirm Box: The confirm command
11. Null value: The special value null
12. If Conditions: Combining conditions with &&
and ||
13. While loop: Repeat code with while loops
14. Robot Challenge 3: Simplify code with while
loops
15. Processing ajax requests
I decided to create a simple to use javascript
editor to go along with the thread
It is a standalone application about 17MB in
size.
The screenshot is attached below. You can
download it from sourceforge.net/p/
javascripteditor
You this old man :-P Javascript biti bawo? You
have taya ooo
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by *dhtml ( m): 8:33pm On
Jun 18
Chapter 1b. Writing Javascript Code
Javascript code is written as plain text, with a
plain text editor
A simple javascript code is:
alert('Welcome to Javascript');
You can embed this code into a web page
various ways:
1. You can embed it into an html page directly
<html>
<head>
<title>Javascript Example</title>
<script>
alert('Welcome to Javascript');
</script>
</head>
<body>
My web page
</body>
</html>
2. You can embed it into an html page directly
<script>
alert('Welcome to Javascript');
</script>
3. You can put it inside an external file and link
it to an html page indirectly
example.js
alert('Welcome to Javascript');
sample.html
<html>
<head>
<title>Javascript Example</title>
<script src='example.js'></script>
</head>
<body>
My web page
</body>
</html>
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by phatjoe50 : 8:37pm On
Jun 18
*dhtml:
Chapter 1a. Introduction to Javascript
5. Javascript has lots of uses, it is not only used
to develop websites. This Javascript Editor that
was introduced in this tutorial is a windows
software, but javascript code was used in 95% of
its development.
This is the first time I am seeing a write up on
JavaScript where the writer is saying that
JavaScript can be used for Application
development.
I would like to see you teach us how to achieve
that.
Thanks for what you are doing.
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by *dhtml ( m): 8:43pm On
Jun 18
Chapter 1c. Writing Javascript Code :: Coding
Conventions
I am going to reference [url= http://
msdn.microsoft.com/en-us/library/ie/
cte3c772 (v=vs.94).aspx]an msdn source here[/
url]
In this subsection, we are going to be looking at
javascript as a language. Most of the
terminologies here will be explained as we delve
more into the language.
Like many other programming languages,
JavaScript is organized into statements, blocks
consisting of related sets of statements, and
comments. Within a statement you can use
variables, strings, numbers, and expressions.
A JavaScript program is a collection of
statements. JavaScript statements combine
expressions in such a way that they carry out
one complete task.
How to write statements in javascript
A statement consists of one or more expressions,
keywords, or operators (symbols). Typically, a
statement is written on a single line, although a
statement can be written over two or more lines.
Also, two or more statements can be written on
the same line by separating them with
semicolons. In general, each new line begins a
new statement. It is a good idea to terminate
your statements explicitly. You do this with the
semicolon ( ; ), which is the JavaScript statement
termination character.
Here are two examples of JavaScript statements.
The sentences after the // characters are
comments, which are explanatory remarks in the
program.
var aBird = 'Robin'; // Assign the text "Robin" to
the variable aBird.
var today = new Date(); // Assign today's date to
the variable today.
A group of JavaScript statements surrounded by
braces ({}) is called a block. Statements grouped
into a block can generally be treated as a single
statement. This means you can use blocks in
most places that JavaScript expects a single
statement. Notable exceptions include the
headers of for and while loops. Notice that the
single statements within a block end in
semicolons, but the block itself does not.
An example script:
function inchestometers(inches)
{
if (inches < 0)
return -1;
else
{
var meters = inches / 39.37;
return meters;
}
}
var inches = 12;
var meters = inchestometers(inches);
document.write('the value in meters is ' +
meters);
This script is showing a combination of javascript
statements. You can copy and paste this code
into the Javascript Editor to see the output.
You do not need to understand these codes yet,
we are only introducing how the codes are
written.
This is the end of chapter 1. I shall now await
questions, chapter 2 continues tomorow.
Warning to trolls and class disruptors: I am
100% serious on this thread and will not troll or
respond to trolls, and will not even insult
anyone no matter what they say, i will however
take questions and respond properly to anything
that will improve this thread. If you are already
a javascript guru, then you dont need to be on
this thread. Thank you.
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by Tek%kyboy (m):
9:39pm On Jun 18
@op,can you teach me offline coz am totally a
newbie? Where is your base and what is your
cost sir?
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by *dhtml ( m): 9:46pm On
Jun 18
Sorry, i dont do offline training for now since i
am damn too busy.
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by PoisonousCoder:
10:16pm On Jun 18
Hmmm, so I've become a troll angry angry
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by Tek%kyboy (m):
10:19pm On Jun 18
*dhtml:
Sorry, i dont do offline training for now since i
am damn too busy.
ok
Re: Javascript Tutorial From The Scratch [no
Externals Like Jquery] by *dhtml ( m): 11:19pm
On Jun 18
PoisonousCoder: Hmmm, so I've become a troll
angry angry
Pin.chur of me calling you a 'troll or adonbilivit
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 4:34am On Jun 30, 2014
*dhtml oya now
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by martfrank(m): 8:26am On Jun 30, 2014
pls is it possible to create a standard hosted website with a macromedia dreamweaver? Thanks in anticipation
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 12:09pm On Jun 30, 2014
martfrank: pls is it possible to create a standard hosted website with a macromedia dreamweaver? Thanks in anticipation
Yes.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:00pm On Jul 02, 2014
Travelled briefly, just returning, sorry for the delay. Tutorial shall kick off tomorow.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 5:31pm On Jul 03, 2014
*dhtml:
Travelled briefly, just returning, sorry for the delay. Tutorial shall kick off tomorow.

Looking forward to it.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:36pm On Jul 03, 2014
Chapter 1a. Introduction to Javascript

Javascript has lots of uses, it is not only used to develop websites. This Javascript Editor that was introduced in this tutorial is a windows
software, but javascript code was used in 95% of its development.
Javascript can also be used to develop games (you can check this link as an example http://msdn.microsoft.com/en-us/library/windows/apps/hh465158.aspx).

Pre-requisites:
This class shall assume that you have already learnt how to code HTML. Javascript is written inside HTML codes inline, and can also be
externalized (written into an external .js file).
Javascript is said to be the most popular language according to some sources. It is also said by some to be the world's most misunderstood programming language.
I am however interested in technicalities since this is a practical section.
From my own point of view, the key facts about javascript are listed below:
1. Javascript has very little in common with Java, so being a Java guru does not necessarily mean you will understand javascript (i use both languages so i know this to be a fact).
2. JavaScript is an object oriented dynamic language: it has types and operators, core objects, and methods. Its syntax comes from the
Java and C languages, so many structures from those languages apply to JavaScript as well.
3. JavaScript does not have classes; instead, the class functionality is accomplished by object prototypes.
4. Javascript functions are objects, giving functions the capacity to hold executable code and be passed around like any other object.
5. Javascript has lots of uses, it is not only used to develop websites. This Javascript Editor that was introduced in this tutorial is a windows
software, but javascript code was used in 95% of its development.
6. Javascript is exclusively a client-sided language, this means that it must first be downloaded from a server and then executed inside the browser. Unlike server-sided scripts like PHP,PERL,JSP which are executed on the browser and the output if any is sent to the
client.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:38pm On Jul 03, 2014
Chapter 1b. Writing Javascript Code
Javascript code is written as plain text, with a plain text editor

A simple javascript code is:
alert('Welcome to Javascript');
You can embed this code into a web page
various ways:
1. You can embed it into an html page directly
<html>
<head>
<title>Javascript Example</title>
<script>
alert('Welcome to Javascript');
</script>
</head>
<body>
My web page
</body>
</html>
2. You can embed it into an html page directly
<script>
alert('Welcome to Javascript');
</script>
3. You can put it inside an external file and link
it to an html page indirectly
example.js
alert('Welcome to Javascript');
sample.html
<html>
<head>
<title>Javascript Example</title>
<script src='example.js'></script>
</head>
<body>
My web page
</body>
</html>
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:41pm On Jul 03, 2014
Chapter 1c. Writing Javascript Code :: Coding Conventions
I am going to reference [url= http://msdn.microsoft.com/en-us/library/ie/cte3c772 (v=vs.94).aspx]an msdn source here[/url]
In this subsection, we are going to be looking at javascript as a programming language. Most of the terminologies here will be explained as we delve more into the language.
Like many other programming languages, JavaScript is organized into statements, blocks consisting of related sets of statements, and comments. Within a statement you can use variables, strings, numbers, and expressions.
A JavaScript program is a collection of statements. JavaScript statements combine expressions in such a way that they carry out one complete task.

How to write statements in javascript
A statement consists of one or more expressions, keywords, or operators (symbols).
Typically, a statement is written on a single line, although a statement can be written over two or more lines.
Also, two or more statements can be written on the same line by separating them with semicolons. In general, each new line begins a
new statement. It is a good idea to terminate your statements explicitly. You do this with the semicolon ( ; ), which is the JavaScript statement
termination character.
Here are two examples of JavaScript statements.
The sentences after the // characters are
comments, which are explanatory remarks in the
program.
var aBird = 'Robin'; // Assign the text "Robin" to the variable aBird.
var today = new Date(); // Assign today's date to the variable today.

A group of JavaScript statements surrounded by braces ({}) is called a block.
Statements grouped into a block can generally be treated as a single statement. This means you can use blocks in most places that JavaScript expects a single statement. Notable exceptions include the headers of for and while loops. Notice that the single statements within a block end in
semicolons, but the block itself does not.
An example script:
function inchestometers(inches)
{
if (inches < 0)
return -1;
else
{
var meters = inches / 39.37;
return meters;
}
}
var inches = 12;
var meters = inchestometers(inches);
document.write('the value in meters is ' + meters);

This script is showing a combination of javascript statements. You can copy and paste this code into the Javascript Editor to see the output.
You do not need to understand these codes yet, we are only introducing how the codes are written.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:55pm On Jul 03, 2014
Chapter 1d. Javascript & DOM
I think it will be good to introduce DOM at this point for reference sake, if you do not understand all these, dont stress yourself, as the class goes on, we will make references back to this and it will all make sense.
The Document Object Model, normally abbreviated to DOM, is the API (application interface) through which JavaScript interacts with content within a website. JavaScript and the DOM are usually seen as a single entity since JavaScript is most commonly used for this purpose (interacting with content on the web). The DOM API is used to access, traverse and manipulate HTML and XML documents.

The window object serves as the global object, you access it by just typing "window". It's within this object that all of your JavaScript code is executed. Like all objects it has properties and methods.
=> A property is a variable stored under an object. All variables created on a web-page authomatically become properties of the window object.
=> A method is a function stored under an object. Since all functions are stored under (at least) the window object they can all be referred to as 'methods'.

The DOM creates a hierarcy corresponding to the structure of each web document. This hierarchy is made up of nodes. There are several different types of DOM nodes, the most important are 'Element', 'Text' and 'Document'.
=> An 'Element' node represents an element within a page. So if you have a paragraph element ('<p>') then it can be accessed through the DOM as a node.
=> A 'Text' node represents all text (within elements) within a page. So if your paragraph has a bit of text in it can be directly accessed through the DOM.
=> The 'Document' node represents the entire document. (it's the root-node of the DOM hierarchy/tree).
=> Also note that element attributes are DOM nodes themselves.

Most importantly: Each layout engine has a slightly different implementation of the DOM standard. For example, the Firefox web browser, which uses the Gecko layout engine, has quite a good implementation (although, not entirely inline with the W3C specification) but Internet Explorer, which uses the Trident layout engine is known for it's buggy and incomplete implementation; a cause of much anguish within the web development community!

And this explains why javascript behaves differently in different browsers, this is the reason why libraries like jQuery are created to solve this problem and to make javascript easier to use.

The images below show two different outlines of the typical DOM hierarchy (Simplified)

Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:00pm On Jul 03, 2014
Chapter 02. Alert Box: Display messages with alert
An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed.

Syntax: alert('message');

alternative syntaxes:
alert('message')
window.alert('message') // reference to current window
self.alert('message') // reference to current window
top.alert('message') // top-level frameset
parent.alert('message') // parent frame in a frameset

Examples:
alert('I am an alert box!');
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 8:25pm On Jul 03, 2014
Chapter 03. Math Rules: Order of operation math rules

The simplest way I can explain how javascript handles mathematics is by using the popular bodmas rules.

B -Brackets first
O - Orders (ie Powers and Square Roots, etc.)
DM - Division and Multiplication (left-to-right)
AS - Addition and Subtraction (left-to-right)

Using bodmas rules in javascript:

Example 1:
document.write(6 * (5 + 3)); //answer 48

Example 2:
document.write(2 + 5 * 3); //answer 17

Example 3:
document.write(30/5 * 3); //answer 18

Please note that the arithmetic sign for multiplication is (*) rather than (x).

Advanced learners: Javascript uses what we call the Operator Precedence, this means that operators higher takes precedence (just like bodmas).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

The Javascript Maths Object
Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object.
You can use it to perform other tasks such as get the value of PI (as in length of a cycle 2*PI*R).

Example 4: Calculate the perimeter of a cycle with radius 16.
document.write(2 * Math.PI * 16); //answer 100.53096491487338

Example 5: Calculate the square root of 64
document.write(Math.sqrt(64)); //answer 8

Example 6: Calculate the sine of 90
document.write(Math.sin(90));

Example 7: Calculate the cosine of 90
document.write(Math.cos(90));

You can read more about the maths object here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 8:36pm On Jul 03, 2014
Chapter 04: Write Javascript: the Script Element
When you want to use JavaScript on a website it has to be included within a SCRIPT element:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript!</title>
</head>
<body>

<script type="text/javascript">
// <![CDATA[

// ]]>
</script>

</body>
</html>

The TYPE attribute should be set to 'text/javascript' or no TYPE attribute at all.


Linking to External Scripts
If you want to link to an external script file then simply add an SRC attribute to your SCRIPT element corresponding to its location. It's normally a better idea to have seperate script files than to write code inline as it means the browser can cache the file. Plus you don't need to worry about any of that CDATA nonsense:
<script type="text/javascript" src="my-script.js"></script>
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 8:44pm On Jul 03, 2014
Chapter 05. Variables: Store data with variables
I am going to use some w3school tutorials to illustrate variables to an extent.

JavaScript variables are "containers" for storing information.

You can test this out in the javascript editor.
var x = 5;
var y = 6;
var z = x + y;
alert(x);
alert(y);
alert(z);
You will get an alert with 5,6 and 11.

JavaScript Variables
As with algebra, JavaScript variables can be used to hold values (x = 5) or expressions (z = x + y).
* Variable can have short names (like x and y) or more descriptive names (age, sum, totalVolume).
* Variable names can contain letters, digits, underscores, and dollar signs.
* Variable names must begin with a letter
* Variable names can also begin with $ and _ (but we will not use it)
* Variable names are case sensitive (y and Y are different variables)
* Reserved words (like JavaScript keywords) cannot be used as variable names.

Javascript reserve keywords:
abstract,boolean,break,byte,case,catch,char,class,const,continue,debugger,default,delete,do,double,else,enum
export,extends,false,final,finally,float,for,function,goto,if,implements,import,in,instanceof,int,interface,long,native,new,null,package,private,protected,public,return,short,static,super,switch,synchronized,this,throw,throws,transient,true,try,typeof,var,void,volatile,while,with
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 8:51pm On Jul 03, 2014
Chapter 06. Prompt Box: Ask questions with prompt
The Window.prompt() displays a dialog with an optional message prompting the user to input some text.

Syntax: result = window.prompt(text, value);

* result is a string containing the text entered by the user, or the value null.
* text is a string of text to display to the user. This parameter is optional and can be omitted if there is nothing to show in the prompt window.
* value is a string containing the default value displayed in the text input field. It is an optional parameter. Note that in Internet Explorer 7 and 8, if you do not provide this parameter, the string "undefined" is the default value

Example 1:
var sign = prompt('What is your sign?');

Example 2: enter scorpio as sign and see the resulting alert. If statement block shall be treated in a later chapter.
var sign = prompt('What is your sign?');
if (sign == 'scorpio') {
alert('Wow! I am a Scorpio too!');
}
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 9:00pm On Jul 03, 2014
Chapter 07. Adding Strings: Joining strings and numbers with +
Javascript handles strings and numbers in a different way that other languages.

Example 1: Let us join 2 strings together
var first='Tony';
var last='Ogundipe';
var result=first+last;
document.write(result); //result will be TonyOgundipe



Example 2: Let us join a string (tony) with a number (2014)
var name='Tony';
var year=2014;
var result=name+year;
document.write(result); //result will be Tony2014

(1) (2) (Reply)

How To Test Wordpress Plugins Without Installing Them / If You Have A Blog, You Should Do These 5 Things Right Away - Very Important / Let Us Review Your Blog For Free. We'll Tell You Things You Are Doing Wrong.

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 111
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.