Sunday, February 9, 2020
JAVASCRIPT FREE COURSE-Lesson 10
Hi guys, I will be discussing with you in this lesson a very important topic in JavaScript. The topic is "if Statement". JavaScript is a sequential programming language and it follows instructions and obeys certain conditions. "if statement" is a conditional statement in JavaScript.
Whenever a programmer or a web developer writes codes in JavaScript, he or she usually wants to carry out different actions
using conditional statements such as The if Statement, else state, if…else statement, etc.
In this lesson, I will place more premium on teaching you about The if Statement. In our subsequent lessons, you will, however, learn other conditional statements. This is a “one-step-at-a-time” technique I employed in order to ensure you understand every bit of my lessons without any iota of complexity.
The Syntax of the if Statement
if (condition) {
statements
}
EXPLANATION
1. The word “condition” in the brackets in the first line is the place you stipulate the conditions that must be followed in order for the code to be executed.
2. The word “statements” between the two curly brackets is where you state or stipulate what will be executed only if the specified condition in the first line is true.
Now open your text editor and punch the following scripts into the body section
<script>
var firstNum1 = 25;
var secondNum2 = 60;
if (firstNum1 < secondNum2) {
alert("I am learning JavaScript with codinglegit free of charge.");
}
</script>
Save it and then run the code to see the amazing result!
NOTE THIS!
1. As you can seen in the image above, the JavaScript alert() method is used to generate a popup alert box that contains the information provided in parentheses.
2. Note also that the word “if” is in lowercase letters. Uppercase letters of this word (that is, “If” . “iF” or “IF”) will automatically generate an error.
WRAPPING UP
Whenever you want to a block of code to be executed if a specified condition is true, then you should use the if statement
Tuesday, January 14, 2020
FREE JAVASCRIPT LESSON 9
Hi
friends, I’m undoubted you are doing great. I’m glad you made your way to this
lesson. Today, I will be teaching you another interesting topic known as
Concatenation.
By the end of this
lesson, you will agree with me that the most useful operator primarily for
strings is no other thing but concatenation.
At this point, you may be wondering what the heck is concatenation. Well that is what I’m about to
discuss with you in this lesson. So calm down, pour yourself a cup of coffee
and relax. I promise to take you by hand and work you through all you need to
know about this subject matter without confusion or any form of difficulty.
To
start with, concatenation simply means joining strings of text together. Put
differently, concatenation is the act of building up strings by joining
multiple strings together. So, the verb “concatenate” means to join together two or
more strings. Concatenation is represented by the + sign. (NB: Don’t mistake this to plus sign).
Example
To
get this more clearer, open your text editor on your smartphone or computer,
and enter the following codes:
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<script>
var
firstString = "I am learning ";
var
secondString = "JavaScript with Codinglegit!";
document.write(firstString
+ secondString);
</script>
</body>
</html>
Save it with .html extension and
then open it to see an amazing result that will display on your screen
Note The following carefully
The
things you should take note of are those things in between the two script tags. First is the declaration of the two variables (i.e firstString and secondString).
Secondly,
the two string variables were assigned a value each (i.e
“I am learning " and
“JavaScript
with Codinglegit!")
And finally, we concatenates them (or joins
them together using this the plus sign +
.
Also, remember that whenever you put something
for example, numbers in quotation mark (“
“), JavasScript will treat that number as a string and not as a number.
We
will be treating a more interesting topic in our next lesson.
Monday, January 6, 2020
FREE JAVASCRIPT COURSE – Lesson 8
Hi friends, today we will be
discussing an important topic. The topic
is Mathematical operators! Hey, don’t
panic, we are not here to solve maths. I will just walk you through some mathematical
operators that enable JavaScript to function in a unique way.
Some of these mathematical operators in
JavaScript include:
1. Plus symbol ( + ) : it is used for adding two variables together. Hence, it represents an addition.
2. Minus symbol ( - ): This is used when you want to perform subtraction.
3. The Asterisk symbol ( * ): it is used when you want to perform multiplication.
4. Forward slash symbol ( / ): It is used when you want to perform division.
5. Percentage symbol ( % ): It is basically used for modulus calculations.
Make sure you note the above
mathematical operators very well. We will be using it in most of our subsequent
lectures.
Now let us put what we’ve just learned in to practice.
Open your code editor and punch in the following codes.
<!DOCTYPE HTML><HTML> <HEAD> <TITLE>Mathematical Operator</TITLE> <script> var number1 = 42; var number2 = 100; var total; total = number1 + number2; document.write( total ); </script> </HEAD> <BODY> </BODY>
It will look like this on your code editor
Please note that the plus symbol(+) between number1 and number2 does not mean "join together " or
concatenation. It simply tells JavaScript to "add up" number1
and number2.
Now try out something I would like
you to take special notice of. So go back
to your codes, precisely line seven (7) which
reads: var number2 = 100;
Put 100 in a quotation mark, it
will look exactly like this
var number2 = "100";
Save your code and try running it
again (or simply refresh your browser). The output will look like this:
42100
Now let me explain what just happened.
Whenever you put a variable inside quotation marks, it will automatically turn
such variables into text. What JavaScript will simply do is to join them
together (or concatenate them), instead of adding them up. In our next lesson, you will learn more about Concatenation.
Stay cool!
Wednesday, January 1, 2020
FREE JAVASCRIPT COURSE- Lesson 7
Friends hope you are doing fine, today I will be discussing a very important feature in
JavaScript and that feature is Popup Box. Note that this is our seventh lesson ( these are the previous lessons on JavaScript: 1, 2, 3, 4, 5, 6. ). Please check them out in case you missed any of them. If not then let's continue!
The beauty of scripting (coding) in JavaScript is not complete without some sorts of things popping up on the screen.
In JavaScript, there are basically three most common types of popup boxes. These popup boxes tend to mandate the users of a website or web app to take a certain action(s).
Let’s look at each of the popup boxes critically and see how they work.
1. 1. Alert
Box
Web
designers and programmers use Alert Box whenever they to be
sure that a certain information or message get through to the user.
This
means that whenever an alert box popup on a web page, the user must click “Ok” in
order to proceed.
Consider
these two examples below
Open your
text editor and write the following lines of codes
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <script> alert("Happy New Year");</script> </body></html>
Example two
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <button type="button" onclick="alert('Happy New Year');">ClickMe Display</button> </body> </html>
2. Prompt
Box
Another
type of popup box widely used by coders in the digital space is prompt
box. The primary function of a prompt box is that it triggers the user
to make a choice before visiting a web page. For instance, when a popup box
appears on a page, the user will have input some value, and afterward, to decide
whether to click “OK” or “CANCEL” before entering a page.
Example
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <script>var user = prompt("Please enter your name");alert(user);</script> </body></html>
3. Confirm
Box
The
third and the last type of JavaScript popup boxes we gonna be learning in this lesson is known as the confirm box. Just as the name implies,
confirm box is often used to make the users or website visitors verify, accept
or confirm something on the website before proceeding.
Whenever
this confirm box appears on the screen, the user must click either “OK” or
“CANCEL” before he or she can proceed.
Example
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head> <body> <script>var result = confirm("Do you really want to proceed with the payment?");if (result == true) { alert("Thanks for your patronage");}else { alert("Look for cheaper products, Thanks!");} </script> </body></html>
Final Words
Please be very careful about how you use all these pop-up boxes because they can be very dangerous on a website.
For instance, your visitors may not be able to access or move to any other part of your website until the box is closed.
Do you have any questions? Please ask them in the comment box below, I will be glad to help!
See you at our next lesson!
Tuesday, June 4, 2019
TOP 3 BASIC RULES IN NAMING JAVASCRIPT VARIABLES
Hi, hope you’re doing fine? Today I’m gonna be discussing with you about the rules that governs JavaScript names. In case you’ve missed any of our previous lessons on JavaScript tutorial, please I beg you to pause this lesson and click HERE! This lesson will be a little bit complicated especially if you’re just joining us today. In our previous lessons, we’ve explained what variable is, and how it can be used in JavaScript. So today, we are going to be looking at the “dos” and “donts” or rather the criteria you need to consider while in naming a variable in JavaScript.
The rules are
as follows
#RULE ONE
Do not
include hyphen or asterisks while naming your variables
in JavaScript. The reason is because both hyphen and asterisks are specially reserved
for subtraction and multiplication.
#RULE TWO
There are
certain words that are basically reserved as part of JavaScript syntax, hence
these special words are not accepted in JavaScript as variable names so as to
avoid unnecessary confusion. Some of these special reserved words include: private,
import, long, try, loop, while, true, false, debugger, null, return, if, throw,
instance of, var, break, delete, switch, else, do, float, int, Boolean, with,
void, goto, catch, continue and so on.
However, if
you must make use of any of these keywords, then you must make sure you change
the case. For example, null to NULL.
#RULE THREE
Do not include
any logical operator such as AND, OR, NOT etc., or mathematical operators in
naming a variable in JavaScript.
WRAPPING UP
In our next
lesson, we are going to put all these rules into practice. Make sure you master
these three rules because most of the errors and frustrations that most newbies
encounter in JavaScript pegs its fulcrum in flaunting these rules.
Tuesday, February 19, 2019
UNDERSTANDING JAVASCRIPT VARIABLES |THINGS YOU WOULD LIKE TO KNOW
I’m going to take this topic bit by bit for easy assimilation. So in this lesson, I’m going to give you a simple background of how variables work in Javascript. I will, in our subsequent lessons, slowly go deeper and deeper in a simplified manner. My aim is to help newbies or beginners understand every concept (if possible) in JavaScript programming. Having said this, let's move on.
JavaScript variables are often seen as the containers for storing data values. The good thing about JavaScript variable is that it can hold many data types, numbers, strings, objects, to mention but a few. You don’t even need to declare the variable type you are using in JavaScript.
You might be wondering why variables are necessary for JavaScript? Well, variables are very necessary while programming in JavaScript because it will make a lot of work much easier and simpler for you. For instance, if you have 500 lines of codes that may include the variable “x”. By the time you want to effect a change in the code, you can simply modify the value of “x” once, and it will automatically reflect in all places where it is used. (Keep calm if you’re a bit confused, it will definitely become clearer as we proceed in subsequent lessons). However, it is worthy of note here that JavaScript variable names are case sensitive. For example, variable x is not the same as variable X. In addition, if you want to declare a variable, simply use var keyword.
For example
var x = 15;
In the above line, var is a shortened form of the word "variable". x is our variable name. The equal sign (=) is called the “assignment” operator rather than an equal operator (please note this!). The above means that variable x is assigned the value of 15.
If you now want to see the result, you have to use this function “document.write ():”
Inside the bracket is where you will input your variable name, followed by a semicolon.
Example,
Open your text editor and write the following;
var x = 15;
document.write(x):
IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS (the output is very thin though)
WRAPPING UP
In my next lesson, I will be taking a step further into the subject matter, make sure you acquaint yourself with this lesson.
Thursday, February 14, 2019
EXEMPLARY GUIDE ON HOW TO EMBED JAVASCRIPT TAGS IN HTML DOCUMENT
Hi, in this lesson, I’m going to take you by hand and walk you through the two major ways by which you can embed JavaScript tags in the HTML document tree. Just like Cascading Style Sheet, you can confidently attach JavaScript file either externally or internally in HTML document. The only slight difference here is that the internal placement of JavaScript into the HTML document can be done in two different ways depending on the programmer intention. Shortly let me show you how to do all of these in with the aid of illustrative examples.
HOW TO EMBED JAVASCRIPT TAGS IN HTML DOCUMENT
1. EXTERNAL METHOD
One of the best ways to place your JavaScript in HTML document is by using an external method. This means that you can place your JS code in an external folder and then reference it between the SCRIPT tags of the HTML document using the compulsory “ .js ” extension immediately after the file name. For you to reference the source inside the SCRIPT tags, you must include the “ SRC “ attribute followed by an equal sign ( = ) and then the file path which points to the location of the JavaScript.
Look below for clarity
<HEAD>
<TITLE>CODING LEGIT</TITLE>
<SCRIPT LANGUAGE = “Javascript”
SRC = “scripts/Javascript_file_name.js”>
</SCRIPT>
</HEAD>
Closely looking at the above code, you will observe that I added the following lines to our opening script
SRC = “scripts/Javascript_file_name.js”>
SRC stands for the source or rather, file source. The equal sign (=) you see immediately after “SRC” is simply an indicator. It tells us that whatever comes after it is the source of our JavaScript we intend to embed in the HTML document. Notice the double quotation marks, it is very important. Miss it, your code will display nothing.
2. INTERNAL METHOD
Internally method of JavaScript placement can be done in two ways as I have stipulated in the introductory part of this lesson.
2a. In Body Section
You can directly write your JS codes between the BODY tags of the HTML document like this:
<BODY>
<!HTML codes if any, then JS below
<SCRIPT LANGUAGE = “Javascript”>
Confirm(“BOY OR GIRL”)
</SCRIPT>
</BODY>
The reason why you need to put the HTML codes first before the JS code is simply because the web page itself will have to load first before the scripts can be read.
2b. In Head Section
You can also place your JS codes in the HEAD section of your HTML document but you have to do an important thing before any HTML or CSS element can be loaded. That important thing you have to do is parsing the script codes. Without parsing the scripts, it will be very difficult to be read.
Nonetheless, your JS format in the HEAD section of the HTML document will look like this:
<HEAD>
<TITLE>CODING LEGIT</TITLE>
<SCRIPT LANGUAGE = “Javascript”>
Confirm (“BOY OR GIRL”)
</SCRIPT>
</HEAD>
WRAPPING UP
In our next lesson, we are going to be looking at an interesting topic. Till then, keep practicing.
Thursday, February 7, 2019
STEP BY STEP GUIDE ON HOW TO CREATE CONFIRM AND PROMPT BOX USING JAVASCRIPT
Hi, welcome to our fourth lesson on JavaScript. In this lesson, I will unveil to you a practical way you can create a confirm box and as well prompt box using JavaScript. Perhaps you may have seen something popping up whenever you visit a website, prompting you to take a certain action. Well, most of those things (like confirm box, prompt box, etc.) were simply programmed using JavaScript. Without wasting much of your time, I will take you by hand and guide you through various steps that are necessary to enable you to create a confirm box and a prompt box. If you’re interested, then read on.
I. CONFIRM BOX
Confirm box, just as the name suggests is a form of a dialog box that's usually pop up on the window/screen of your device, demanding the user to validate or reject an action by simply clicking the “OK” or “Cancel” button on the box. Let us consider an example to drive home the above point.
Open your text editor. I believe by now you’ve known JavaScript template structure by heart. Nevertheless, I will write everything in full once more.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Template</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "Javascript">
confirm("OK or Cancel")
</SCRIPT>
</BODY>
</HTML>
IT WILL LOOK LIKE THIS IN YOUR TEXT EDITOR
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
II. PROMPT BOX
Prompt box works almost the same way as the confirm box. The only slight difference here is that the prompt has two parts usually enveloped with round brackets. The first part is often referred to as the main, while the second part is sometimes called the tail. The tail usually contains some default text(s). This prompts a user to enter some texts in the text box, and after the user is done and clicked “OK”, then the program will execute some actions.
Let us look at an example.
Change the confirm box in the example above and add the following.
Prompt (“Today is What?”, “Monday”)
IT WILL LOOK LIKE THIS IN YOUR TEXT EDITOR
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
In our next lesson, we are going to be looking at JavaScript placement in HTML document. Before then, keep practising.
Tuesday, February 5, 2019
PRACTICAL GUIDE ON HOW TO WRITE YOUR FIRST JAVASCRIPT PROGRAM
Hi, in this masterpiece, I will try my best to guide you on how to successfully write your first Javascript program without stress. As you may have discovered in our first introductory lesson, that you don’t need any special software installation or IDE in order to run or test your JavaScript programs. All the tools we are going to need here are almost the same as what we used for CSS and HTML course.
In order words, you will still use either, sublime text, Dreamweaver, VS code, DroidEdit (best for Android phones), notepad++, coda, etc. You must not download all, one is enough depending on your choice. For me, I’ve chosen Sublime text.
There are things I think you should know before you can successfully write your first JavaScript program. Firstly, I want you to take a close but critical look at the JavaScript basic template.
JAVASCRIPT BASIC TEMPLATE
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>JS TEMPLATE</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = “Javascript”>
</SCRIPT>
</BODY>
</HTML>
EXPLANATION
Notice how we placed our <SCRIPT> tags in between the <BODY> opening tag and </BODY> closing tags. You can still place your <SCRIPT> tags externally or in <HEAD> section, but it has to be parsed ( ASIDE: Never worry if you don’t understand, I have designed a special topic for JavaScript placements, you will understand better when we get there.).
However, note the following codes between the body tags:
<SCRIPT LANGUAGE = “Javascript”>
</SCRIPT>
These codes are used to embed JavaScript codes into the HTML document. JavaScript is a scripting language. So ‘’SCRIPT LANGUAGE =’’ is used to indicate the kind of scripting language you want to use. Just like DOCTYPE in HTML, which stands for document type, is used to introduce our HTML document.
Below this line <SCRIPT LANGUAGE = “Javascript”> is where you input your JavaScript codes. Do not forget to surround the word Javascript with double quotes, else you will get a blank page. However, It is not compulsory you include this line ‘’<SCRIPT LANGUAGE = “Javascript”>’’. You can actually put it this way:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>JS TEMPLATE</TITLE>
</HEAD>
<BODY>
<SCRIPT >
…………………….
</SCRIPT>
</BODY>
</HTML>
Then write your codes between <SCRIPT> </SCRIPT> tags. Let us now write our first JavaScript Program
OUR FIRST JAVASCRIPT PROGRAM
Open your text editor and write the following piece of codes
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>OUR FIRST PROGRAM</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = “Javascript”>
alert(“Hello World”)
</SCRIPT>
</BODY>
</HTML>
NOTE
You can write all the above codes with either uppercase or lowercase except JavaScript codes which must be in lowercase. For example ‘alert’ can never be ‘’Alert or ALERT’’. Also, take note of the round brackets and double quotation marks. Miss any of these and your web browser will display a blank page.
THE CODES ABOVE WILL LOOK LIKE THIS IN YOUR TEXT EDITOR
SAVE AND OPEN IT WITH INTERNET EXPLORER OR ANY OTHER WEB BROWSER
(IT LOOKS LIKE THIS ON INTERNET EXPLORER THOUGH)
WRAPPING UP
I believe you can now successfully write your first JavaScript program and run it without tears. In our next lesson, will be considering ‘’Confirm and Prompt box’’
Subscribe to:
Posts
(
Atom
)
