Scribd
Upload
49 views

07 Introduction To JavaScript

The document provides an introduction to JavaScript, covering why it is important for web development, how it differs from Java, what it can do, best practices for including it in web pages, and basic syntax like statements, operators, and comments. It explains that JavaScript is one of three core languages developers need to learn, along with HTML and CSS, and that it is used to program interactive behaviors and animations on web pages.

Uploaded by

Kapil Pokhrel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

07 Introduction To JavaScript

The document provides an introduction to JavaScript, covering why it is important for web development, how it differs from Java, what it can do, best practices for including it in web pages, and basic syntax like statements, operators, and comments. It explains that JavaScript is one of three core languages developers need to learn, along with HTML and CSS, and that it is used to program interactive behaviors and animations on web pages.

Uploaded by

Kapil Pokhrel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

CT053-3-1

Fundamentals of Web Design &


Development

Introduction to JavaScript
Why 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

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


Java vs. JavaScript

• 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 of the standard.
ECMAScript is the official name of the language.
• Java is a general purpose programming
language, and JavaScript is used on websites to
make them animated and interactive.

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Introduction

• What JavaScript can do?


– JavaScript can change html content
– JavaScript can change HTML attributes
– JavaScript can change HTML styles (CSS)
– JavaScript can hide HTML elements
– JavaScript can show HTML elements
– and many more!

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


Where To include JavaScript?

• The <script> Tag


– In HTML, JavaScript code must be inserted between
<script> and </script> tags.
• JavaScript Functions and Events
– A 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.
Will be covered in separate chapter

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


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.
• 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 a <script> tag.
<script src="myScript.js"></script>
CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript
External JavaScript Advantages

• Placing scripts 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
– To add several script files to one page - use several
script tags:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Output

• 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().
CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript
Example – window.alert()

<!DOCTYPE html>
<html>
<body>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


Example – document.write()

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


Example - innerHTML

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


Example – console.log()

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


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.

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Statements

• JavaScript statements are composed of:


– Values
– Operators
– Expressions
– Keywords
– Comments
• The statements are executed, one by one, in the
same order as they are written.

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Operators

JavaScript Arithmetic Operators

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Operators

JavaScript Assignment Operators

Operator Example Same As


= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Operators

JavaScript Comparison Operators

Operator Description

== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Operators

JavaScript Type Operators

Operator Description
typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an object type

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


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 start with //.
• Multi-line comments start with /* and end with */.

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Variables

• JavaScript variables are containers for storing


data values.
• In this example, x, y, and z, are variables
var x = 5;
var y = 6;
var z = x + y;

• From the example above, you can expect:


– x stores the value 5
– y stores the value 6
– z stores the value 11
CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript
JavaScript Identifiers

• All JavaScript variables must be identified with


unique names.
• These unique names are called identifiers.
• Identifiers can be short names (like x and y) or
more descriptive names (age, sum,
totalVolume).

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Identifiers

• The general rules for constructing names for


variables (unique identifiers) are:
– Names can contain letters, digits, underscores, and
dollar signs.
– Names must begin with a letter
– Names can also begin with $ and _ (but we will not
use it in this tutorial)
– Names are case sensitive (y and Y are different
variables)
– Reserved words (like JavaScript keywords) cannot be
used as names
– JavaScript identifiers are case-sensitive.
CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript
Declaring JavaScript Variables

• Creating a variable in JavaScript is called "declaring" a


variable.
• You declare a JavaScript variable with the var keyword:
var carName;
• After the declaration, the variable has no value.
(Technically it has the value of undefined)
• To assign a value to the variable, use the equal sign:
carName = "Volvo";
• You can also assign a value to the variable when you
declare it:
var carName = "Volvo";
CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript
JavaScript Data Types

• JavaScript variables can hold many data


types: numbers, strings, objects and more:

var length = 16; // Number

var lastName = "Johnson"; // String

var x = {firstName:"John", lastName:"Doe"}; // Object

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Strings

• A string (or a text string) is a series of characters like


"John Doe".
• Strings are written with quotes. You can use single or
double quotes.
• You can use quotes inside a string, as long as they don't
match the quotes surrounding the string.

var answer = "It's alright"; // Single quote inside double quotes


var answer = "He is called 'Johnny'"; // Single quotes inside double quotes
var answer = 'He is called "Johnny"'; // Double quotes inside single quotes

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Numbers

• JavaScript has only one type of numbers.


• Numbers can be written with, or without decimals:

var x1 = 34.00; // Written with decimals


var x2 = 34; // Written without decimals

• Extra large or extra small numbers can be written with


scientific (exponential) notation:

var y = 123e5; // 12300000


var z = 123e-5; // 0.00123

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Numbers

• All the input that received from the user will be


treated as string even though it is a number,
hence it can’t be calculated.
• The string input need to be parsed to return a
number by using one of these global functions.

Number() Converts an object's value to a number


parseFloat() Parses a string and returns a floating point number
parseInt() Parses a string and returns an integer

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Arrays

• JavaScript arrays are written with square


brackets.
• Array items are separated by commas.
• The following code declares (creates) an array
called cars, containing three items (car names):

var cars = ["Saab", "Volvo", "BMW"];

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


JavaScript Objects

• JavaScript objects are written with curly braces.


• Object properties are written as name:value
pairs, separated by commas.

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

• The object (person) in the example above has 4


properties: firstName, lastName, age, and
eyeColor.

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript


Q&A

CT053-3-1 Fundamentals of Web Design & Development Introduction to JavaScript ‹#›

You might also like