Tutorial

Tutorial

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive
Chapter 1 - JavaScript Introduction
Chapter 1 - JavaScript Introduction

JavaScript is a computer language for programming on the Internet . It is the world's most popular programming language. . ( Known as the "script " (script) is to create and develop a website (with HTML) to make our site with movement . Users can meet even more.

JavaScript is a scripting language

A Scripting language is a lightweight programming language

JavaScript is a Programming Code that can be inserted in HTML pages.

You can create small application type processes with JavaScript like a calculator or a primitive game of some sort

 

However there are some serious uses for JavaScript

- Makes it easy to write applications without relying on other languages.

- A statement that responds to the user.

- Using monitoring data such as alarm when an error submitting the form .

- Used to verify that the user, such as authentication , use Browser anything.

- Has generated Cookies

The lesson on JavaScript is described and examples of the use of JavaScript to the students understand the compatibility of JavaScript with HTML and CSS, Before you start out with more complex javascripts you should understand the basics

 

{--mlinkarticle=2931--}Chapter 2 - JavaScript How To {--mlinkarticle--}

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive

JavaScript in HTML must be inserted between <script> and </script> tags.

JavaScript can be put in the <body> and in the <head> section of an HTML page.

Example of JavaScript in the <body> :

<html>
<body>
<script>
document.write("<h1>Mindphp.com</h1>");
document.write("<p>Tutorials</p>");
</script>
</body>
</html>

This is the result:

 

Next

Chapter 3 - JavaScript Output

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive

1. you can use the document.getElementById(id) method to access an HTML element from JavaScript.

Use the "id" attribute to identify the HTML element

benefits of Document.getElementById:

    (1). Available for access in the Form of an HTML Element Id in Attribute Id. 

    (2). Use for the management of various Element Object in HTML Form. 

    (3). Representation of Element Object access method such as value, focus, etc.. 

Example

<html>
<body>
<h1 id="demo">Tutorial</h1>
<script>
document.getElementById("demo").innerHTML="Mindphp.com";
</script>
</body>
</html>

This is the result:

The JavaScript is executed by the web Browser. In this case, the browser will access the HTML element with id="demo", and replace its content (innerHTML) with "Mindphp.com".

 

2. Document.write command

Is the command for printing text or information on the documentation page (Document) or on Elements such as requirements in JavaScript, which is written as A to print text on html document

Example:

<html>
<body>
<script>
document.write("<p>JavaScript</p>");
</script>
</body>
</html>

This is the result:

 

Next

{--mlinkarticle=2935--}Chapter 4 - JavaScript Statements{--mlinkarticle--}

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive

JavaScript statements is the command that ordered JavaScript. Operations in the order they were placed. A written order to end or end commands with semi colon (;). Semicolon separates JavaScript statements. Normally you add a semicolon at the end of each executable statement. Using semicolons also makes it possible to write many statements on one line.

Example:

<html>
<body>
<p id="demo">JavaScript Tutorial.</p>
<div id="myDIV">www.Mindphp.com</div>
<script>
document.getElementById("demo").innerHTML="Learn more";
document.getElementById("myDIV").innerHTML="Mindphpwebsite";
</script>
</body>
</html>

This is the result:

 

JavaScript Code Blocks

JavaScript statements can be grouped together in blocks.

Blocks start with a left curly bracket, and end with a right curly bracket.

The purpose of a block is to make the sequence of a statements execute together.

A good example of statements grouped together in blocks, are JavaScript functions.

 

Example: "This example will run a function that will manipulate two HTML elements:

<html>
<body>
<p id="myPar">www.MindPHP.com</p>
<div id="myDiv">MindPHP</div>
<p>
<button type="button" onclick="myFunction()">Click Here</button>
</p>
<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Forums";
document.getElementById("myDiv").innerHTML="Tutorials";
}
</script>
<p>When you click on "Click Here", the two elements will change.</p>
</body>
</html>

This is the result:

 

 

Next

{--mlinkarticle=2936--}Chapter 5 - JavaScript Comments{--mlinkarticle--}

User Rating: 1 / 5

Star ActiveStar InactiveStar InactiveStar InactiveStar Inactive

When writing code you may have some complex logic that is confusing. This is a perfect opportunity to include some comments in the code that will explain what is going on. Not only will this help you remember it later on, but someone else views your code, they will also be able to understand the code.

Another great thing about comments is the ability to comments to remove bits of code from execution when you are debugging your scripts. This lesson will teach you how to create two types of comments in JavaScript:

Single line comments and Multi-line comments.

Creating Single line comments:

To create a single line comment in JavaScript, you place two slashes "//" in front of the code. When you place these two slashes, all text to the right of them will be ignored, until the next line.

Example:

 <html>
<body>
<script>
//This is a Single line comment
document.write("<h1>Mindphp.com</h1>");
//This is another Single line comment
</script>
</body>
</html>

This is the result:

 

Creating Multi-line comments:

 Although a single line comment is quite useful, it can sometimes be burdensome to use when disabling long segments of code or inserting long-winded comment. For this large comments you can use JavaScript's multi-line comment that begin with /* and end with */

Example:

<html>
<body>
<script>
/*This is a comment
This is a comment
This is a comment
*/
document.write("<h1>JavaScript</h1>");
</script>
</body>
</html>

This is the result:

 

 

Next

{--mlinkarticle=2937--}Chapter 6 - JavaScript Variables{--mlinkarticle--}

 

User Rating: 1 / 5

Star ActiveStar InactiveStar InactiveStar InactiveStar Inactive

Variable (Variable) 

For that variable Essentially, its function is to store a value (value), which can sometimes be used to calculate the fee or charge of any kind. For reference or to check when needed. A variable in JavaScript, it begins with the word var followed by the variable name. 

An example of a variable declaration 

Code:

var x;

If a variable is declared dormant. It will be used later The conclusion is a variable that has no value at all. 

Code:

var x=10;

For this case, the variable is declared and assigned a value by an equal sign

 

JavaScript defines the basic data types (primitive data types) to use three types, that is.

- Numbers such as 3, 5, 7, 9. 

- Letters such as "I am", "SuperHero". 

-boolean (true or not the fact) as "true" (true), "false" (not really).

 Example:

<html>
<body>
<script>
var age=23;
var name="Harry Potter";
var answer="Correct";
document.write(age + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>
</body>
</html>

This is the result:

 

 

Next

{--mlinkarticle=2938--}Chapter 7 - JavaScript Data Types{--mlinkarticle--}

User Rating: 1 / 5

Star ActiveStar InactiveStar InactiveStar InactiveStar Inactive

Data Types (types of information) are used to determine the type of data values ​​to variables. To match the reference data variables to use are as follows. 

-number refers to the figure contains an integer data type (Integer) and a real number (Floating). 

for example,

var x=34.50;
var y=34;

Example:

<html>
<body>
<script>
var x=34.50;
var y=34;
document.write(x + "<br>")
document.write(y + "<br>")
</script>
</body>
</html>

This is the result:

 

-boolean or logical data refers to the two logical states which is true (True) and false (False). 

for example, 

var x = true; 
var y = false; 

 

-string refers to text data. Which will be defined in quotation marks ("..."). 

for example, 

var name = "Harry Potter"; 
var age = "age 23 years";

Example:

<html>
<body>
<script>
var name1="Batman";
var name2="Superman";
var name3="Spiderman";
document.write(name1 + "<br>")
document.write(name2 + "<br>")
document.write(name3 + "<br>")
</script>
</body>
</html>

This is the result:

 

 -null means no data values ​​for any null-terminated value of the variable storage space out of memory. 

for example, 

cars = null; 
person = null; 

 

-Array is multiple data comes sequentially. 

for example, 

var cars = new Array (); 
cars [0] = "Toyota"; 
cars [1] = "Honda"; 
cars [2] = "BMW";

Example:

<html>
<body>
<script>
var i;
var cars = new Array();
cars[0] = "Toyota";
cars[1] = "Honda";
cars[2] = "BMW";
for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>
</body>
</html>

This is the result:

 

 

Next

 

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive

In JavaScript , it will attempt to assume that everything is an object (Objects) to do it. This is for ease of programming objects (Objects) , but it is composed of two main elements .

 

1. Properties are values associated with objects.

Object is assumed that the shirt was too Properties shirt brand, weight, color, price.

Suppose you Propeties Object as it 's you, it's like sex, age , weight and height .

Example:

<html>
<body>
<script>
var shirt=new Object();
shirt.name="Billabong";
shirt.color="blue";
shirt.price="60 USD"; 
document.write("The brand is - " +shirt.name +"<br> The Color is - " + shirt.color + "<br>Price - " +shirt.price);
</script>
</body>
</html>

This is the result:

 

2. Methods are actions that objects can perform.

Radio. Play () Play the tape. 

Radio. Stop () stops 

Door. Lock () Locks 

Cars. Brake () stop. 

Example:

<html> 
<body> 
<script> 
var str = new String ("MindPHP"); 
document.write (str.link ("http://www.Mindphp.com")); 
</script> 
</body> 
</html>

This is the result:

 

 

Next

 

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive

Functions is a set of commands used in working either . Which runs on the run.

JavaScript Functions Syntax

   Nature of the function is as follows.

function named functions (arguments) .

{ / / Commands } - function names . Naming function is similar to the principle of variable naming . By bestselling author with lowercase. Or if there are multiple words may begin with lowercase letters. The next start with a capital letter such as submitForm (), blockInvalidChar () etc..

  - Arguments (argument) , or the parameter is some information functions required in data processing. This argument is optional , depending on the need .

 

Running the function .

   For me to run the software function , then the function name and arguments  at the point you want to use this function . 

However, the run function , not necessarily in the same <script> tag with the writing function . Or some of the run function can be in HTML tags , but running the function in the HTML tags are mainly caused by the response to certain actions, such as clicking a check . Sainsbury, the characters , etc. 

Example:

<html>
<body>
<p>Click the button to call a function with arguments</p>
<button onclick="myFunction('Spiderman','SuperHero')">Click Here</button>
<script>
function myFunction(name,job)
{alert("Welcome " + name + ", the " + job);}
</script>
</body>
</html>

This is the result:

 

From the above example, when clicking the button. Appears 'welcome Spiderman the SuperHero'.

 

The function returns (Functions With a Return Value). 

    A function return value is created like a normal function. But before the end of the function is used to send commands return some value back out, 

Example:

<html>
<body>
<p id="demo"></p>
<script>
function myFunction(a,b)
{
return a*b;
 }
document.getElementById("demo").innerHTML=myFunction(5,3);
</script>
</body>
</html>

This example calls a function which performs a calculation, and returns the result:

This is the result: 

 

It is evident that the function was being sent back. Which is that it is the answer to a multiple of a and b or 5x3 which is 15 itself. 

    To run the function with the return value. If we want to bring it up to use it to create other variable is the value returned is like.

 

var a = oddorEven (9); // storing the function of the variable a.
var b = oddorEven (10);

 

Function and scope of the variable.

  The scope of the function is defined by { } block , so the declaration or use variables. We must consider the extent of the scope of variables and functions well. 

As follows:

1 . Variables declared in a function (local variable).

Variables declared in a function , it is only available in the function . We were unable to run the variable declared in the function from outside the function , 

for example.

function f () {
var x = 123; 

document.write (x); / / Error! Error occurred because the variable x declared it in the blog function f () function, which at the end of it. Variables such it shall be canceled. We can not refer to variables such.

 

2. Variables that need to be shared (global variable). 

There may be some information that we need to use both in and out of functions. In this case, to create a global variable to store the data. Which variable is to build it outside the function. And not on any such function. 

var ab = 123; 
function f () {
ab + +; / / ok!,}. 
document. write (ab); // 123. 
f (); 
document. write (ab); // 124.

 

 

 

Next

{--mlinkarticle=2941--}Chapter 10 - JavaScript Operators{--mlinkarticle--}

Subcategories

Javascript

MVC Concept

Joomla Extension Dev

jQuery Tutorial