Download presentation
Presentation is loading. Please wait.
1
JavaScript
2
Hypertext Markup Language (HTML)
(Hypertext Transfer Protocol (HTTP)) Cascading Style Sheets (CSS) -Separation of formatting and content JavaScript (JS) triad of cornerstone technologies for the World Wide Web HTML 1989 physicist Tim Berners-Lee, CERN JS 1995 Brendan Eich, Netscape
3
JavaScript Document Object Model
DOM Hierarchy
4
<!DOCTYPE HTML> <html> <body> <p>Before the script...</p> <script> alert( 'Hello, world!' ); </script> <p>...After the script.</p> </body> </html>
5
Interaction: alert, prompt, confirm <!DOCTYPE HTML> <html> <body> <p>Before the script...</p> <script> var age = prompt('How old are you?', 100); alert(`You are ${age} years old!`); // You are 100 years old! var isBoss = confirm("Are you the boss?"); alert( isBoss ); // true if OK is pressed </script> <p>...After the script.</p> </body> </html>
6
Variables A variable is a “named storage” for data.
When the value is changed, the old data is removed from the variable: var message; message = 'Hello!'; message = 'World!'; // value changed alert(message); Lifecycle of variable Variable=(identifier, value, properties) *value variable var constant const *properties –data type -visibility (global or local scope) var vs. let -duration of life
7
Another view on variables –Bindings
var message; message = 'Hello!'; message = 'World!'; // value changed alert(message); The special word (keyword) lvar or et indicates that this sentence is going to define a binding. When a binding points at a value, that does not mean it is tied to that value forever You should imagine bindings as tentacles, rather than boxes. They do not contain values; they grasp them—two bindings can refer to the same value. A program can access only the values that it still has a reference to. When you need to remember something, you grow a tentacle to hold on to it or you reattach one of your existing tentacles to it. When you define a binding without giving it a value, the tentacle has nothing to grasp, so it ends in thin air. If you ask for the value of an empty binding, you’ll get the value undefined.
8
Binding or variable names
Keywords or reserved words may not be used as binding names break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import interface in instanceof let new package private protected public return static super switch this throw true try typeof var void while with yield
9
Data types A variable in JavaScript can contain any data. variable can at one moment be a string and later receive a numeric value: Programming languages that allow such things are called “dynamically typed”, meaning that there are data types, but variables are not bound to any of them.
10
Var vs. let let and var variables work the same way when used in a function block.
11
Conditional (Ternary) Operator
Logical Operators JavaScript Arithmetic Operators Comparison Operators Assignment Operators
13
Expressions Any unit of code that can be evaluated to a value is an expression. Since expressions produce values, they can appear anywhere in a program where JavaScript expects a value such as the arguments of a function invocation. Categories Arithmetic Expressions: 19+3*Math.PI; String Expressions: 'hello' + 'world'; Logical Expressions: 10 < 20; // evaluates to boolean value false Primary Expressions: 'hello world'; // A string literal Left-hand-side Expressions: total = 10; Assignment Expressions: var b = (a = 1); // here the assignment expression (a = 1) evaluates to a value that is assigned to the variable b. b = (a = 1) is another assignment expression. var is not part of the expression. Expressions with side effects: sum = 20; // here sum is assigned the value of 20 sum++; // increments the value of sum by 1 function modify(){ a *= 10; } var a = 10; modify(); // modifies the value of a to 100.
14
Expression vs. statements
All programs in JavaScript are made of statements. Statements just perform some actions but do not produce any value or output whereas expressions return some value. When interpreter sees an expression it retrieves its value and replaces expression with new value. Statements are used to manipulate those expressions. Example: if statement var x; if (y >= 0) { x = y; } else { x = -y; } Equivalent code using expression with conditional operator var x = (y >= 0 ? y : -y); These are all javascript statements:
15
JS statements: else-if, switch, while, do-while, for
16
JavaScript Functions A function definition (also called a function declaration, or function statement) function functionName(parameters) { code to be executed } Function expression Functions can also be created by a function expression. Such a function can be anonymous - it does not have to have a name: var square = function(number) { return number * number; }; var x = square(4); // x gets the value 16 However, a name can be provided with a function expression and can be used inside the function to refer to itself: var factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1); }; console.log(factorial(3));
17
Calling the function Defining a function does not execute it. Defining the function simply names the function and specifies what to do when the function is called. Calling the function actually performs the specified actions with the indicated parameters. Function scope Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. Function hoisting Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope. Hoisting applies to variable declarations and to function declarations. Because of this, JavaScript functions can be called before they are declared: Functions defined using an expression are not hoisted.
18
Function Parameters and Arguments
Function parameters are the names listed in the function definition. Function arguments are the real values passed to (and received by) the function. Arguments are Passed by Value The parameters, in a function call, are the function's arguments. JavaScript arguments are passed by value: The function only gets to know the values, not the argument's locations. If a function changes an argument's value, it does not change the parameter's original value. Changes to arguments are not visible (reflected) outside the function. Objects are Passed by Reference In JavaScript, object references are values. Because of this, objects will behave like they are passed by reference: If a function changes an object property, it changes the original value. Changes to object properties are visible (reflected) outside the function.
19
<img src="ball.svg" top="0" left="0" width="40" height="40" id="ball">
Use the HTML <img> element to define an image Use the HTML src attribute to define the URL of the image Use the HTML id attribute to identify the image (a handle) Use the HTML width and height attributes to define the size of the image What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG images can be created and edited with any text editor SVG images can be searched, indexed, scripted, and compressed SVG images can be printed with high quality at any resolution SVG graphics do NOT lose any quality if they are zoomed or resized
20
ball-svg. html <. DOCTYPE HTML> <body> <img src="ball
ball-svg.html <!DOCTYPE HTML> <body> <img src="ball.svg" top="100" left="0" width="40" height="40" id="ball"> <script> var marire=1; function animate() { //animeaza mingea if(marire >= 10) {marire -= 19;} else {marire += 1;} ball.width += marire; ball.height += marire; } setInterval(animate,20); </script> </body> </html>
21
<canvas> is an HTML element which can be used to draw graphics via scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations. <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. <canvas> element has only two attributes, width and height. <!DOCTYPE HTML> <body> <canvas id="panza_mea" width="600px" height="300px"></canvas> <img src="ball.svg" width="40" height="40" id="ball"> <script> var panza = document.getElementById("panza_mea"); var c = panza.getContext("2d"); var b = document.getElementById("ball"); document.getElementById("ball").style.visibility = "hidden"; c.fillStyle = 'white'; c.fillRect(0, 0, 600, 300); c.fillStyle = 'yellow'; c.arc(100, 100, 10, 0, Math.PI * 2, true); c.fill(); </script> </body> </html>
22
Animations
23
<!DOCTYPE HTML> <body> <canvas id="panza_mea" width="600px" height="300px"></canvas> <img src="ball.svg" width="40" height="40" id="ball“> <script> var panza = document.getElementById("panza_mea"); var c = panza.getContext("2d"); var b = document.getElementById("ball"); document.getElementById("ball").style.visibility = "hidden"; var x=60,y=60,vx=10,vy=10; function animate() { c.fillStyle = 'white'; c.fillRect(0, 0, 600, 300); c.beginPath(); c.drawImage(b, x, y); c.closePath(); if(x+40+vx>600||x-40+vx<0) vx=-vx; if(y+40+vy>300||y-40+vy<0) vy=-vy; x+=vx; y+=vy; } setInterval(animate,20); </script> </body> </html>
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.