Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,148,858 members, 7,802,751 topics. Date: Friday, 19 April 2024 at 08:47 PM

JavaScript Tutorial From The Scratch Brought To You From Part 2 - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / JavaScript Tutorial From The Scratch Brought To You From Part 2 (1621 Views)

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

(1) (Go Down)

JavaScript Tutorial From The Scratch Brought To You From Part 2 by dhtml(m): 11:51pm On Jul 12, 2014
In the previous class which took place here - https://www.nairaland.com/1789014/javascript-tutorial-scratch-brought- - we looked at the following topics:

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

Now, we shall progress to the new topics:
01. JavaScript Functions
02. JavaScript Events & handlers
03. Working With Arrays
04. Working With Dates
05. String functions in JavaScript
06. Working with DOM
07. Form Validation

The JavaScript calculator created on this thread - https://www.nairaland.com/1809691/creating-simple-calculator-raw-javascript#24648265 - will be better understood after this Part 2 tutorial.

1 Like

Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by Nastydroid(m): 11:54pm On Jul 12, 2014
*spray mat*
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by Nobody: 12:01am On Jul 13, 2014
following, dhtml write a function that will push this to FP
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by dhtml(m): 12:04am On Jul 13, 2014
Chapter 01 : JavaScript Functions
A function is a block of reusable code. It is useful because you can execute it many times.

Let us create a function called hello which will just display an alert. Please note that in the two examples below, you will not get any result because the functions were not called and so will not be executed.

Example 1: creating the function
var hello = function () {
alert('i am saying hello');
};

Example 2:
function hello () {
alert('i am saying hello');
};

Example 3: executing the functions
var hello = function () {
alert('i am saying hello');
};
hello();

Example 4:
function hello () {
alert('i am saying hello');
};
hello();

The syntax of functions is shown below:
functionName(parameter1, parameter2, parameter3) {
code to be executed
}

A function can have what we call arguments or parameters. Let us create a function that will alert the first and last name of a person.

Example 5:
function myname(first,last) {
alert('Your full name is '+first+' '+last);
}
myname('Tony', 'Olawale');

Example 6: A function can also return a result
function myname(first,last) {
var r='Your full name is '+first+' '+last;
return r;
}
var fullname=myname('Tony', 'Olawale');
alert(fullname);
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by dhtml(m): 11:43pm On Jul 14, 2014
Chapter 02 : JavaScript Events & handlers
JavaScript can react to DOM EVENTS. For example, when a key is pressed on the keyboard, or when mouse is clicked.

However, before we can fully delve into JavaScript events, we need to take a brief look at DOM.


HTML DOM (Document Object Model)
When an html page is loaded, the browser creates a representation of every object on the page - this representation is called DOM.

A graphical representation of DOM goes like this:


The HTML DOM is a standard object model and programming interface for HTML. It defines:
* The HTML elements as objects
* The properties of all HTML elements
* The methods to access all HTML elements
* The events for all HTML elements


With the object model (DOM), JavaScript gets all the power it needs to create dynamic HTML (dhtml):
* JavaScript can change all the HTML elements in the page
* JavaScript can change all the HTML attributes in the page
* JavaScript can change all the CSS styles in the page
* JavaScript can remove existing HTML elements and attributes
* JavaScript can add new HTML elements and attributes
* JavaScript can react to all existing HTML events in the page
* JavaScript can create new HTML events in the page

In this example, the content of the <h1> element is changed when a user clicks on it:
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>


We can assign a function to the event, so when the event is triggered, the function is called - this kind of function is called an event handler.

<html>
<head>
<script>
function changetext(id) {
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
When an event handler is called with 'this'. this represents the DOM object where the event took place in. So the handler used above called changetext can use id (which is the variable used to represent this).

There are different classes of DOM events:
* Mouse Events
* Keyboard Events
* Frame/Object Events
* Form Events
In the next class, we are going to be looking at the various classes and commonly used events with examples.

2 Likes

Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by blueyedgeek(m): 5:15am On Jul 15, 2014
What is the difference between creating functions this way:

function functionName(){
//code goes in here
}


and this way:

var variableName = function(){
//code goes in here

}


Is there any difference in the two or is it just a matter of preference?

Additionally, what is the difference between a parameter and an argument?

1 Like

Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by dhtml(m): 6:06am On Jul 15, 2014
Excellent questions, let us illustrate.

When you declare a function as a variable, the function body can change in the execution of the code, for example:

var hello=function() {alert('Hello');}
var hello=function() {alert('Hi ho');}
hello();


Function Parameters vs Argument

Consider the function used earlier:
function myname(first,last) {
alert('Your full name is '+first+' '+last);
}
myname('Tony', 'Olawale');
'Tony' and 'Olawale' are arguments, while first and last are parameters.
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by blueyedgeek(m): 2:35pm On Jul 15, 2014
dhtml: Excellent questions, let us illustrate.

When you declare a function as a variable, the function body can change in the execution of the code, for example:




Function Parameters vs Argument

Consider the function used earlier:

'Tony' and 'Olawale' are arguments, while first and last are parameters.
Clear on the difference between parameters and arguments but not on the two different methods of creating functions. Why are there two different methods? is one particular way more efficient than the other?

1 Like

Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by dhtml(m): 3:33pm On Jul 15, 2014
The two have their advantages and drawbacks, however I will say that using var seem to be the more powerful method especially when creating prototype classes and oop javascript in general. However, that is beyond the scope of this current tutorial.
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by GodMode: 3:37pm On Jul 15, 2014
blueyedgeek: Clear on the difference between parameters and arguments but not on the two different methods of creating functions. Why are there two different methods? is one particular way more efficient than the other?

I thought u created a javascript study group
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by GodMode: 3:39pm On Jul 15, 2014
dhtml: The two have their advantages and drawbacks, however I will say that using var seem to be the more powerful method especially when creating prototype classes and oop javascript in general. However, that is beyond the scope of this current tutorial.

Liar liar pants on fire gringringringrin
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by blueyedgeek(m): 3:42pm On Jul 15, 2014
GodMode:

I thought u created a javascript study group
Yes, to connect with like minds. How does that prevent me from commenting on this thread?
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by GodMode: 3:46pm On Jul 15, 2014
blueyedgeek: Yes, to connect with like minds. How does that prevent me from commenting on this thread?

To create a study group means u have considerable amount of knowledge in javascript. So I guess u already know the answers to your question
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by blueyedgeek(m): 3:55pm On Jul 15, 2014
GodMode:

To create a study group means u have considerable amount of knowledge in javascript. So I guess u already know the answers to your question
Study Group: a group of people who meet to study a particular subject.

The keyword there is "study" and study means to pursue knowledge
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by dhtml(m): 4:04pm On Jul 15, 2014
Jeez, spamming my threads is one way to frustrate my efforts,
And so I unfollow and resign from this thread.
It is possible that this was my last tutorial on nairaland.
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by GodMode: 4:07pm On Jul 15, 2014
blueyedgeek: Study Group: a group of people who meet to study a particular subject.

The keyword there is "study" and study means to pursue knowledge

Na cult be dat na...

dhtml should explain functions in this order:

Anonymous functions
Function declaration
Function expression
Function constructor
Function hoisting
Self-invoking functions
Functions as values
Functions as expression
Functions as objects.

This is how javascript functions work. Na my opinion be dis Oooo me never reach blueyedgeek level Oooo .
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by blueyedgeek(m): 4:29pm On Jul 15, 2014
dhtml: Jeez, spamming my threads is one way to frustrate my efforts,
And so I unfollow and resign from this thread.
It is possible that this was my last tutorial on nairaland.
embarassed embarassed embarassed embarassed embarassed embarassed
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by dhtml(m): 4:50pm On Jul 15, 2014
GODMode, you should continue the thread, because it is your jamtalking that made me end this class permanently. So let us all troll and enjoy ourselves while we are at it.
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by sunday478(m): 5:08pm On Jul 15, 2014
dhtml: GODMode, you should continue the thread, because it is your jamtalking that made me end this class permanently. So let us all troll and enjoy ourselves while we are at it.
Bros abeg, just like the bible said and I quote, "he that is well doesn't need a doctor except he that is seek'. He may not need it, but we are seriously following, pls contnue it for our own sake.
Re: JavaScript Tutorial From The Scratch Brought To You From Part 2 by Nobody: 7:27pm On Jul 15, 2014
dhtml do you want me to die? cry

(1)

Derive Traffic For Your Blog / Blog For Dash Me Prize / Web Masters And Developers Help Needed Urgently

(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. 42
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.