What you really need to learn in Javascript?
1. Where you can place JavaScript codes?
Anywhere in the web-pages, ideally in the header section, or in an external file. If you keep javascript codes in an external file, the codes will be re-usable from different web-pages2. Some basic programming:
document.write('Hello World');
This will only be displayed in javascript enabled browsers.
document.write('Page Requiring Javascript');
3. Variables and their scopes
var hello = 'Hello World';
document.write(hello);
var mynum = 5;
var smokes = false;
var riches = null;
var today = new Date;
Example use of variables:
var questions = 'If you have any questions about this
please email me.';
document.write(questions);
Another block can refer to questions variables without reassigning the value
document.write(questions);
variables declared within a function is recognized only withing that function. Variables declared outside of a function is recognized anywhere in the webpage within javascript code from the declaration place.
4. Operators
Assignment operators
var rich = 5000;
var lotsOfMoney = 100000;
rich = lotsOfMoney;
document.write(rich);
Arithmetic and concatenation operators
five = two + three;
profit = income - expenses;
income = sales * price;
payment = total / instalments;
option = randnum % choices;
b = ++a;
c = a++;
d = --a;
e = a--;
Combination of Operators like c/c++
joy += happiness;
price -= discount;
capital *= interest;
pie /= slices;
options %= choice;
Example use:
var singlePrice = 8;
var bulkPrice = singlePrice * 9;
document.write('Buy our Widgets $'
+singlePrice+' for one, $'+bulkPrice+' for ten
');
5. Comparing Variables, Logical statements
var red = 5;
var blue = 3;
var match = null;
if (red == blue)
{
match = 'equal';
}
else
{
match = 'unequal';
}
document.write(red + ' and ' + blue + ' are ' + match);
Other comparison operators:
if (red > blue)
if (red >= blue)
if (red < blue)
if (red < = blue)
if (red != blue)
Combining more than one comparison
if ((red == blue) || (red == green))
var red = 5;
var blue = 3;
var green = 3;
var match = null;
if ((red == blue) && (red == green))
{
match = 'equal';
}
else
{
purple = 'unequal';
}
document.write(red + ' and ' + blue + ' are ' + match);
Comparison in short
red == blue ? match = 'equal' : match = 'unequal';
instead of
if (red == blue)
{
match = 'equal';
}
else
{
match = 'unequal';
}
Example Use:
var discPrice = 25;
var regPrice = 25;
var discount = regPrice - discPrice;
if (discount > 0)
document.write('Save $'+discount+ ' off the normal price of $' +regPrice+ 'now only $'+discPrice+'.
');
else
document.write('Buy now at our regular cheap price of $' + regPrice+'.
' );
6. Switch statement in Javascript, very similar to C/C++/Java
use switch instead of multiple if/else if
var red = 1;
var result = null;
switch (red)
{
case 1: result = 'one'; break;
case 2: result = 'two'; break;
default: result = 'unknown';
}
document.write(result);
Example:
var message = 0;
switch (message)
{
case 1: document.write('Merry Christmas'); break;
case 2: document.write('Happy New Year'); break;
case 3: document.write('Happy Easter'); break;
case 4: document.write('Happy Holidays'); break;
default: document.write('Welcome');
}
7. Function
Defining a function
function myCode()
{
document.write('Hello World');
}
calling a function
myCode()
Example:
function displayMessage()
{
switch (message)
{
case 1: document.write('Merry Christmas'); break;
case 2: document.write('Happy New Year'); break;
case 3: document.write('Happy Easter'); break;
case 4: document.write('Happy Holidays'); break;
default: document.write('Welcome');
}
}
var message = 0;
displayMessage();
parameter passing
function writeSentence(argument1,argument2)
{
document.write('The '+argument1+' is '+argument2+'.
');
}
var a = 'table';
var b = 'chair';
var c = 'red';
var d = 'blue';
writeSentence(a,c);
writeSentence(b,c);
b = 'other ' + b;
writeSentence(b,d);
writeSentence('table',b); //passing the value directly
Example:
function displayMessage(m)
{
switch (m)
{
case 1: document.write('Merry Christmas'); break;
case 2: document.write('Happy New Year'); break;
case 3: document.write('Happy Easter'); break;
case 4: document.write('Happy Holidays'); break;
default: document.write('Welcome');
}
}
In Javascript functions can also return values
function validField(fld)
{
if (fld == '') return false;
return true;
}
function validField(fld)
{
return (fld != '');
}
How to receive returned values and process
document.write(myField + ' is ');
if (!validField(myField))
{
document.write('not ');
}
document.write('empty');
8. Alert and confirm
alert('Alert Message');
Will display a message box with the message. Very useful in debugging javascript applications.
use confirm(), when you need user agreement on an issue. like:
if (confirm('Select a button'))
{
alert('You selected OK');
}
else
{
alert('You selected Cancel');
}
9. comments
// Scrolling Ad Javascript
// copyright 3rd September 2004, by Stephen Chapman
// permission to use this Javascript on your web page is
// granted provided that all of the code in this script (including
// these comments) is used without any alteration
or
/* Scrolling Ad Javascript
copyright 3rd September 2004, by Stephen Chapman
permission to use this Javascript on your web page is
granted provided that all of the code in this script (including
these comments) is used without any alteration */
10. Debugging JavaScript
Test in different browsers like IE, Mozilla, Firfox, Netscape
Enable Javascript and script debugging
Script debugging usually reside under tools menu under browsing or web development sub-options
Using alert to check variable values or if you can reach to a particular point of your code
use bookmarklets, these are small scripts that can be used as plug in into browsers to provide error information.
Use firebug in firefox, also use error console under tools menu to debug javascript error.
Visual interdev provides Javascript debugging you may also enable external debugging by such programs
11. External javascript
You can place all of your javascript codes to an external file. and use the file scripts/functions from any webpage.
You just need to provide a reference to that external file.
You can provide reference as follows:
<script language="javascript" type="text/javascript"
src="hello.js">
Note: do not include any or in the external file.
12. Using tag: this tag may help you to provide some information to the visitors
when javascript is disabled or not supported by the browsers.
document.write('Hello Javascript World');
Hello World Without Javascript
This page uses Javascript. Your browser either
doesn't support Javascript or you have it turned off.
To see this page as it is meant to appear please use
a Javascript enabled browser.
13. Objects and properties in Javascript
var strlen = myField.length;
var str = mynum.toString();
function theLetter(num)
{
var str = 'abcdefghijklmnopqustuvwxyz';
return str.substr(num-1,1);
}
document.write(theLetter(5));
14. Arrays in Javascript
var myArray = new Array();
var myArray = new Array('message one',
'message two','message three');
document.write(myArray[0]);
myArray[3] = 'message four';
function displayMessage(m)
{
var greeting = new Array('Welcome','Merry Christmas',
'Happy New Year','Happy Easter','Happy Holidays');
if (m greeting.length) m = 0;
document.write(greeting[m]);
}
15. Loops
for (var i=0; i<10; i++)
{
document.write(i);
}
var x = 0;
while (x<10)
{
document.write(x);
x++;
}
var x = 12;
do
{
document.write(x);
x++;
} while (x<10)
16. Date and Time in Javascript
//current date
var myDate = new Date;
myDate.setDate(15);
myDate.setMonth(3); // January = 0
myDate.setFullYear(2006);
myDate.setDate(myDate.getDate()+7);
From: http://sitestree.com/?p=4732
Categories:13
Tags:
Post Data:2011-02-12 19:58:06
Shop Online: <a href='https://www.ShopForSoul.com/' target='new' rel="noopener">https://www.ShopForSoul.com/</a>
(Big Data, Cloud, Security, Machine Learning): Courses: <a href='http://Training.SitesTree.com' target='new' rel="noopener"> http://Training.SitesTree.com</a>
In Bengali: <a href='http://Bangla.SaLearningSchool.com' target='new' rel="noopener">http://Bangla.SaLearningSchool.com</a>
<a href='http://SitesTree.com' target='new' rel="noopener">http://SitesTree.com</a>
8112223 Canada Inc./JustEtc: <a href='http://JustEtc.net' target='new' rel="noopener">http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning) </a>
Shop Online: <a href='https://www.ShopForSoul.com'> https://www.ShopForSoul.com/</a>
Medium: <a href='https://medium.com/@SayedAhmedCanada' target='new' rel="noopener"> https://medium.com/@SayedAhmedCanada </a>
