Scribd
Upload
8 views

javascript

This document is a comprehensive tutorial on JavaScript, covering its introduction, syntax, variables, data types, functions, objects, scope, events, and more. It provides examples and explanations on how to use JavaScript in web programming, including how to manipulate HTML content and attributes. The tutorial also includes practical exercises to reinforce learning and understanding of JavaScript concepts.

Uploaded by

kavyas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

javascript

This document is a comprehensive tutorial on JavaScript, covering its introduction, syntax, variables, data types, functions, objects, scope, events, and more. It provides examples and explanations on how to use JavaScript in web programming, including how to manipulate HTML content and attributes. The tutorial also includes practical exercises to reinforce learning and understanding of JavaScript concepts.

Uploaded by

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

7.

JS Tutorial

웹프로그래밍
2016년 1학기

충남대학교 컴퓨터공학과
목차

JS Introduction
JS Where To, Output, Syntax
JS Statements and Comments
JS Variables & Operators
JS Data Types: Numbers, Strings, Arrays, and more
JS Functions
JS Objects
JS Scope
JS Events
JS Control Statements

2
JavaScript Introduction

Some examples of what JavaScript can do.

JavaScript can change HTML content. Try it!

JavaScript can change HTML attributes. Try it!

JavaScript can change HTML Styles(CSS). Try it!

JavaScript can validate data. Try it!

3
JavaScript Introduction (cont’d)

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 6 (June 2015) is the current
standard.

4
JavaScript Where To

JavaScript can be placed in the <body> and the <head> sections


of an HTML page.
The <script> Tag
JavaScript code must be inserted between <script> and </script> tags.
<script>
document.getElementById(“demo”).innerHTML=“My First JavaScript”;
</script>

JavaScript Functions and Events


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.

5
JavaScript Where To (cont’d)

JavaScript in <head> Try it!


JavaScript in <body> Try it!
External JavaScript Try it!
File extension .js
To use an external script, put the name of the script file in the src
(source) attribute of the <script> tag.
External scripts cannot contain <script> tags.
External JavaScript Advantages
It separates HTML and code.
It makes HTML and JavaScript easier to read and maintain.
Cached JavaScript files can speed up page load.

6
JavaScript Output

JavaScript Display Possibilities


Writing into an alert box, using window.alert( ) Try it!

Writing into the HTML output using document.write( ) Try it!

Writing into an HTML element, using innerHTML Try it!

Writing into the browser console, using console.log( ) Try it!

7
JavaScript Syntax

JavaScript Programs Try it!


JavaScript is a programming language.
JavaScript statements are separated by semicolon.
In HTML, JavaScript programs can be executed by the web browser.

JavaScript Statements
Composed of : Values, Operators, Expressions, Keywords, and
Comments

JavaScript Values
Two types of values : Fixed values and variable values
 Fixed values are called literals.
 Variable values are called variables.

8
JavaScript Syntax (cont’d)

JavaScript Literals
Numbers are written with or without decimals. Try it!
Strings are text, written within double or single quotes. Try it
Expression can also represent fixed values. Try it!

JavaScript Variables Try it!


Used to store data values.
JavaScript uses the var keyword to define variables.
Equal sign is used to assign values to variables.

9
JavaScript Syntax (cont’d)

JavaScript Operators
Assignment operator (=) Try it!
Arithmetic operators ( + - * /) to compute values. Try it!

JavaScript Keywords
Used to identify actions to be performed.
 The var keyword tells the browser to create a new variable.

JavaScript Comments
Single line comment : // Try it!
Multi-line Comment : /* and end with */

10
JavaScript Syntax (cont’d)

JavaScript is Case Sensitive


The variables lastName and lastname, are two different variables.
Try it!
JavaScript does not interpret VAR or Var as the keyword var.

JavaScript and Camel Case


In JavaScript, camel case often starts with a lowercase letter:
 firstName, lastName, masterCard, interCity
Hypes are not allowed in JavaScript. It is reserved for subtractions.

11
JavaScript Statements

In HTML, JavaScript statements are “instructions” to be


“executed” by the web browser.

JavaScript Statements Try it!

JavaScript Programs
Contain many JavaScript statements.
The statements are executed, one by one, in the same order as they
are written. Try it!

12
JavaScript Statements (cont’d)

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!

JavaScript Code Blocks Try it!


JavaScript statements can be grouped together in code blocks, inside
curly brackets {…}.
To define statements to be executed together.

13
JavaScript Statements (cont’d)

JavaScript Keywords

14
JavaScript Comments

Single Line Comments


Single line comments start with //. Try it
Any text between // and the end of line. Try it

Multi-line Comments
Multi-line comments start with /* and end with */. Try it
Any text between /* and */ will be ignored by JavaScript.

15
JavaScript Variables

JavaScript Identifiers
All JavaScript variables must be identified with unique names.
 Unique names are called 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 _ .
 Names are case sensitive (y and Y are different variables).
 Reserved words (like JavaScript keywords) cannot be used as names.

16
JavaScript Variables (cont’d)

Declaring (Creating) JavaScript Variables Try it!


Declare JavaScript variables with the var keyword.
var carName;

After the declaration, the variable is empty. (it has no value)


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”;

17
JavaScript Variables (cont’d)

One Statement, Many Variables Try it! Try it!

Value = undefined Try it!


Variable declared without a value will have the value undefined.

Re-Declaring JavaScript Variables


If you re-declare a JavaScript variable, it will not lose its value. Try it!

Test Yourself with Exercises!

18
JavaScript Operators

JavaScript Arithmetic Operators

Try it!
Try it!
Try it!
Try it!
Try it!
Try it!
Try it!

19
JavaScript Operators (cont’d)

JavaScript Assignment Operators

Try it!
Try it!
Try it!
Try it!
Try it!
Try it!

20
JavaScript Operators (cont’d)

JavaScript String Operators


+ operator can also be used to concatenate (add) strings.
Try it! Try it! Try it! Try it!

Adding Strings and Numbers


If you add a number and a string, the result will be a string! Try it!

21
JavaScript Data Types

JavaScript Data Types


JavaScript variables can hold many data types : numbers, strings,
arrays, objects and more.

JavaScript Has Dynamic Types


The same variable can be used as different types.

22
JavaScript Data Types (cont’d)

JavaScript Strings Try it!


Can use single or double quotes.

JavaScript Numbers Try it!


Can be written with, or without decimals.
Extra large or extra small numbers can be written with scientific
(exponential) notation.

JavaScript Booleans
Only have two values : true or false

23
JavaScript Data Types (cont’d)

JavaScript Arrays Try it!


Are written with square brackets.
Array items are separated by commas.
Array indexes are zero-based, which means that first item is [0],
second is [1], and so on.

JavaScript Objects Try it!


Are written with curly braces.
Are written as name:value pairs, separated by commas.

The typeof Operator Try it!


To find the type of a JavaScript variable.

24
JavaScript Data Types (cont’d)

Undefined Try it!


A variable without a value

Empty Values Try it!

<< Here is the end of “Introduction to JavaScript “ in Codecademy.com. >>

25
JavaScript Functions
JavaScript Function is Try it!
A block of code designed to perform a particular task.
Executed when “something” invokes it(calls it).

JavaScript Function Syntax

Function Invocation
The code inside the function will execute when “something” invokes
the function.
 When an event occurs (when a user clicks a button)
 When it is invoked (called) from JavaScript code
 Automatically (self invoked)

26
JavaScript Functions (cont’d)

Function Return Try it!

Why Functions? Try it!


You can reuse code: Define the code once, and use it many times.

Test Yourself with Exercises!

27
JavaScript Objects

Real Life Objects, Properties and methods

28
JavaScript Objects (cont’d)

JavaScript Objects
Objects are variables. Objects can contain many values. Try it!
 The values are written as name:value pairs

Object Properties
name:values pairs are called properties.

29
JavaScript Objects (cont’d)

Accessing Object Properties


objectName.propertyName Try it!
or
objectName[propertyName] Try it!

Accessing Object Methods Try it! Try it!


objectName.methodName( )

Test Yourself with Exercises!

30
JavaScript Scope
JavaScript Scope
In JavaScript, scope is the set of variables, objects, and functions you
have access to.

Local JavaScript Variables Try it!


Variables declared within a JavaScript function, become LOCAL to the
function.
Local variables have local scope : They can only be accessed within the
function.

Global JavaScript Variables Try it!


Variable declared outside a function, becomes GLOBAL.
Global variable has global scope : All scripts and functions on a web
page can access it.

31
JavaScript Scope (cont’d)

Automatically Global Try it!


If you assign a value to a variable that has not been declared, it will
automatically become a GLOBAL variable.

<< Here is the end of “Functions” in Codecademy.com. >>

32
JavaScript Events
HTML Events
An HTML event can be something the browser does, or something a user does.
 An HTML web page has finished loading.
 An HTML input field was changed.
 An HTML button was clicked.
HTML allows event handler attributes, with JavaScript code, to be
added to HTML elements. Try it! Try it! Try it!
 With single quotes
<some-HTML-element some-event=‘some JavaScript’>

 With double quotes


<some-HTML-element some-event=“some JavaScript”>

33
JavaScript Events (cont’d)

Common HTML Events

Test Yourself with Exercises!

34
JavaScript Strings

JavaScript Strings
Stores a series of characters like “John Doe”.
Can be any text inside (single or double) quotes. Try it! Try it!

String Length
Built in property length Try it!

Special Characters Try it!


Special characters : \’ , \”, \\, \n, \r, \t, \b, \f

35
JavaScript Strings (cont’d)

Strings Can be Objects. Try it!

String Properties and Methods


String Properties

String Methods (next slide)

Test Yourself with Exercises!

36
JavaScript Strings Methods

Finding a String in a String


indexOf ( ) Try it!
lastIndexOf ( ) Try it!
 JavaScript counts position from zero. 0 is the first position in a string, 1 is
the second, 2 is the third…
 Both the indexOf( ) and the lastIndexOf( ) methods return -1 if the text is
not found.

Extracting String Parts


slice (start, end) Try it! Try it!
substring(start, end) Try it!
substr (start, length) Try it!

37
JavaScript Strings Methods (cont’d)

Replacing String Content Try it!


Converting to Upper and Lower Case
toUpperCase( ) Try it!
toLowerCase( ) Try it!
The concat( ) Method Try it!
Converting a String to an Array
split( ) Try it!
Complete JavaScript String Reference

Test Yourself with Exercises!

38
JavaScript Numbers

JavaScript Numbers are Always 64-bit Floating Point.

Precision
Integers are considered accurate up to 15 digits. Try it!
The maximum number of decimals is 17. Floating point arithmetic is not
always 100% accurate. Try it!
Infinity
Infinity (or –Infinity) is the value. JavaScript will return if you calculate a
number outside the largest possible number. Try it! Try it! Try it!

39
JavaScript Numbers (cont’d)
NaN – Not a number Try it! Try it! Try it!
JavaScript reserved word indicating that the result of a numeric operation was not
a number.
Numbers Can be Objects Try it!
Number Properties and Methods
Number Properties

Number Methods (next slide)

Test Yourself with Exercises!


40
JavaScript Numbers Methods

Global Methods
Can be used on all JavaScript data types

Try it!
Try it!
Try it!

41
JavaScript Numbers Methods (cont’d)

Number Methods
Can be used on numbers.

Try it!
Try it!
Try it!

Try it!
Try it!

Complete JavaScript Number Reference

42
JavaScript Math Object

The Math Object


Allows you to perform mathematical tasks.
Includes several mathematical methods.

Math.min( ) and Math.max( ) Try it! Try it!

Math.random( ) Try it!

Math.round( ) Try it!

Math.ceil( ) Try it!

43
JavaScript Math Object (cont’d)

Math.floor( ) Try it!

Math.Constants( ) Try it!

Complete Math Object Reference

Test Yourself with Exercises!

44
JavaScript Dates

JavaScript Date Formats


Can be written as a string :
Sun Mar 29 2015 08:03:13 GMT +0900 (대한민국 표준시)
Or as a number : 1427583793458
 Dates written as numbers, specifies the number of milliseconds since
January 1, 1970, 00:00:00.
Displaying Dates Try it!

45
JavaScript Dates (cont’d)

Creating Date Objects


4 ways of initiating a date
Try it!
Try it!
Try it!
Try it!

Displaying Dates
toString( ) Try it!
toUTCString( ) Try it!
toDateString( ) Try it!

Test Yourself with Exercises!


46
JavaScript Date Methods

Date Get Methods

Try it! Try it!


Try it!

Try it!

47
JavaScript Date Methods (cont’d)

Date Set Methods

Try it!
Try it!

Complete JavaScript Date Reference


48
JavaScript Arrays

Creating an Array
Syntax
var array-name = [item1, item2, …] ;
Example
var car= [“Saab”, “Volvo”, “BMW”] ;

Access the Elements of an Array


Refer to an array element by referring to the index number.
var name = cars[0];

Modifies the first element in cars.


cars[0] = “Opel”;

49
JavaScript Arrays (cont’d)

You Can Have Different Objects in One Array.


myArray[0] = Date.now;
mymyArray[1] = myFunction;
myArray[2] = myCars;

Arrays are Objects.


Arrays use numbers to access its “elements”. Try it!
Objects use names to access its “members”. Try it!

Array Properties and Methods

50
JavaScript Arrays (cont’d)

The length Property Try it!

Adding Array Elements Try it! Try it!

Looping Array Elements Try it!

Test Yourself with Exercise!

51
JavaScript Array Methods

Converting Arrays to Strings


valueOf( ) Try it!
toString( ) Try it!
join( ) Try it!

Popping and Pushing


pop ( ) Try it!
Push ( ) Try it!

Shifting Elements
shift ( ) Try it!
unshift ( ) Try it!

52
JavaScript Array Methods (cont’d)
Changing Elements Try it! Try it!

Deleting Elements Try it!

Splicing an Array
splice ( ) Try it! Try it!

Sorting an Array
sort( ) Try it!

Reversing an Array
reverse( ) Try it!

53
JavaScript Array Methods (cont’d)

The Compare Function


To define an alternative sort order
function(a, b) {return a-b}

Fine the Highest (or Lowest) Try it! Try it!


Joining Arrays
concat( ) Try it!
Slicing an Array
slice( ) Try it!
Complete JavaScript Array Reference
Test Yourself with exercise!

54
JavaScript Booleans

Two values : “true” or “false”

The Boolean( ) Function Try it!

Comparisons and Conditions

55
JavaScript Booleans (cont’d)

Everything With a Real Value is True. Try it!

Everything Without a Real Value is False.


Try it! Try it! Try it!

Complete Boolean Reference

56
JavaScript Comparison and Logical Operators
Comparison Operators
Given that x=5

57
JavaScript Comparison and Logical Operators (cont’d)

Logical Operators
Given that x=6 and y=3

Conditional Operator Try it!


Syntax
variablename = (condition) ? value1 :value2

Test Yourself with Exercise!

58
JavaScript if…Else Statements

The if statement
To specify a block of JavaScript code to be executed if a condition is true.
Try it!

The else Statement


To specify a block of code to be executed if the condition is false. Try it!

The else if statement


To specify a new condition if the first condition is false. Try it!

59
JavaScript Switch Statement

The JavaScript Switch Statement Try it!

The Break Keyword


When the JavaScript code interpreter reaches a break keyword, it
breaks out of the switch block.

The default Keyword


Specifies the code to run if there is no case match Try it!

60
JavaScript For Loop

JavaScript Loops Try it!

Different Kinds of Loops


for Try it!
 Loops through a block of code a number of times
for/in Try it!
 Loops through the properties of an object
while Try it!
 Loops through a block of code while a specified condition is true
do/while Try it!
 Also loops through a block of code while a specified condition is true

61
JavaScript Break and Continue

The Break Statement Try it!

The Continue Statement Try it!

JavaScript Labels Try it!

Test Yourself with Exercise!

62
JavaScript Errors

JavaScript try and catch


try statement
 Allows you to define a block of code to be tested for errors while it is
being executed.
catch statement
 Allows you to define a block of code to be executed, if an error occurs in
the try block.

63
JavaScript Errors (cont’d)

The throw Statement


Allows you to create a custom error.

Input Validation Example Try it!

The finally Statement Try it!

64
<< Here is the end of “’For’ Loops in JavaScript” in Codecademy.com. >>

<< Here is the end of “’While’ Loops in JavaScript” in Codecademy.com. >>

<< Here is the end of “Control Flow” in Codecademy.com. >>

65

You might also like