Tutorial Javascript intruduction

Tutorial Javascript intruduction - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Design (https://sinister.li/Forum-Design)
+--- Forum: Web Design (https://sinister.li/Forum-Web-Design)
+--- Thread: Tutorial Javascript intruduction (/Thread-Tutorial-Javascript-intruduction)

Javascript intruduction - Merkuri - 10-24-2012

Before you start with Javascript you should know
-Perfect HTML
-CSS

Introduction

Javascript is one of the most popular scripting language in the world it is the programming language of the web for servers, PCs...
Javascript is scripting language a scripting language is a lightweight programming language
Javascript can write directly to HTML output stream react to HTML events and test HTML from input delete and create HTML elements

How to insert javascript in document
There are 3 ways to insert javascript code in document
1.In head tag

Write this in head tag

Code:
<script type="text/javascript"></script>

And here is example document

Code:
<html>
<head>
<script type="text/javascript">alert(0);</script>
</head>
<body>
</body>
</html>

Insert in body tag (the same as in head tag but code is write in between body tag)
Write this in the body tag

Code:
<script type="text/javascript"></script>

Here is example

Code:
<html>
<head>
</head>
<body>
<script type="text/javascript">alert(0);</script>
</body>
</html>

Insert from external file
Like in CSS
Write this in body tag

Code:
<script src="scripts.js"></script>

and write the scripts in this document

Manipulating HTML elements

You should give to your elements id for example

Code:
<p id="demo">Paragraph</p>

And use script ot manipulate the element

Code:
document.getElementById("demo").innerHTML="My first javascript";

So your code should look like this

Code:
<p id="demo">Paragraph</p>

<script>
document.getElementById("demo").innerHTML="My first javaScript";
</script>

When javascript is executed by the web browser in this case the browser will access the html element (id="demo") and replace its content innetHTML with "My first javascript" or what you have write

Write to the document output

write this code

Code:
document.write("<p> My first paragraph with javascript</p>");

Use document.write() to write direcly into the document output if you use document.write() after document has finish loading the entire HTML page will be overwritten

Statements

In javascript statements are commands to the browser the purpose of the statements is to tell the browser what to do

Example

Code:
document.getElementById("demo").innerHTML="Statement";

This statement tells to the browser to write "Statement" inside an HTML element with id="demo"

!Javascript is case sensitie there is different between function getElementById and getElementbyID or myVariable and MyVariable also javascript ignores extra spaces you can add white space ot your script to make it more readable example :

Code:
var name ="gagd"; 
var name = "fsdfs";

!

Varialbes
variable are containers for storing information
example

Code:
var number1 = 1;
var number2 = 2;
var number3 = 3;
var total = number1 + number2 + number4;

In javascript there is only one type variable (not like c++ for example)

example :

Code:
var pi = 3.14;
var name = "fname lname";
var c = 'asdad';

and one example about variable

Code:
<p id="demo"></p>
var motor="Yamaha";
document.getElementById("demo").innerHTML=motor;

Javascript operators

+ Addition x=2+2
- Subtraction x=5-2
* Multiplication x=3*2
/ Division x=4/2
% Modulus (division remainder) x=5%2 (result for x 1 result for y 5) lets say that y=5
++ Increment x=++y ( result for x 9 result for y 9)lets say that y=5
-- Decrement decrement x=--y (result for =5 result for y =4)lets say that y=5
= x=y
<= x<=y
>= x>=y
+= x+=y same as x=x+y
-= x-=y same as x=x-y
*= x*=y same as x=x*y
/+ x/=y same as x=x/y
%= x%=y same as x=x%y

RE: Javascript intruduction - The Protagonist - 10-24-2012

Great tutorial Synchro. Will add it to the "Programming Resources" thread Smile

RE: Javascript intruduction - Charon - 10-24-2012

Good tutorial Synchro, keep on doing your thing.

And yes you should continue making those HQ Javascript tutorials!