목차
JavaScript Tutorial
- Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
- Commonly Asked Questions
How do I get JavaScript?
Where can I download JavaScript?
Is JavaScript Free?
= > You don’t have to get or download JavaScript. JavaScript is already running in your browser on your computer, on your tablet, and on your smart-phone. JavaScript is free to use for everyone.
- JavaScript References : The reference contains examples for all properties, methods and events, and is continuously updated according to the latest web standards.
JavaScript Introduction
Did You Know? JavaScript and Java are completely different languages, both in concept and design. JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997. ECMA-262 is the official name. ECMAScript is the official name of the language.
JavaScript Where To
- The <script> Tag : In HTML, JavaScript code is inserted between tags.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>Old JavaScript 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
JavaScript function is a block of JavaScript code, that can be executed when “called” for. For example, a function can be called when an event occurs, like when the user clicks a button.
- JavaScript in <head> or <body>
You can place any number of scripts in an HTML document. Scripts can be placed in the , or in the section of an HTML page, or in both
- External JavaScript
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}File extension.js To use an external script, put the name of the script file in the src (source) attribute of the <script>> tag. 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 Advatages
It separates HTML and code. It makes HTML and JavaScript easier to read and maintain. Cached JavaScript files can speed up page load. To add several script files to one page - use several script tags
<script src="myScript1.js"></script>
- External References
Can be referenced in 3 different ways
With a full URL (a full web address)
With a file path (like/js/)
Without any path
JavaScript Output
- JavaScript Display Possibilities
JavaScript can “display” data in different ways Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write( ) Writing into an alert box, using window.alert( ) Writing into the browser console, using console.log( )
- Using innerHTML
The innerHTML property defines the HTML content Changing the innerHTML property of an HTML element is a common way to display data in HTML.
- Using document.write()
For testing purposes, it is convenient to use document.write( ) Using document.write() after an HTML document is loaded, will delete all existing HTML The document.write() method should only be used for testing.
- Using window.alert()
You can use an alert box to display data
- Using console.log()
For debugging purposes, you can use the console.log( ) method in the browser to display data.
- JavaScript Print
JavaScript does not have any print object or print methods. You cannot access output devices from JavaScript. he only exception is that you can call the window.print() method in the browser to print the content of the current window.
JavaScript Statements
- JavaScript Programs
A computer program is a list of "instructions" to be "executed" by a computer. In a programming language, these programming instructions are called statements. A JavaScript program is a list of programming statements. In HTML, JavaScript programs are executed by the web browser.
- JavaScript Statements
Are composed of Values, Operators, Expressions Keywords, and Comments Most JavaScript programs contain many JavaScript statements The statements are executed, one by one, in the same order as they are written. JavaScript programs (and JavaScript statements) are often called JavaScript code.
- Semicolons ;
Separate JavaScript statements. Add a semicolon at the end of each executable statement. Try it! Multiple statements on one line are allowed. Try it! 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:
let person = "Hege";
let person="Hege";A good practice is to put spaces around operators (= + = * / )
- JavaScript Code Blocks
JavaScript statements can be grouped together in code blocks, inside curly brackets {…}. To define statements to be executed together.
- JavaScript Keywords
JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.
| Keyword | Description |
| var | Declares a variable |
| let | Declares a block variable |
| const | Declares a block constant |
| if | Marks a block of statements to be executed on a condition |
| switch | Marks a block of statements to be executed in different cases |
| for | Marks a block of statements to be executed in a loop |
| function | Declares a function |
| return | Exits a function |
| try | Implements error handling to a block of statements |
JavaScript Syntax
// How to create variables :
var x;
let y;
// How to use variables :
x = 5;
y = 6;
let z = x + y;- JavaScript Values
Two types of values - Fixed / Variable
Fixed values are called literals
Variable values are called variables
- JavaScript Literals
Numbers are written with or without decimals
Strings are text, written within double or single quotes
- JavaScript Variables
Used to store data values
JavaScript uses the keywords var, let and const to declare variables
An equal sign is used to assign values to variables
- JavaScript Operators
Arithmetic operators ( + - * /) to compute values.
Assignment operator (=) to assign values to variables
- JavaScript Expressions
An expression is a combination of values, variables, and operators, with computes to a value
The computation is called an evaluation.
Expression can also contain variable values
The values can be of various types, such as numbers and strings
- JavaScript Keywords
Used to identify actions to be performed.
The let keyword tells the browser to create variables
The var keyword tells the browser to create variables
- JavaScript Comments
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed
- JavaScript Identifiers