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-pages
2. Some basic programming:
<script language="javascript" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
document.write('<b>Hello World</b>');
</script>
This will only be displayed in javascript enabled browsers.
<script language="javascript" type="text/javascript">
document.write('<a href="script.htm">Page Requiring Javascript</a>');
</script>
3. Variables and their scopes
<script language="javascript" type="text/javascript">
var hello = 'Hello World';
document.write(hello);
</script>
var mynum = 5;
var smokes = false;
var riches = null;
var today = new Date;
Example use of variables:
<script language="javascript" type="text/javascript">
var questions = '<p>If you have any questions about this
please <a href="mailto:me@myaddress.com">email me</a>.</p>';
document.write(questions);
</script>
Another block can refer to questions variables without reassigning the value
<script language="javascript" type="text/javascript">
document.write(questions);
</script>
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
<script language="javascript" type="text/javascript">
var rich = 5000;
var lotsOfMoney = 100000;
rich = lotsOfMoney;
document.write(rich);
</script>
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:
<script language="javascript" type="text/javascript">
var singlePrice = 8;
var bulkPrice = singlePrice * 9;
document.write('<p>Buy our Widgets $'
+singlePrice+' for one, $'+bulkPrice+' for ten</p>');
</script>
5. Comparing Variables, Logical statements
<script language="javascript" type="text/javascript">
var red = 5;
var blue = 3;
var match = null;
if (red == blue)
{
match = 'equal';
}
else
{
match = 'unequal';
}
document.write(red + ' and ' + blue + ' are ' + match);
</script>
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))
<script language="javascript" type="text/javascript">
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);
</script>
Comparison in short
red == blue ? match = 'equal' : match = 'unequal';
instead of
if (red == blue)
{
match = 'equal';
}
else
{
match = 'unequal';
}
Example Use:
<script language="javascript" type="text/javascript">
var discPrice = 25;
var regPrice = 25;
var discount = regPrice - discPrice;
if (discount > 0)
document.write('<p>Save $'+discount+ ' off the normal price of $' +regPrice+ 'now only
$'+discPrice+'.</p>');
else
document.write('<p>Buy now at our regular cheap price of $' +
regPrice+'.</p>' );
</script>
6. Switch statement in Javascript, very similar to C/C++/Java
use switch instead of multiple if/else if
<script language="javascript" type="text/javascript">
var red = 1;
var result = null;
switch (red)
{
case 1: result = 'one'; break;
case 2: result = 'two'; break;
default: result = 'unknown';
}
document.write(result);
</script>
Example:
<script language="javascript" type="text/javascript">
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');
}
</script>
7. Function
Defining a function
function myCode()
{
document.write('<b>Hello World</b>');
}
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+'.<br />');
}
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:
http://hello.js
Note: do not include any <script> or </script> in the external file.
12. Using <noscript> tag: this tag may help you to provide some information to the
visitors
when javascript is disabled or not supported by the browsers.
<script language="javascript" type="text/javascript">
document.write('<b>Hello Javascript World</b>');
</script>
<noscript>Hello World Without Javascript</noscript>
<noscript>
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.
</noscript>
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 < 0 || 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=3467
Categories:JavaScript
Tags:
Post Data:2016-07-15 23:39:11
Shop Online: https://www.ShopForSoul.com/
(Big Data, Cloud, Security, Machine Learning): Courses: http://Training.SitesTree.com
In Bengali: http://Bangla.SaLearningSchool.com
http://SitesTree.com
8112223 Canada Inc./JustEtc: http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning)
Shop Online: https://www.ShopForSoul.com/
Medium: https://medium.com/@SayedAhmedCanada
