Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

Programming EventHandling

Uploaded by

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

Programming EventHandling

Uploaded by

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

JavaScript

H. Turgut Uyar

Date:
2022-12-11

Version:

0.2
JavaScript

one of the most popular programming languages

originally intended to be used from within the browser

for adding interactivity to web pages

much more complicated today: frontend development


Application Types

also used in the backend

web and native apps on mobile devices

even desktop apps


Browser Console

access console through developer tools

REPL

read: get command

eval: execute command

print: display result

loop: repeat
Expressions

expression: a computation that produces a result

35 + 7
6 + 7 * 4
Statements

statement: unit of code

statements end with a semicolon


Variables

variable: named data

variable definition statement:

let NAME = VALUE;


Variables in Expressions

variables can be used in expressions

year
year + 250
year * year
Assignment

changing value of existing variable

let year = 1773;

year = year + 250;


Functions

take input: parameters

produce output: return values

grouped into collections: Math, Date, …


Math Functions

absolute value, trigonometric, logarithmic, …

Math.abs(-42)
Math.pow(1.52, 3.4)
Math.random()
Functions in Expressions

functions can be used in expressions

Math.floor(5.92) * 8
Data Types

every piece of data has a type

basic types: number, string

typeof function to learn the type


Numbers

typeof(42)
typeof(3.14)
typeof(year)
Strings

strings are written within single or double quotes

typeof("ITU")
String Concatenation

addition operator concatenates strings

"Istanbul" + "Technical" + "University"


Objects

object: data with bound functions ("methods")

accessing object data and methods:

object.data

object.method()
String Objects

strings are objects

let school = "ITU";

school.length

school.toLowerCase()
school.replace("T", "C")
Browser Objects

console: console

current window: window

current page: document


Console Operations

log a message: console.log()

console.log("Hello, world!");
Window Properties

innerWidth, innerHeight

screenX, screenY
Window Operations

display a message: window.alert()

window.alert("Hello, world!");
Document Properties

URL

title

body
Changing Content

setting contents of an element: .innerHTML

document.body.innerHTML = "<h1>BLG101E</h1>";
Changing Style

setting an attribute of an element: .style

document.body.style = "background-color: green;";


Manipulating Classes

classes of an element: .classList

add a class: .classList.add()

remove a class: .classList.remove()

toggle class existence: .classList.toggle()


Selecting Elements

select by id:

element = document.getElementById("history");
element.style = ...;

select using CSS:

element = document.querySelector("#history");
element.style = ...;
Script Elements

include JavaScript code in HTML

usually in the head part

<script>
window.alert("Long live The Beatles!");
</script>
External Scripts

put code into separate file

use the src attribute of the script element

<script src="beatles.js"></script>
Events

responding to events

user clicked a link

user pressed a key on the keyboard

user moved mouse

browser finished loading document

…
Event Attributes

event attributes tie events to code

name starts with on, followed by event name

value is code

execute code when event happens


Document Events

finished loading: onload

<body onload="window.alert('Long live The Beatles!');">


Event Attribute Code

writing code as attribute value is inefficient

especially for long code

define a function to contain the code

call the function in the attribute value


Defining Functions

function: named block of code

can take parameters

function name(parameter1, parameter2, ...) {


statement1;
statement2;

...
}
Function Example

no parameter, only one statement

function tribute() {
window.alert("Long live The Beatles!");
}
Using Function

function will not be executed until called

<script>
function tribute() {
window.alert("Long live The Beatles!");
}

</script>

<body onload="tribute();">
Click Event

mouse clicked: onclick

<script>
function toggleCallout() {
document.body.classList.toggle("callout");
}

</script>

<p onclick="toggleCallout();">Their famous lineup...


Function Parameters

toggle class only for one element

take element as parameter

function toggleCallout(el) {
el.classList.toggle("callout");
}
Passing Elements

pass element as parameter

<p onclick="toggleCallout(document.body);">
Their famous lineup...

current element: this

<p onclick="toggleCallout(this);">
Their famous lineup...
Mouse Events

mouse enters/exits element: onmouseover onmouseout

mouse press: onmousedown onmouseup


Keyboard Events

key press: onkeydown onkeyup


Window Events

window resized: onresize

You might also like