Java Script Hypertext Markup Language HTML Hypertext Transfer
- Slides: 23
Java. Script
Hypertext Markup Language (HTML) (Hypertext Transfer Protocol (HTTP)) Cascading Style Sheets (CSS) -Separation of formatting and content Java. Script (JS) triad of cornerstone technologies for the World Wide Web HTML 1989 physicist Tim Berners-Lee, CERN JS 1995 Brendan Eich, Netscape
Java. Script Document Object Model DOM Hierarchy
<!DOCTYPE HTML> <html> <body> <p>Before the script. . . </p> <script> alert( 'Hello, world!' ); </script> <p>. . . After the script. </p> </body> </html>
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 is. Boss = confirm("Are you the boss? "); alert( is. Boss ); // true if OK is pressed </script> <p>. . . After the script. </p> </body> </html>
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
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.
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
Data types A variable in Java. Script 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.
Var vs. let and variables work the same way when used in a function block.
Conditional (Ternary) Operator Logical Operators Java. Script Arithmetic Operators Comparison Operators Assignment Operators
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 Java. Script 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.
Expression vs. statements All programs in Java. Script 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:
JS statements: else-if, switch, while, do-while, for
Java. Script Functions A function definition (also called a function declaration, or function statement) function. Name(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));
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 Java. Script'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, Java. Script functions can be called before they are declared: Functions defined using an expression are not hoisted.
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. Java. Script 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 Java. Script, 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.
<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
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; } set. Interval(animate, 20); </script> </body> </html>
<canvas> is an HTML element which can be used to draw graphics via scripting (usually Java. Script). 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="600 px" height="300 px"></canvas> <img src="ball. svg" width="40" height="40" id="ball"> <script> var panza = document. get. Element. By. Id("panza_mea"); var c = panza. get. Context("2 d"); var b = document. get. Element. By. Id("ball"); document. get. Element. By. Id("ball"). style. visibility = "hidden"; c. fill. Style = 'white'; c. fill. Rect(0, 0, 600, 300); c. fill. Style = 'yellow'; c. arc(100, 10, 0, Math. PI * 2, true); c. fill(); </script> </body> </html>
Animations
<!DOCTYPE HTML> <body> <canvas id="panza_mea" width="600 px" height="300 px"></canvas> <img src="ball. svg" width="40" height="40" id="ball“> <script> var panza = document. get. Element. By. Id("panza_mea"); var c = panza. get. Context("2 d"); var b = document. get. Element. By. Id("ball"); document. get. Element. By. Id("ball"). style. visibility = "hidden"; var x=60, y=60, vx=10, vy=10; function animate() { c. fill. Style = 'white'; c. fill. Rect(0, 0, 600, 300); c. begin. Path(); c. draw. Image(b, x, y); c. close. Path(); 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; } set. Interval(animate, 20); </script> </body> </html>
What is html stands for? *
Qtextarea
21st century literary genres
Inside which html element do we put the javascript?
Extra markup html
Structural markup html
Html semantic markup
What does a markup tag tells the web browser
Language
Security assertion markup language definition
Wml format
Markup language examples
Clainlist
Json markup language
Lightweight markup language
Metalenguaje xml
Geography markup language tutorial
What is gml
Darpa agent markup language
Xml dokument
Darpa agent markup language
Xtensible markup language
Language
Language
