Sunday, December 30, 2018

JavaScript Variable


Hello guy! evening and welcome to my new tutorial post on JavaScript. In my last tutorial i talked about Javascript placment, in this tutorial we will be talking about JavaScript Variables.

JavaScript DataTypes:
One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the types of values that can be represented and manipulated in a programming language.

JavaScript allows you to work with three primitive data types:
  • Numbers eg 123, 150.50 etc.
  • Strings of text eg "this text is string" etc.
  • Boolean eg true or false.
JavaScript also defines two trivial data types, null and undefined, each of which defines only a single value.

In addition to these primitive data types, JavaScript support a composite data type known as object. We will talk about an object in detail in a separate tutorial.

You can also read: Javascript Syntax

Note: Java does not make a distinction between integer values and floating-point values. All numbers in JavaScript are represented as floating-point values. JavaScript represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard.

JavaScript Variables:
Like many other programming languages, JavaScript has variables. Variables can be thought as named containers. You can place data into these containers and then refer to the data simply by naming the container.

Before you use a variable in a JavaScript program, you must first declare it. Variables are declared with the var keyword as follows:

<script  type="text/javascript">
<!--
var money;
var name;
//-->
</script>

You can also declare multiple variables with the same var keyword as follows:

<script  type="text/javascript">
<!--
var money, name;
//-->
</script>

Storing a value in a variable is called variable initialization. You can do variable initialization at the time of variable creation or later point when you need that variable as follows:

For instance, you might create a variable named money and assign the value 5000.70 to it later. For another variable you can assign a value the time of initialization as follows:

<script  type="text/javascript">
<!--
var name ="Nova";
var money;
money=5000.70;
//-->
</script>

Note: Use the var keyword only for declaration or initialization. Once for a life of a variable name in a document. You should not re-declare same variable twice.

JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type. Unlike many other languages, you don't have to tell JavaScript during variable declaration what type of value the variable will hold. The value type of a variable can change during the execution of a program and JavaScript takes care of it automatically.

You can also read: How to enable Javascript

JavaScript Variable Scope:
The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes.

  • Global Variables: A global variable has a global scope which means it is defined every where in your JavaScript code.
  • Local Variables: A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.
Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable. Below is an example:

<script  type="text/javascript">
<!--
var myVar = "global";  // Global variable declaration
function checkscope()  {
    var myVar = "local";  // Local variable declaration
    document.write(myVar);
}
//-->
</script>

JavaScript Variable Names:
While naming your variables in JavaScript keep the following rules in mind:

  • You should not use any of the JavaScript reserved keyword as a variable name. This keywords are listed out below. For example break or import variable names are invalid.
  • JavaScript variable names should not start with numeral (0-9). They must begin with a letter or the underscore character. For example, 123test is an invalid variable name but _123test is a valid variable name.
  • JavaScript variable names are case sensitive. For example name and Name are two different variables.
JavaScript Reserved Words:
The following are reserved words in javascript. They cannot be used as variable names, functions, methods, loops labels, or any object names.
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


Alright guys we have come to the end of this tutorial post on JavaScript variable, see you in my next tutorial on JavaScript and thanks for reading. Feel free to drop your questions in the comment box below, bye for now.

Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.

You can follow us on twitter 
You can follow us on google+ 
You can also follow us on pinterest

Sunday, December 23, 2018

How to add JavaScript to Html (JavaScript placment)


Hello guys! afternoon and welcome to another section of my tutorial post on JavaScript. In my last tutorial i talked about how to enable javascript on various browsers and now we are going to be talking about JavaScript that is how and where to place our JavaScript codes in our Html documents. 

There is a flexibility given to include JavaScript code anywhere in an Html document. But there are following most preferred ways to include JavaScript in your Html file.
  • Script in <head>....</head> section.
  • Script in <body>....</body> section.
  • Script in <body>....</body> and <head>....</head> section.
  • Script in an external file and then include in <head>....</head> section.
In the following section below we will see the various ways in which we can put JavaScript in our Html document.

You can also read: How to enable JavaScript

JavaScript in <head>....</head> section:
If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that script in the head as follows:

<html>
<head>
<script  type="text/javascript">
<!--
function sayHello ()  {
     alert("Hello World")
}
//-->
</script>
</head>
<body>
<input  type="button"  onclick="sayHello()"  value="Click" />
</body>
</html>

JavaScript in <body>....</body> section:
If you need a script to run as the page loads so that the script generates content in the page, the script goes to the <body> section of the Html document. In this case you would not have any function defined using JavaScript:

<html>
<head>
</head>
<body>
<script  type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is the body of the document</p>
</body>
</html>

JavaScript in <body> and <head> section:
You can put your JavaScript code in <body> and <head> section altogether as follows:

<html>
<head>
<script  type="text/javascript">
<!--
function sayHello ()  {
     alert("Hello World")
}
//-->
</script>
</head>
<body>
<input  type="button"  onclick="sayHello()"  value="Click" />
</body>
</html>

JavaScript in External File:
As you begin to work extensively with JavaScript, you will likely find out that there are cases where you are reusing identical JavaScript code on multiple pages of a website.

You can also read: JavaScript Syntax

You are not restricted to be maintaining identical code in multiple Html files. The script tag provides a mechanism to allow you store JavaScript in an external file  and then include it into your Html file.

Below is an example to show how to include an external JavaScript file in your Html code using script tag and its src attribute:

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.............
</body>
</html>

To use JavaScript from an external file source, you need to write your all JavaScript source code in a simple text with extension ".js" and then include that file as shown above.

For example, you can keep following content in filename.js file and then you can use sayHello function in your Html file after including filename.js file:

function sayHello()  {
     alert("Hello World")
}

Alright guys we have come to the end of this tutorial post on JavaScript placement, see you in my next tutorial on JavaScript and thanks for reading. Feel free to drop your questions in the comment box below, bye for now.

Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.

You can follow us on twitter 
You can follow us on google+ 
You can also follow us on pinterest

Wednesday, December 12, 2018

How to enable JavaScript


Hello guys evening and welcome to my new tutorial post on JavaScript. In this tutorial post we gonna be talking about how to enable JavaScript on our various browsers.

All the modern browsers comes with built-in support for JavaScript. Many at times you may need to enable or disable this support manually.

This tutorial will make you know the procedures in enabling and disabling JavaScript support in browsers : internet explorer, firefox and opera.

You can also read: Media types

JavaScript in Internet Explorer
Here are simple steps to turn on or turn off JavaScript in your Internet Explorer:

  1. Follow Tools-> Internet Options from the menu
  2. Select Security tab from the dialog box
  3. Click the Custom Level button
  4. Scroll down till you find Scripting options
  5. Select Enable radio button under Active scripting
  6. Finally click ok and come out
To disable JavaScript support in your Internet Explorer, you need to select Disable radio button under Active Scripting

You can also read: JavaScript Syntax

JavaScript in Firefox:
Here are simple steps to turn on or turn off JavaScript in your Firefox:

  1. Follow Tool-> Options from the menu
  2. Select Content option from the dialog box
  3. Select Enable JavaScript checkbox
  4. Finally click ok and come out
To disable JavaScript support in your Firefox, you should not select Enable JavaScript checkbox

JavaScript in Opera:
Here are simple steps to turn on or turn off JavaScript in your Opera:

  1. Follow Tools-> Preference from the menu
  2. Select Advanced option from the dialog box
  3. Select Content from the listed items
  4. Select Enable JavaScript checkbox
  5. Finally click ok and come out
To disable JavaScript support in your Opera, you should not select Enable JavaScript support.

You can also read: What is JavaScript?

Warning for Non-JavaScript Browsers
If u have to do some thing important using JavaScript then you can display a warning message to the user using <noscript> tag.

You can add a noscript block immediately after the script block as follows:

<script language="javascript"   type="text/javascript">
<!--
     document.write("Hello World")
//-->

<noscript>
Sorry.....JavaScript is needed to go ahead
</noscript>
</body>
</html>

Now if the user's browser does not support JavaScript or JavaScript is not enabled then message from </noscript> will be enabled on the screen.


Alright guys we have come to the end of this tutorial post on how to enable JavaScript. Always feel free to ask your questions in areas you don't understand properly, and i promise to attend to your questions as soon as possible. 

This blog has a chat box that is meant for interaction, so you guys should always feel free to interact there and share ideas, or you can also interact in the comment box below.

Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.

You can follow us on twitter 
You can follow us on google+ 
You can also follow us on pinterest  

Friday, December 7, 2018

JavaScript Syntax


Hello guys morning to you all and welcome to this tutorial post on JavaScript. Like you all know i started my tutorial on JavaScript in my previous tutorial post and we looked at a brief JavaScript Overview. Now in this tutorial post am gonna be discussing JavaScript Syntax.

A JavaScript consists of JavaScript statements that are placed within the <Script>.....</Script> HTML tag in the web page.

You can place the <Script> tag containing the JavaScript code anywhere within your web page but it is preferred way to keep it within the <head> tags.

Thursday, December 6, 2018

What is JavaScript?


Hello guys evening and welcome to a brand new section of my tutorials. Its really being a while and i wanna apologize to all my blog readers, have being occupied with so much work lately that i don't even have much time to drop tutorials here for you guys but i promise to make it up to you guys.
     Am happy to inform you guys that i will be starting my tutorials on javascript from this very post. Now lets take a look at the overview.

JavaScript Overview
JavaScript started life as LifeScript, but Netscape changed the name, possibly because of the excitement being generated by Java to JavaScript. JavaScript made its first appearance in Netscape 2.0 in 1995 with a name LiveScript.

Tuesday, August 14, 2018

Css Media types


Hello guys!! afternoon, welcome to this new tutorial on CSS. In today's tutorial i want to talk about CSS Media Types.

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on the paper, with a speech synthesizer, with a braille device, etc.

Sunday, August 12, 2018

@ Rules


Hello guys! evening and welcome to a brand new episode  of my tutorial on CSS. I know you guys are not really happy that i don't update my tutorial posts regularly, i apologize.

In my last tutorial post on CSS i talked about Pseudo elements which i explained in details the various Pseudo elements and their applications. Now in this tutorial post i want to talk about the @ Rules  and their applications.


Tuesday, July 17, 2018

Pseudo elements


Hello guys! morning to you all, wishing you all a happy Wednesday. Alright in my previous tutorial post i talked about css pseudo-classes. Am going to move on to the next topic which is Css Pseudo element.

Css Pseudo-elements are used to add special effects to some selectors. You do not need to use javascript or any other script to use those effects. A simple syntax of Pseudo-element is as follows:

Friday, July 6, 2018

Css Pseudo Classes


Hello guys! good evening to you all. Without wasting much time let me introduce you guys to the topic for this tutorial section, i will be talking about pseudo-classes. I know you must be wondering what i mean by that, just relax and read through the tutorial so you can understand.

CSS pseudo-classes are used to add special effects to some selectors. Javascript or any other script is not needed in other to use those effects. Below is the syntax of pseudo-classes:


Friday, June 8, 2018

Css Layers


Hello guys! afternoon and welcome to this new section of my tutorial on CSS. Once again i apologize for not droping any tutorial post for some time now. Without wasting much time lets go down to the topic for this tutorial.

In my last tutorial i talked about CSS positioning so in this tutorial am moving on to CSS layers.

Sunday, May 13, 2018

Css Positioning


Hello Web design tutorialz readers! morning to you all. Welcome to a new section on my tutorials on CSS. Before i continue i want to first apologize to you guys for not droping any tutorial post since last month, was very busy with other stuffs.

Am going to continue from where i stoped, in my last tutorial on CSS i talked about Visibility and i showed you guys how it works. Now in this tutorial am going to be talking about Positioning in CSS. Without wasting much time, lets go down to business.

Monday, April 16, 2018

Css Visibility


Hello guys! afternoon and welcome to this section of my tutorial on CSS. For some time now i haven't posted any tutorial post here, i just want to use this medium to apologize to all my blog readers.

In my last tutorial on CSS i talked about CSS Scrollbar and now i want to discuss about CSS Visibility with you guys. 

Wednesday, March 28, 2018

Scrollbar Css


Hello guys! morning and welcome to this new section of my tutorial on CSS. Very soon i will round up my tutorials on CSS and start a new tutorial on JAVASCRIPT.

You guys are always free to ask your questions in areas you don't understand fully and you can also appreciate the good work of this great blog by droping your comments in the comment box below and by inviting your friends too.

Wednesday, March 21, 2018

Css Dimensions


Hello guys! evening and welcome to this section of my tutorial on CSS. In my previous tutorial i talked about CSS outlines, i hope you guys understood the tutorial post very well?
In this tutorial i want to talk about CSS dimension, without wasting much time, lets get down to business.

Tuesday, March 13, 2018

Css outline


Hello guys! welcome to this wonderful section of my tutorial on CSS. In this tutorial i want to talk about CSS Outline.

Outlines are very similar to borders, but there are few major differences as well, which are listed out below:
  • An outline does not take up space.
  • Outlines do not have to be rectangular.
  • Outline is always the same on all sides; you cannot specify different values for different sides of an element.
NOTE: The outline properties are not supported by IE 6 or Netscape 7.

Sunday, March 11, 2018

Css cursor


Hello guys! evening and a happy sunday to you all. Welcome to another wonderful section of my tutorial post on CSS, we have really come a long way on CSS and i want to say a big congrats to you all.

In my last tutorial i talked about CSS padding, now in this tutorial post i want to talk about CSS cursors.

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.

One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changes from to a pointer to a hand. However, it does not change form for a submit button on a form. Therefore, whenever someone hovers over an image that is a submit button, it provides a visual clue that the image is clickable.

Saturday, March 10, 2018

Css padding


Hello guys! evening and welcome to this section of my tutorial on CSS. In this tutorial i want to talk about CSS Paddings.

The padding property allows you to specify how much space should appear between the content of an element and its border:

The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

Thursday, March 8, 2018

Css List


Hello guys! morning and welcome to this new section of my tutorial on CSS, we have really gone a little bit far on CSS and i believe by now you all can do some few stuffs using CSS.

In my last tutorial post i talked about CSS margin and it various properties, now in this tutorial post i want to talk about CSS list.
NOTE: that CSS list is not too different from HTML List. The only difference is that CSS list has CSS style rules applied to it.

Saturday, March 3, 2018

Css margin



Hello guys! good afternoon and welcome to another section of my tutorial on CSS. In this tutorial i want to talk about CSS Margins.

The margin property defines the space around a HTML element. It is possible to use negative values to overlap content.

The values of a margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.

Friday, March 2, 2018

Css border



Hello guys! morning and welcome to this section of my tutorial on CSS. I want to also use this medium to wish you all a happy new month. In my last tutorial i talked about CSS Tables and i believe that you guys understand every thing about CSS Tables by now.

Now in this tutorial post i want to talk about CSS borders. The border property allows you to specify how the border of the box representing an element should look. There are three properties of a border you can change:

Tuesday, February 27, 2018

Css table



Hello guys! morning to you all. I welcome you all to this section of my tutorial on CSS. In this tutorial i want to talk about CSS Tables, this is the same with HTML Tables but the only difference is that in CSS Tables CSS rules are applied to it.

This section teaches you how to set different properties of a HTML Table using CSS. You can set the following properties of a table:

Tuesday, February 20, 2018

Css Links



Hello guys! evening and welcome to this section of my tutorial on CSS, in my last tutorial post i talked about CSS Images. Now i want to talk about CSS Links.

This section of my tutorial on CSS teaches you how to set different properties of a hyper link using CSS. You can set the following properties of a hyper link:

Monday, February 19, 2018

Css Images


Hello guys! afternoon. Welcome to this tutorial on Css , in my last tutorial i talked about Css Text and now i want to talk CSS Images. I believe by now you all are familiar with images in web design because i also talked about Html Images in our tutorials on Html.

Images play an important role in any webpage. Though it is not recommended to include alot of images in a webpage, but it is still important to use good images wherever required.

Thursday, February 8, 2018

Css Text


Hello guys! morning and welcome to another episode of my tutorial on Cascading Style Sheets. In my last tutorial i talked about Css Fonts and am believing that right now you guys have full knowledge of it. In this tutorial i will be talking about Cascading Style Sheets Text and it's properties.

This section of my tutorial on CSS teaches you how to manipulate text using CSS properties. You can set the following text properties of an element:

Wednesday, January 31, 2018

Css Fonts


Hello guys! good afternoon and welcome to this section of my tutorial, hope you have all learned alot so far from my tutorials? In this tutorial i want to talk about CSS Fonts.
This section teaches you how to set fonts of a content, available in a HTML element. You can set the following font properties of an element:

Css Backgrounds


Hello guys! morning and welcome to this section of my tutorial. In my last tutorial i talked about CSS Measurement Units. So now i want to talk about CSS backgrounds.
This section of my tutorial teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element:

Saturday, January 27, 2018

Css Measurement Units


Hello guys! morning to you all, you all are welcome to this section of my tutorial on Cascading Style Sheets (CSS). In this tutorial am not going to be discussing much, i just want to discuss about the Measurement Units in CSS.

Before we start the actual discussion, i would like to give a brief idea about the CSS Measurement Units.

Friday, January 26, 2018

Css Inclusion


Hello guys! morning to you all and welcome to this section of my tutorial on Cascading Style Sheets (CSS). In my last tutorial i talked about CSS syntax with numerious example. Now in this tutorial i want to talk about the inclusion of Css to our various HTML document i.e how Css is included to HTML documents.

There are four ways to associate styles with your HTML document. Most commonly used methods are inline and External CSS. Now lets look at this four ways of associating styles with HTML documents one after the other.

Wednesday, January 24, 2018

Css Syntax


Hello guys evening and welcome  to this tutorial, in my last tutorial i introduced Cascading Style Sheets to you guys. Today i want to talk about the Syntax used in Cascading Style Sheets. Now without wasting much time lets get down to the business of the day.

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your HTML document. A style rule is made up of three parts:

Sunday, January 21, 2018

Css Introduction


Hello guys morning and welcome to another whole new section of my tutorial. For those of you that have being following up with my tutorials, you all know that we have completed our tutorials on HTML and in this tutorial i want to introduce Cascading Style Sheets (CSS) to you guys.

Cascading Style Sheets, generally referred to as CSS, is a simple design language meant for the purpose of simplifying the process of making web pages presentable.

Thursday, January 18, 2018

Html Layout

Hello guys morning and welcome to this section of my tutorial, in this tutorial i wanna be talking about HTML Layouts.
A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.
Now-a-days, all modern websites are using CSS and Javascript based framework to come up with responsive and dynamic websites but you can create a good layout using sim ple HTML tables or division tags in combination with other formatting tags. This section of my tutorial gives you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.