Scribd
Upload
105 views

JS3 - 1

The document provides an overview of JavaScript topics including data types, variables, operators, control flow, functions, arrays, objects, AJAX, XML, JSON, events, and examples of imperative, object-oriented, functional and ES6 programming styles in JavaScript. It also includes examples of using JavaScript to capitalize words in a string, create click events on buttons, and change the color of squares when clicked.

Uploaded by

Mehmed Gvozden
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
105 views

JS3 - 1

The document provides an overview of JavaScript topics including data types, variables, operators, control flow, functions, arrays, objects, AJAX, XML, JSON, events, and examples of imperative, object-oriented, functional and ES6 programming styles in JavaScript. It also includes examples of using JavaScript to capitalize words in a string, create click events on buttons, and change the color of squares when clicked.

Uploaded by

Mehmed Gvozden
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

JavaScript 3

Events
Josip Kovačević
[email protected]
Content

● HTML and CSS


● JavaScript
HTML & CSS
● HyperText Markup Language
○ tells web browser how to display web page
○ browser - program which interprets tags and displays
contents
○ elements - block, inline
○ websites - static, dynamic
● Cascading Style Sheets
JavaScript
● programming language (we are focusing on client-side only)
● allows you to implement complex things on web pages
(dynamically updating content, animate images, …)
● creates interactivity
○ static to dynamic web pages
● used on most web sites/applications
○ twitter, facebook, ...
JavaScript
● Data types
○ number, string, boolean, undefined
● Variables
○ scope, reserved words, naming, data type conversion
● Operators
○ arithmetic, comparison, logical, bitwise, assignment,
special operators (typeof, conditional)
JavaScript
● Control flow
○ if-else, switch-case
● Loops
○ while, do-while, for, foreach
● Functions
○ parameters, scope, recursive, callback, timers
● Arrays
● Objects
○ property, methods, iteration, constructor, copy by ref.
JavaScript
● AJAX - Asynchronous JavaScript And XML ?
○ update a web page without reloading the page
○ request data from server (after the page has loaded)
○ receive data from server (after the page has loaded)
○ send data to server (in the background)
● XML, JSON
○ designed to store and transport (exchange) data
JavaScript
● How a web browser displays a web page?
● URL
○ scheme://domain:port/path?query_str#fragment_id
○ (https://www.youtube.com/watch?v=2ww8vNnCXys)
JavaScript
1. Make a button. When user clicks on it, ask for a string.
When we give it a string, we want every word in string to be
capitalized and shown in an alert.

● imperative - https://jsfiddle.net/g7w8pseg/
● object oriented - https://jsfiddle.net/k0u6v0u6/
● functional - https://jsfiddle.net/119m7erx/
● ES6 - https://jsfiddle.net/cgr868do/
JavaScript - events
● Some programs work with <button>Click me.</button>
direct user input, such as <script>
mouse and keyboard var par = document.querySelector('button');
interaction. The timing and par.onclick = function () {
order of such input can’t be console.log('Clicked);
};
predicted in advance. This
requires a different approach par.addEventListener("click", function() {
to control flow than the one console.log("You clicked!");
});
we have used so far. </script>
JavaScript - events
● click, dblclick, contextmenu var el = document.getElementById( "elem" );

● mouseup, mousedown, mouseover el.onclick = function( event ) {


● load, unload, beforeunload, scroll event.preventDefault();
event.stopPropagation();
● keyup, keydown, keypress }
● blur, focus, change, submit, reset
el.addEventListener( "click", myFunction,
● drop, drag, dragstart, dragend false );
● copy, cut, paste el.removeEventListener( "click", myFunction,
false );
● online, offline
JavaScript - events
● event object - https://jsfiddle.net/w5wkaw77/
● propagation - https://jsfiddle.net/01e8rxg5/
● capturing - https://jsfiddle.net/1q5d680s/
● prevent default actions - https://jsfiddle.net/zxzs0070/
● key events - https://jsfiddle.net/20ee4qz2/
● mouse events - https://jsfiddle.net/xk598wtb/
JavaScript - events
2. Make 2 squares, one bigger than other. Smaller square
should be centered vertically and horizontally inside bigger
square. Click on either square should randomly change color
for only that (clicked) square.

Rješenje: https://jsfiddle.net/44ya9uea/
BlaBlaDev
- Calculator project: 10% additional points on final test
- https://blabladev.com/

You might also like