This is your Park !!

JavaScript Comments

JavaScript comments can be used to explain JavaScript code, and to make it more readable.

JavaScript comments can also be used to prevent execution, when testing alternative code.

Single Line Comments

Single line comments start with //.

Any text between // and the end of the line, will be ignored by JavaScript (will not be executed).

This example uses a single line comment before each line, to explain the code:

// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";

This example uses a single line comment at the end of each line, to explain the code:

Example

var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2

Multi-line Comments

Multi-line comments start with /* and end with */.

Any text between /* and */ will be ignored by JavaScript.

This example uses a multi-line comment (a comment block) to explain the code:

Example

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

Using Comments to Prevent Execution

Using comments to prevent execution of code, is suitable for code testing.

Adding // in front of a code line changes the code lines from an executable line to a comment.

This example uses // to prevent execution of one of the code lines:

<p><strong>Note:</strong> The comment is not executed.</p>

'JavaScript' 카테고리의 다른 글

[08] JavaScript Operators (0)	2015.07.13
[07] JavaScript Variables (0)	2015.07.13
[05] JavaScript Statements (0)	2015.07.13
[04] JavaScript Syntax (0)	2015.07.13
[03] JavaScript Output (0)	2015.07.13

[05] JavaScript Statements

2015. 7. 13. 17:19

In HTML, JavaScript statements are "instructions" to be "executed" by the web browser.

JavaScript Statements

This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":

JavaScript Programs

Most JavaScript programs contain many JavaScript statements.

The statements are executed, one by one, in the same order as they are written.

In this example, x, y, and z is given values, and finally z is displayed:

Example

var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;

JavaScript programs (and JavaScript statements) are often called JavaScript code.

Semicolons ;

Semicolons separate JavaScript statements.

Add a semicolon at the end of each executable statement:

When separated by semicolons, multiple statements on one line are allowed:

a = 5; b = 6; c = a + b;

On the web, you might see examples without semicolons.
Ending statements with semicolon is not required, but highly recommended.

JavaScript White Space

JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.

The following lines are equivalent:

var person = "Hege";
var person="Hege";

A good practice is to put spaces around operators ( = + - * / ):

var x = y + z;

JavaScript Line Length and Line Breaks

For best readability, programmers often like to avoid code lines longer than 80 characters.

If a JavaScript statement does not fit on one line, the best place to break it, is after an operator:

Example

document.getElementById("demo").innerHTML ="Hello Dolly.";

JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.

The purpose of code blocks is to define statements to be executed together.

One place you will find statements grouped together in blocks, are in JavaScript functions:

Example

function myFunction() {
document.getElementById("demo").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
}

In this tutorial we use 4 spaces of indentation for code blocks.
You will learn more about functions later in this tutorial.

JavaScript Keywords

JavaScript statements often start with a keyword to identify the JavaScript action to be performed.

Here is a list of some of the keywords you will learn about in this tutorial:

Keyword	Description
break	Terminates a switch or a loop
continue	Jumps out of a loop and starts at the top
debugger	Stops the execution of JavaScript, and calls (if available) the debugging function
do ... while	Executes a block of statements, and repeats the block, while a condition is true
for	Marks a block of statements to be executed, as long as a condition is true
function	Declares a function
if ... else	Marks a block of statements to be executed, depending on a condition
return	Exits a function
switch	Marks a block of statements to be executed, depending on different cases
try ... catch	Implements error handling to a block of statements
var	Declares a variable

	JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.

'JavaScript' 카테고리의 다른 글

[07] JavaScript Variables (0)	2015.07.13
[06] JavaScript Comments (0)	2015.07.13
[04] JavaScript Syntax (0)	2015.07.13
[03] JavaScript Output (0)	2015.07.13
[02] JavaScript Where To (0)	2015.07.13

[04] JavaScript Syntax

2015. 7. 13. 17:11

JavaScript Syntax

JavaScript syntax is the set of rules, how JavaScript programs are constructed.

JavaScript Programs

A computer program is a list of "instructions" to be "executed" by the computer.

In a programming language, these program instructions are called statements.

JavaScript is a programming language.

JavaScript statements are separated by semicolons.

	In HTML, JavaScript programs can be executed by the web browser.

JavaScript Statements

JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

JavaScript Values

The JavaScript syntax defines two types of values: Fixed values and variable values.

Fixed values are called literals. Variable values are calledvariables.

JavaScript Literals

The most important rules for writing fixed values are:

Numbers are written with or without decimals: 0.01, 1000

Strings are text, written within double or single quotes: "John Doe", 'John Doe'

Expressions can also represent fixed values: 5 + 6, 5 * 10

JavaScript Variables

In a programming language, variables are used to store data values.

JavaScript uses the var keyword to define variables.

An equal sign is used to assign values to variables.

In this example, x is defined as a variable. Then, x is assigned (given) the value 6:

var x;
x = 6;

JavaScript Operators

JavaScript uses an assignment operator ( = ) to assign values to variables:

var x = 5;
var y = 6;

JavaScript uses arithmetic operators ( + - * / ) to compute values: (5 + 6) * 10

JavaScript Keywords

JavaScript keywords are used to identify actions to be performed.

Thevar keyword tells the browser to create a new variable:

JavaScript Comments

Not all JavaScript statements are "executed".

Code after double slashes// or between /* and */ is treated as a comment.

Comments are ignored, and will not be executed:

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables.

lastName = "Doe";
lastname = "Peterson";

JavaScript does not interpret VAR or Var as the keyword var.

JavaScript and Camel Case

Historically, programmers have used three ways of joining multiple words into one variable name:

Hyphens:

first-name, last-name, master-card, inter-city.

Underscore:

first_name, last_name, master_card, inter_city.

Camel Case:

FirstName, LastName, MasterCard, InterCity.

In programming languages, especially in JavaScript, camel case often starts with a lowercase letter:

firstName, lastName, masterCard, interCity.

Hyphens are not allowed in JavaScript. It is reserved for subtractions.

JavaScript Character Set

JavaScript uses the Unicode character set.

Unicode covers (almost) all the characters, punctuations, and symbols in the world.

For a closer look, please study our Complete Unicode Reference.

'JavaScript' 카테고리의 다른 글

[06] JavaScript Comments (0)	2015.07.13
[05] JavaScript Statements (0)	2015.07.13
[03] JavaScript Output (0)	2015.07.13
[02] JavaScript Where To (0)	2015.07.13
[01] JavaScript Intro (0)	2015.07.13

[03] JavaScript Output

2015. 7. 13. 17:04

JavaScript does NOT have any built-in print or display functions.

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

Writing into an alert box, using window.alert().
Writing into the HTML output using document.write().
Writing into an HTML element, using innerHTML.
Writing into the browser console, using console.log().

Using window.alert()

You can use an alert box to display data:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Using document.write()

For testing purposes, it is convenient to use document.write():

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Using document.write() after an HTML document is fully loaded, will delete all existing HTML:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

The document.write() method should be used only for testing.

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

To "display data" in HTML, (in most cases) you will set the value of an innerHTML property.

Using console.log()

In your browser, you can use the console.log() method to display data.

Activate the browser console with F12, and select "Console" in the menu.

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

'JavaScript' 카테고리의 다른 글

[06] JavaScript Comments (0)	2015.07.13
[05] JavaScript Statements (0)	2015.07.13
[04] JavaScript Syntax (0)	2015.07.13
[02] JavaScript Where To (0)	2015.07.13
[01] JavaScript Intro (0)	2015.07.13

[02] JavaScript Where To

2015. 7. 13. 16:58

JavaScript Where To

JavaScript can be placed in the <body> and the <head> sections of an HTML page.

The <script> Tag

In HTML, JavaScript code must be inserted between <script> and </script> tags.

Older examples may use a type attribute: <script type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in HTML.

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "asked" for.

For example, a function can be executed when an event occurs, like when the user clicks a button.

You will learn much more about functions and events in later chapters.

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

	Keeping all code in one place, is always a good habit.

JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<p id="demo">A Paragraph</p>

</body>
</html>

JavaScript in <body>

In this example, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked:

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

It is a good idea to place scripts at the bottom of the <body> element.
This can improve page load, because HTML display is not blocked by scripts loading.

External JavaScript

Scripts can also be placed in external files.

External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of the <script> tag:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

You can place an external script reference in <head> or <body> as you like.

The script will behave as if it was located exactly where the <script> tag is located.

	External scripts cannot contain <script> tags.

External JavaScript Advantages

Placing JavaScripts in external files has some advantages:

It separates HTML and code
It makes HTML and JavaScript easier to read and maintain
Cached JavaScript files can speed up page loads

'JavaScript' 카테고리의 다른 글

[06] JavaScript Comments (0)	2015.07.13
[05] JavaScript Statements (0)	2015.07.13
[04] JavaScript Syntax (0)	2015.07.13
[03] JavaScript Output (0)	2015.07.13
[01] JavaScript Intro (0)	2015.07.13