Search The Website


Web development links & resources


Content:

JavaScript Tutorial, JavaScript Syntax, JavaScripts Examples, Please add your comments, and Useful Links.

 

JavaScript Tutorial

JavaScript to program the behaviour of dynamic, interactive web pages.
JavaScript Features
The following features are common to all conforming ECMAScript implementations, ( ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the Web, in the form of several well-known implementations such as JavaScript, JScript and ActionScript.) unless explicitly specified otherwise.
 

Imperative and structured: JavaScript supports much of the structured programming syntax from C , statement such as if, and while loops ... etc.

 

Dynamic:
Dynamic typing: As in most scripting languages, types, are associated with values, not with variables.

 
Object-based: JavaScript is almost entirely object-based. JavaScript objects are associative arrays, They support two equivalent syntaxes: dot notation (obj.x = 10) and bracket notation (obj['x'] = 10).


Run-time evaluation: JavaScript includes an eval function that can execute statements provided as strings at run-time.


Functional: Functions  are first-class; they are objects themselves. As such, they have properties and methods, such as .call() and .bind().
 

Including JavaScript Libraries: to use a JavaScript framework library in your web pages, just include the library in a <script> tag.

Google AJAX provides the links for the majority of JavaScript libraries including:
AngularJS, Dojo, Ext Core, jQuery, jQuery Mobile, jQuery UI, MooTools, Prototype, SPF, SWFObject, three.js, and Web Font Loader.

Yahoo provide an extensive JavaScript library (The YUI):
 <script src = "http:// yui.yahooapis.com  / 3.18.1 /  build/yui/yui-min.js" > </script>
 

Back to top

 JavaScript Syntax

JavaScript Syntax: Wikipedia provide good description to JavaScript Syntax.

 

Simple examples:
Variables in JavaScript can be defined using the var keyword:


var x; // defines the variable x, although no value is assigned to it by default
var y = 2; // defines the variable y and assigns the value of 2 to it


Note the comments in the example above, both of which were preceded with two forward slashes.


There is no built-in I/O functionality in JavaScript;
... indeed, there are no provisions in this specification for input of external data or output of computed results.


However, most runtime environments have a console object that can be used to print output. Here is a minimalist Hello World program:
console.log ("Hello World!");
A simple recursive function:


Tfunction factorial(n) {
if (n == 0) {
return 1;
}
 

Back to top

 JavaScript Examples

You may learn JavaScript by examples: ( W3 School ).
Example 1: is about JavaScript, and how JavaScript works with HTML and CSS.

<button type =  "button" onclick  =  "document.getElementById  ('demo1').innerHTML = Date()"> Display Date and Time </button>
<p id ="demo1"></p>
 

Example 2: JavaScript can change HTML content.

<button type  =  "button" onclick =  "document.getElementById  ('demo2').innerHTML  =  'Hello JavaScript!'">  Hello JavaScript!  </button>
<p id = "demo2"> </p>
 

Example 3 JavaScript Can Change Images

<img id = "BulbImage"  onclick = "changeImage()"  src  =  "images/pic_bulboff.gif"  width  =  "100" height = "180">
<script>
     function changeImage() {
          var image =  document.getElementById  ('BulbImage');
          if  (  image.src.match("bulbon"  )  )   {
               image.src =  "images / pic_bulboff.gif";
          } else {
               image.src =  "images / pic_bulbon.gif";
              }
          }
</script>
<p> Click the light bulb to turn on/off the light. </p>
 

Click the light bulb to turn on/off the light.

Example 4 JavaScript can change the style of an HTML element.

<script>
     function Function4() {
          var y =  document.getElementById  ("demo4");
          y.style.fontSize  =  "25px";
          y.style.color  =  "red";
     }
</script>
<button type  =  "button" onclick  =  "Function4()">  change the style of the HTML  element below.</button>
<p id="demo4">  JavaScript can change the style of an HTML element. </p>
 

JavaScript can change the style of an HTML element.

Example 5 JavaScript Can Validate Input

<p>Please input a number between 1 and 10:</p>
<input id = "numb" type = "number">
<button type = "button" onclick  =  "Function5()">  Submit </button>
<p id = "demo5"> </p>
<script>
     function Function5() {
          var j, text;
//  Get the value of the input field with id = "numb"
          j =  document.getElementById  ("numb") .value;
//  If j is Not a Number or less than one or greater than 10
          if (isNaN(j) || j < 1 || j > 10) {
               text =  "<b>Input not valid</b>";
         } else {
               text =  "<b>Input OK</b>";
                   }
          document.getElementById  ("demo5").innerHTML  =  text;
      }
</script>

 

    1.  Changing HTML Content

     2.  Changing Paragraph

     3.  Changing Style

     4.  Date and Time

     5.  Time HMS Realtime Digital Clock

More Examples using jQuery:

     1.  Container Position Manipulation up&down

     2.  Hide and Show

     3.  jQuery Download Using Google

     4.  Panel Position Manipulation to the Right

     5.  Slide Panel down or up

More Examples using jQuery-ui:

     1.  Animate

     2.  Buttons

     3.  Draggable Box

     4.  Resizable Box

     5.  Slider

     6.  Sortable Items List

     7.  Switch Class Effect

     8.  Tabs

     9.  Tips for form filling and any dataontainers

 

Back to top

  Guestbook

Back to top

 Useful Links

Web Development Resources

Coding Help

Development Tools

Collection of some of the most useful web development resources

Browse

Hashim IT Solutions  |  RWD  |  HTML  |  CSS  |  JavaScript  |  PHP  |  Bootstrap  | About  |  HashimWebSite  |  ExpertGrabber  |  ContactUs  |  Sitemap  |

Back to top