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, …
[Link](-42)
[Link](1.52, 3.4)
[Link]()
Functions in Expressions
functions can be used in expressions
[Link](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:
[Link]
[Link]()
String Objects
strings are objects
let school = "ITU";
[Link]
[Link]()
[Link]("T", "C")
Browser Objects
console: console
current window: window
current page: document
Console Operations
log a message: [Link]()
[Link]("Hello, world!");
Window Properties
innerWidth, innerHeight
screenX, screenY
Window Operations
display a message: [Link]()
[Link]("Hello, world!");
Document Properties
URL
title
body
Changing Content
setting contents of an element: .innerHTML
[Link] = "<h1>BLG101E</h1>";
Changing Style
setting an attribute of an element: .style
[Link] = "background-color: green;";
Manipulating Classes
classes of an element: .classList
add a class: .[Link]()
remove a class: .[Link]()
toggle class existence: .[Link]()
Selecting Elements
select by id:
element = [Link]("history");
[Link] = ...;
select using CSS:
element = [Link]("#history");
[Link] = ...;
Script Elements
include JavaScript code in HTML
usually in the head part
<script>
[Link]("Long live The Beatles!");
</script>
External Scripts
put code into separate file
use the src attribute of the script element
<script src="[Link]"></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="[Link]('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() {
[Link]("Long live The Beatles!");
}
Using Function
function will not be executed until called
<script>
function tribute() {
[Link]("Long live The Beatles!");
}
</script>
<body onload="tribute();">
Click Event
mouse clicked: onclick
<script>
function toggleCallout() {
[Link]("callout");
}
</script>
<p onclick="toggleCallout();">Their famous lineup...
Function Parameters
toggle class only for one element
take element as parameter
function toggleCallout(el) {
[Link]("callout");
}
Passing Elements
pass element as parameter
<p onclick="toggleCallout([Link]);">
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