Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,153,503 members, 7,819,826 topics. Date: Tuesday, 07 May 2024 at 01:39 AM

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

Nairaland Forum / Science/Technology / Webmasters / Javascript Tutorial From The Scratch Brought to you from Part 1 (4309 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)

Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 9:07pm On Jul 03, 2014
Chapter 08. If Statements: Check user responses with if statements
One of the most important features of a computer language is the capability to test and compare values. This allows your scripts to behave differently based on the values of variables, or based on input from the user.

The if statement is the main conditional statement in JavaScript. This statement means much the same in JavaScript as it does in English—for example, here is a typical conditional statement in English:

If the phone rings, answer it.

This statement consists of two parts: a condition (If the phone rings) and an action (answer it). The if statement in JavaScript works much the same way. Here is an example of a basic if statement:

Example 1: this will not yield any result since the condition is not yet meth
if (a == 1) window.alert('Found a 1!');

This statement includes a condition (if a equals 1) and an action (display a message). This statement checks the variable a and, if it has a value of 1, displays an alert message. Otherwise, it does nothing.

If you use an if statement like the preceding example, you can use a single statement as the action. You can also use multiple statements for the action by enclosing them in braces ({}), as shown here:

Example 2: this will yield result because the condition was met initially.
var a=1;
if (a == 1) {
window.alert('Found a 1!');
a = 0;
}

This block of statements checks the variable a once again. If it finds a value of 1, it displays a message and sets a back to 0.


Conditional Operators
While the action part of an if statement can include any of the JavaScript statements you've already learned (and any others, for that matter), the condition part of the statement uses its own syntax. This is called a conditional expression.

A conditional expression includes two values to be compared (in the preceding example, the values were a and 1). These values can be variables, constants, or even expressions in themselves.

Note:
Either side of the conditional expression can be a variable, a constant, or an expression. You can compare a variable and a value, or compare two variables. (You can compare two constants, but there's usually no reason to.)

Between the two values to be compared is a conditional operator. This operator tells JavaScript how to compare the two values. For instance, the == operator is used to test whether the two values are equal. A variety of conditional operators are available:

Using Comparison Operators / Conditional Operators In Javascript
== (is equal to)
!= (is not equal to)

=== (equal value and equal type)
!== (not equal value or not equal type)

< (is less than)
> (is greater than)

>= (is greater than or equal to)
<= (is less than or equal to)

Example 3a: Note that x is an integer here
var x = 5;
if(x == 5) {alert('x is equal to 5');} else {alert('Not equal');}

Example 3b: Note that x is a string here
var x = '5';
if(x == 5) {alert('x is equal to 5');} else {alert('Not equal');}

Both will give the same result, however, using === which compares both values and variable types, a different result will be seen

Example 4a: Note that x is an integer here
var x = 5;
if(x === 5) {alert('x is equal to 5');} else {alert('Not equal');}

Example 4b: Note that x is a string here
var x = '5';
if(x === 5) {alert('x is equal to 5');} else {alert('Not equal');}

Example 5: using comparison
var x=5,y=8;
if(x>y) {alert('x is greater than y');} else {alert('y is greater than x');}

Note:
Be sure not to confuse the equality operator (==) with the assignment operator (=), even though they both might be read as "equals." Remember to use = when assigning a value to a variable, and == when comparing values. Confusing these two is one of the most common mistakes in JavaScript programming.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 9:08pm On Jul 03, 2014
Chapter 09. Boolean values: true & false

Boolean logic is something used in most programming languages, including JavaScript. It's very useful to know at least a little bit about it. In JavaScript, you mostly need it in if() statements.

In Boolean logic, a statement can have two values, true or false. When using Boolean logic in philosophy, the statement can be a sentence, like
It rains today.
In more down-to-earth applications like JavaScript, a statement is something like
x == 4
Both statements can be either true or false. When writing a program it is often necessary to see if a statement is true or false. Usually this is done by an if() statement. If the statement x == 4 is true, then do something:

if (x==4) {
do something
}

All this is not surprising. Boolean logic, however, also offers possibilities to evaluate a whole string of statements and see whether the whole string is true or false. Like:
It rains today AND my feet are getting wet
In Boolean logic, this longer statement is true if it rains today is true AND my feet are getting wet is true.
It rains today OR my feet are getting wet
In Boolean logic, this statement is true if it rains today is true OR if your feet are getting wet is true OR if both statements are true.

This is also very useful when writing programs. For instance, suppose you want to do something if x==4 OR y==1. Then you write:
if (x==4 || y==1) {
do something
}
The statement (x==4 || y==1) is true when x is 4 OR y is 1.

Source: http://www.quirksmode.org/js/boolean.html
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:00am On Jul 04, 2014
Chapter 10. Confirm Box: The confirm command
This is used to confirm a user about certain action, and decide between two choices depending on what the user chooses.
Syntax: window.confirm()

Note that the value x is a boolean value, the value will be TRUE if okay is clicked, and FALSE when cancel is clicked.
Example:
var x=window.confirm('Are you sure you are ok?');
if (x)
window.alert('Good!');
else
window.alert('Too bad');

It can also be rewritten like this:
var x=window.confirm('Are you sure you are ok?');
if (x) {window.alert('Good!');}
else {window.alert('Too bad');}

or

var x=window.confirm('Are you sure you are ok?');
if (x==true) {window.alert('Good!');}
else {window.alert('Too bad');}
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:14am On Jul 04, 2014
Chapter 11. Null value: The special value null
Most programming languages have only one value for “no value” or “empty reference”. For example, that value is null in Java. JavaScript has two of those special values: undefined and null.
They are basically the same (something that will change with ECMAScript 6, as will be explained in the last post of this series), but they are used slightly differently.

undefined is assigned via the language itself. Variables that have not been initialized yet have this value:
null is used by programmers to explicitly indicate that a value is missing.

Example 1: In this example, v was declared as a variable, but it was never assigned a value, so the value is undefined.
var v;
alert(v);
if (v) {
alert('v has a value');
} else {
alert('v does not have a value');
}



Example 2a: How to differentiate between undefined and null.

var v;
if (v === undefined) {
alert('v is undefined');
} else if (v === null) {
alert('v is null');
} else {
alert('v has a value');
}

Example 2b: How to differentiate between undefined and null.

var v=null;
if (v === undefined) {
alert('v is undefined');
} else if (v === null) {
alert('v is null');
} else {
alert('v has a value');
}
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 6:26am On Jul 04, 2014
Chapter 12. If Conditions: Combining conditions with && and ||

We have looked at the comparison operators above (>,<,==,=== etc), now, we want to learn how to write more extended if statements using logical operators.

The Logical Operators are:
&& (and)
|| (or)
! (not)

Example 1: if either condition is true, the entire statement returns true
if ((20 > 500) || (50 < 200)) {
alert('20 is not greater than 500 but 50 is definitely less than 200');
}

Example 2: if both conditions are true, then the entire statement returns true
if ((20 > 500) && (50 < 200)) {
alert('Both conditions are not true, so this block will not execute');
}


Example 3: using not. Not causes reversal of conditions, i.e changes true to false and false to true.
if ((20 != 500) && (50 != 200)) {
alert('20 is not 500 and 50 is not 200, so both statements are correct');
}

Example 4: this will not give any result
if ((20 != 20) && (50 != 200)) {
alert('this block will not run because 20 is 20 and cannot be anything else');
}

Javascript Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
Syntax: variablename = (condition) ? value1:value2

Consider this statement:

var age=15;
if(age<18) {var voteable='Too young';} else {var voteable='Old enough';}
alert(voteable);

it can be rewritten using the conditional operator as shown below with exactly the same result:

var age=15;
var voteable = (age < 18) ? 'Too young':'Old enough';
alert(voteable);
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Godmother(f): 6:29am On Jul 04, 2014
Hmmmm! Programming is not beans!
I decided to wait till this early to read this tutorial and my brain still feels fried.
Will start frm d beginning again cos I MUST learn this tin.
Kudos dhtml for this. This is really appreciated.

1 Like

Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:09am On Jul 04, 2014
13. While loop: Repeat code with while loops
Loops can execute a block of code as long as a specified condition is true.

The while loop loops through a block of code as long as a specified condition is true.

Syntax:
while (condition) {
code block to be executed
}

Example: this will iterate the value of i from 1 to 5.
var i=1;
while (i <= 5) {
alert(i);
i++;
}

There are more complicated ways of using while, but this will suffice for now.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:13am On Jul 04, 2014
And so we come to the end of tutorial, i intentionally removed processing ajax requests because it will complicate things. This tutorial is for beginners and does not expect you to know more than HTML.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 9:16am On Jul 04, 2014
zz
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 9:29am On Jul 04, 2014
*dhtml:
And so we come to the end of tutorial, i intentionally removed processing ajax requests because it will complicate things. This tutorial is for beginners and does not expect you to know more than HTML.

What about the robot challenge.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 2:20pm On Jul 04, 2014
I am leaving every other thing for the next class. I want this section to be as simple as possible.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 1:32pm On Jul 05, 2014
Please *dhtml, how do you assign a variable dynamically in javascript let's say if you want to take a value from a form input and display it with
document.write(do something); or alert(do something);

Or probably use it with a condition statement.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 1:45pm On Jul 05, 2014
You need to illustrate what you wish to do clearly. Are you speaking of form validation? Because that is when you can speak of retrieving the form fields as variables and checking whether they are empty and decide on what to do.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 1:58pm On Jul 05, 2014
Ok this is what I am trying to achieve
<form id="myForm">
<input type="" name="dhtml"/><input type="submit" value="Submit"/>
</form>



<script>
var x = document.myForm.dhtml.value;
document.write(x);
</script>


But the script above is not working.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 2:43pm On Jul 05, 2014
It should be:
var x = document.getElementById('myForm').dhtml.value;
document.write(x)
But document.write will not work unless the page is still loading, you can use alert instead, let me provide a full html example - although your question is beyond the scope of this class.

example.html
<html>
<head>
<title>Sample Javascript</title>
<script>
function test() {
var x = document.getElementById('myForm').dhtml.value;
alert(x);
}
</script>
</head>
<body>

<form id="myForm" action="javascript:test();">
<input type="" name="dhtml"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:01pm On Jul 05, 2014
Well, I was strictly adhering to my father's advice to always read ahead of my teachers.
Thanks and when will you start part 2 @ *dhtml
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by dhtml(m): 8:40pm On Jul 07, 2014
I heard some students could not even find this thread.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by adewasco2k(m): 9:43pm On Jul 07, 2014
dhtml: I heard some students could not even find this thread.

and such thread doesnt make FP.

no worries, im learning and following
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Smooth51(m): 10:13pm On Jul 07, 2014
oga dhtml i have been looking for ways to learn js...doing it myself isn't working as i get bored.........i am joining your class by tommorow my bug note will be ready
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by dhtml(m): 10:47am On Jul 12, 2014
adewasco2k:
and such thread doesnt make FP.
no worries, im learning and following
If it gets to frontpage, a lot of trolls will come in and scatter the thread with nonsense talks.

Thank you all for attending this class, we are now advancing forward. My stock exchange API that is supposed to reach frontpage no hit am, it is the man that pregnant his sister that is hitting frontpage.

We shall soon go into the part 2 of the tutorial, but first, let us visit the workshop of this class and continue from there.
Creating A Simple Calculator With Raw Javascript
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 11:16am On Jul 12, 2014
dhtml:
My stock exchange API that is supposed to reach frontpage no hit am, it is the man that pregnant his sister that is hitting frontpage.
grin
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by dhtml(m): 11:53pm On Jul 12, 2014
The part 2 of the tutorial is kicking off here, leave that calculator alone if it is bugging you now.

https://www.nairaland.com/1810544/javascript-tutorial-scratch-brought-#24648523
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 8:34am On Aug 10, 2014
Sorry for the break in transmission people, I have copied the complete tutorial here and also included the eBook which contains part 1 and a little bit of part 2.
I am writing a new JavaScript Book titled "Event Driven Programming With JavaScript".
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nastydroid(m): 12:21am On Aug 11, 2014
It is good this way bro
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 7:18am On Aug 11, 2014
Thanks bro, the part 2 will come out this week.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nobody: 3:05am On Aug 25, 2014
Sorry guys that I have not released the part 2 tutorial yet as promised, it was due to some upgrades I did on my blog. All developers and programmers can benefit from it, please check www.dhtmlhub.com - I shall make the tutorial available really and shall publish it on this thread when i am done.
Re: Javascript Tutorial From The Scratch Brought to you from Part 1 by Nmeri17: 12:05am On Feb 25, 2015
just curious but does anyone know what lies outside the global variable??

(1) (2) (Reply)

Cheapest/affordable Website Design Prices For 2018(watapps 08028359239) / VIP.com Domain Name Sold for $1.4 Million / If You Have A Blog, You Should Do These 5 Things Right Away - Very Important

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