Escolar Documentos
Profissional Documentos
Cultura Documentos
JavaScript Tutorial
Home Tutorial JavaScript: from the Ground to Closures First Steps
Hello, World! Browser Developer's Tools Tutorial
1. Code structure 1. Semicolon 2. Missing semicolon pitfalls 2. Variables 1. Definition 2. Variable names 3. Reserved words 4. Language types 5. Weak typing 3. Comments 1. Multiline comments 2. Blocks 4. Summary JavaScript is a special language indeed. Especially for those coming from PHP, C, Java. Lets start it with language basics: variables, coding style etc.
Like
Setup your environment Hello, World! Variables and statements Browser Developer's Tools User interaction: alert, prompt and confirm Operators and constructs
Functions: declarations and expressions Mastering data types Four scents of "this" Type detection Function arguments Static variables and methods Scopes and Closures Decorators
Code structure
The code consists of multiple statements.
Semicolon
Statements are separated by a semicolon.
Show!
Frames and windows Regular expressions in JavaScript Advanced and Extra stuff
0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0
< h t m l > < b o d y > < s c r i p t > a l e r t ( ' H e l l o ' ) ; a l e r t ( ' W o r l d ! ' ) ; < / s c r i p t > < / b o d y > < / h t m l >
Spaces and tabs are ignored, so one-lining is possible: a l e r t ( ' H e l l o ' ) ; a l e r t ( ' W o r l d ! ' ) ;
But newlines are not ignored. Instead, a newline may separate statements, just like semicolons do. These two lines are fully equivalent: a=5 a=5 ;
http://javascript.info/tutorial/variables-and-statements
1/5
1/21/2014
r e t u r n r e s u l t ;
Is, because of a newline, same as r e t u r n ; r e s u l t ; And thats of course different from: r e t u r nr e s u l t Only the last example actually returns r e s u l t . To insert a convenience newline, you can put a backslash before line break, like that: 1 v a ra=" l o n g\ 2 l i n e" 3 4 r e t u r n\ 5 r e s u l t A backslash before a line break forces the interpreter to ignore the newline. The newline is also ignored if the expression is not finished, particularly for unfinished operators or unclosed brackets: 1 v a ra=" l o n g"+ 2 "l i n e" 3 4 v a rb=2+( 5 2+3 6 ) JavaScript tries to be even smarter than that. The output in the example below is 8 , the newline is ignored. And dont ask me why.
Run!
1 v a rb=2*2 2 +4 3 4 a l e r t ( b ) The rules about the semicolon insertion are complicated and sometimes weird. They are described in the ECMAScript specification. In short, it is possible to omit ending semicolons in most cases, but doing so gives freedom to the interpreter. The freedom which it could abuse and cause bugs.
Open solution
Variables
If you are not familiar with general programming variable concept, there is a great wiki article about it Shortly, a variable is a named box, where you could put a value. .
Definition
First, a variable should be defined. That can be done in any place of code using directive v a r
http://javascript.info/tutorial/variables-and-statements
2/5
1/21/2014
v a rx
When a variable is defined, it is possible to operate with it, for example, put a value into it: v a rx x=5 Or you can define multiple variables in single v a rstatement: v a ra ,b ,c It is possible to assign a variable in definition: v a rn a m e=" J o h n " ,s o n g=" L a l a l a "
In JavaScript you can assign to a variable which you havent defined using v a r : n o V a r=" v a l u e " Technically, it doesnt cause an error, but dont go this way. Always define variables with v a r . Thats a good style and helps to evade certain errors, like in the code below. Run this in IE:
Show!
0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1
< h t m l > < b o d y > < d i vi d = " t e s t " > < / d i v > < s c r i p t > t e s t=5 a l e r t ( t e s t ) < / s c r i p t > < / b o d y > < / h t m l >
There will be an error. IE, Safari/Chrome and Opera create a variable for each element with i d , so variable t e s t references D I Vin the example above. But in IE the auto-generated variable is an internal reference that cant be changed. Thats why assignment to t e s tcauses an error. The following code works:
Show!
0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1
< h t m l > < b o d y > < d i vi d = " t e s t " > < / d i v > < s c r i p t > v a rt e s t=5 a l e r t ( t e s t ) < / s c r i p t > < / b o d y > < / h t m l >
Variable names
A variable name first char must be a letter, $or _ . The second char and other chars are allowed to be digits. Strange, but valid names: 1 v a r$ t h i s , 2 _ p r i v a t e , 3 $ , 4 _ , 5 $ 1 , 6 u s e r 1 5
Reserved words
There is also a list of reserved words, which cant be variable names. It includes v a r ,f u n c t i o n ,r e t u r n ,
http://javascript.info/tutorial/variables-and-statements
3/5
1/21/2014
c l a s s ,i m p l e m e n t sand other words, most of them are used in the language itself. Some words, like c l a s sare not used in modern JavaScript, but still reserved. There are browsers which allow them, but using them may lead into a pitfall. The following code works in Firefox which allows ' c l a s s 'as variable name. And fails in Safari which gives syntax error on such variable:
Run!
1 v a rc l a s s=5 2 a l e r t ( c l a s s ) Read more about naming principles and how to make good names in the article Variable naming.
Language types
JavaScript defined the following basic types: number Any number, integer and non-integer: 1 ,2 ,1 . 5etc. string A string, like ' c a t ' ,' d o g 'or ' m ym o m m i eb o u g h tap u p p y ' boolean Two possible values: t r u eand f a l s e . object Objects.. Well talk about them later. special values There are special values which have no type: n u l land u n d e f i n e d .
Weak typing
Variables in JavaScript are weakly typed. That means two things: 1. Every value has a type 2. You can put a value of any type into any variable For example: v a ru s e r I d=1 2 3 ; / /1 2 3i san u m b e r v a rn a m e=" J o h n " ; / /" J o h n "i sas t r i n g But you are free to reassign the variable to a value of another type: v a ru s e r I d=1 2 3 ; u s e r I d=f a l s e ; / /1 2 3i san u m b e r / /n o wu s e r I di sb o o l e a n
Before a variable is assigned, it has u n d e f i n e dvalue. The following statements mean the same: v a rx v a rx=u n d e f i n e d Generally, u n d e f i n e dmeans no value.
Comments
Did you note these // from the previous example? That were comments. Comments in JavaScript have two different forms. Single line comment starts with / /and continues to the end of line. / /l e t ' ss e ew h oi sh e r e : v a rn a m e=" J o h n " ;/ /M ym o s tv a l u e dv i s i t o r Anything you put after / /is ignored by the interpreter.
Multiline comments
Multiline comment is enclosed with / *. . . /and may span multiple lines. 1 2 3 4 5 6 7 / * T h ef o l l o w i n gv a r i a b l eh a sas h o r tn a m e . U s u a l l yas h o r tn a m em e a n st h a tt h ev a r i a b l ei s t e m p o r a r ya n du s e do n l yi nn e a r e s tc o d e . * / v a ra=" J o h n " ;
Blocks
The next building element is a block. It consists of multiple statements wrapped in curly braces, like the following:
http://javascript.info/tutorial/variables-and-statements
4/5
1/21/2014
1 v a ri=5 ; 2 { 3 i=6 ; 4 } 5 v a rb ;
Standalone blocks are never used in JavaScript. But curly braced statements come as a part of more complex syntax constructs like f o r ,i f ,w h i l e , functions, etc. Well get to them in the next sections.
Summary
A few important points to summarize: Variables are defined by v a ranywhere in the code. They can be assigned in definition. A variable can contain a value of any type. There are single-line / /and multiline / . . . * /comments. Statements are divided by semicolons. A newline usually implies a semicolon, so technically it is possible to omit them most time. There are arguments pro and contra omitting semicolons. Choose your way with eyes open. Hello, World! Browser Developer's Tools
See also:
Variable naming Google JavaScript Style Guide
The content of this site is available under the terms of CC BY-NC-SA. Ilya Kantor, 2011.
"JavaScript is a registered trademark of Oracle corp. This site is not affiliated with Oracle corp.
http://javascript.info/tutorial/variables-and-statements
5/5