Introduction to JavaScript

Z
Week 11:
Introduction to
JavaScript
Subject Code: COMP121
By: Marlon Jamera
Email: mbjamera@ama.edu.ph

Z
Scope of the Lesson
• Introduction to JavaScript
• Using JavaScript Code
• Using External Script File
• JavaScript Syntax
• Data Types
• Objects
• String Operations
• Standard Popup Boxes
• JavaScript Functions

Z
Learning Outcomes
By the end of the lesson, you will be
familiar and know how the website works
using JavaScripts.
• Discuss the introduction to JavaScript
and using JavaScript codes.
• Understand the coding syntax using
external script file and JavaScript syntax.
• Explain thoroughly the coding styles of
objects and string operations.

Z
Introduction to JavaScript
• JavaScript is a front-end scripting
language developed by Netscape for
dynamic content.
• Lightweight, but with limited
capabilities.
• Can be used as object-oriented
language.
• Client-side Technology
• Embedded in your HTML page.
• Interpreted by the web browser.

Z
• JavaScript allows interactivity such as:
• Implementing form validation.
• React to user actions, e.g handle keys.
• Changing an image on moving mouse
over it.
• Sections of a page appearing and
disappearing.
• Performing complex calculation.
• Custom HTML controls like
scrollable table.

Z
• What can JavaScript do?
• Can handle events
• Can read and write HTML elements
and modify the DOM tree
• Can validate form data
• Can access / modify browser cookies
• Can detect the user’s browser and OS
• Can be used as object-oriented
language
• Can handle exceptions.

Z
• The first script
<html>
<body>
<script type="text/javascript">
alert('Hello JavaScript!');
</script>
</body>
</html>

Z
• Another script
<html>
<body>
document.write('JavaScript
rulez!');
</script>
</body>
</html>

Z
• Another script
<html>
<body>
document.write('JavaScript
rules!');
</script>
</body>
</html>

Z
Using JavaScript Code
• The JavaScript code can be placed in:
• <script> tag in head
• <script> tag in the body
• External files, linked via <script> tag
head
• Files usually have .js extension
• Highly recommended
• The .js files get cached by the
browser
<script src="scripts.js" type="text/javscript">
<!– code placed here will not be executed! -->
</script>

Z
JavaScript – When is executed?
• JavaScript code is executed during the
page load or when the browser fires an
event.
• All statements are executed at page
loading
• Some statements just define functions
that can be called later.
• Function calls or code can be attached as
“event handlers” via tag attributes
• Executed when the event fired by the
browser

Z
Using External Script Files
<html>
<head>
<script src="sample.js" type="text/javascript">
</script>
</head>
<body>
<button onclick="sample()" value="Call
JavaScript
function from sample.js" />
</body>
</html>
• Using external script files:
• External JavaScript File:
function sample() {
alert('Hello from sample.js!')
}

Z
Using External Script Files
<html>
<head>
<script src="sample.js" type="text/javascript">
</script>
</head>
<body>
<button onclick="sample()" value="Call
JavaScript
function from sample.js" />
</body>
</html>
• Using external script files:
• External JavaScript File:
function sample() {
alert('Hello from sample.js!')
}
The <script> tag is always empty.

Z
JavaScript Syntax
• The JavaScript syntax is similar to C#
and Java.
• Operators (+, - , * , =, !=, &&, ++ …)
• Variables (typeless)
• Conditional statements (if, else)
• Loops (for, while)
• Arrays
• Functions (can return value)

Z
Operand and Operators
• The numbers in an arithmetic operations
are called operands.
• The operation to be performed between
two operands is defined by operator.
<script>
var x = 10;
var y = 5;
document.getElementById("demo").innerHTML = x
* y;
</script>

Z
Data Types
• The JavaScript data types:
• Numbers (integer, floating-point)
• Boolean (true / false)
• String type – string of characters
• Arrays
var myName = "You can use both single or
double quotes for strings";
var my_array = [1, 5.3, "aaa"];

Z
Everything is Object
• Every variable can be considered as
object
• For example, strings and arrays have
member functions:
var test = "some string";
alert(test[7]); // shows letter 'r'
alert(test.charAt(5)); // shows letter 's'
var arr = [1,3,4];
alert (arr.length); // shows 3
arr.push(7); // appends 7 to end of array
alert (arr[3]); // shows 7

Z
String Operations
• The + operator joins strings
• What is “9” + 9?
• Converting string to number:
string1 = "fat ";
string2 = "cats";
alert(string1 + string2); // fat cats
alert("9" + 9); // 99
alert(parseInt("9") + 9); // 18

Z
Standard Popup Boxes
• Alert box with text and [ok] button
• Just a message in a dialog box:
• Confirmation box
• Contains text, ok and cancel button.
• Prompt box:
• Contains text, input field with value.
alert("Some text here");
confirm("Are you sure?");
prompt ("enter amount", 10);

Z
JavaScript Functions
• A JavaScript function is a block of code
designed to perform a particular task.
• A JavaScript function is executed when
“something” invokes it (calls it).
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML =
myFunction(4, 3);
</script>

Z
JavaScript Functions
<html>
<head>
function test (message) {
alert(message);
}
</script>
</head>
<body>
<img src="logo.gif"
onclick="test('clicked!')" />
</body>
</html>

Z
Let’s call it a day,
Thank you!

Introduction to JavaScript

More Related Content

What's hot

Similar to Introduction to JavaScript

More from Marlon Jamera

Recently uploaded

Introduction to JavaScript

Editor's Notes