Introduction to Client-side Web Programming with JavaScript by Jaana Holvikivi

Client side web programming
Introduction to JavaScript
Jaana Holvikivi, 
School of ICT
4.10.2024
Jaana Holvikivi
2
Javascript on HTML pages
HTML
STYLE
HEAD
BODY
Javascript
SCRIPT
<tag Javascript>
<tag style>
STYLEsheet
Javascript file
4.10.2024
Jaana Holvikivi
3
Javascript on an HTML page
<html>
<head>
 
<title>Javascript basics</title>
</head>
<body>
<p>
<form>
<input value="Press" type="button" onClick="alert('HELLO')">
</form> </p>
<p>
<script language="JavaScript">
document.write(”Updated:");
document.write(document.lastModified);
</script> </p>
</body>
</html>
4.10.2024
Jaana Holvikivi
4
<html>
<head>
 
<title>Javascript basics</title>
</head>
<body>
<p>
<a href="http://www.metropolia.fi"
onMouseOver="window.status=' click here '; return true"
onMouseOut="window.status=' '; ">
Click the link about Metropolia</a>
</p>
</body>
</html>
Javascript on an HTML page
4.10.2024
Jaana Holvikivi
5
Javascript on an html page
<html>
<head>
 
<title>Javascript and DOM</title>
<
s
c
r
i
p
t
 
t
y
p
e
=
"
t
e
x
t
/
j
a
v
a
s
c
r
i
p
t
"
 
>
  
var date=new Date();
  
var hour=date.getHours();
  
if (hour>=22 || hour<=5)
   
document.write("You should go to sleep");
  
else
   
document.write("Hello, world!");
<
/
s
c
r
i
p
t
>
</head>
<body>
</body>
</html>
4.10.2024
Jaana Holvikivi
6
External code file
var date=new Date();
var hour=date.getHours();
if (hour>=22 || hour<=5)
document.write("You should go to sleep");
else
document.write("Hello, world!");
jsdom.js:
<html>
<head>
<title>Javascript and DOM</title>
<script type="text/javascript" src="
jsdom.js
"></script>
</head>
<body>
I love you!
</body>
</html>
Hello, world! I love you! 
4.10.2024
Jaana Holvikivi
7
Programming language features
Data types
Constants
Variables
Expressions
Statements
Operators
Statements: conditional, loops
Functions
Methods
Events
4.10.2024
Jaana Holvikivi
8
Variables and values
var 
i
=0, 
result
 = 0; 
  
// = assingment statement
for (
i
 = 0; 
i
 <= 10; i++) {
result
 += i;
document.write(
i
 + ": " + 
result
 + "<br/>");
}
var i = 0
 
declares a variable and sets the value to 0
  
(assignment statement)
;
  
statement terminator
Var a, A;
 
JavaScript is case sensitive
A declared variable is local
Reserved words cannot be used as variable names
4.10.2024
Jaana Holvikivi
9
Data types in JavaScript
Numbers   0.44
Strings
 
document.write 
(”greeting"+mj
);
 
in quotations ( ' or ")
 
 
<input value="Paina" type="button"
onClick="alert(
'HELLO'
)">
Null
 
”empty"
String literals
  
 alert("I am an alert box!! 
\n\t
 Man!");
when HTML is not in use, adds a new line and a tab
Boolean values
true, false
4.10.2024
Jaana Holvikivi
10
Character strings
Methods to operate on strings;
mj = "kissa"; other ="la"
  
mj.length
   
value 5
  
mj.toUpperCase()
  
KISSA
  
mj.charAt(0)
   
k
  
mj.substring(0,3)
  
kiss
 
concatenation:
  
mj + other
   
kissala
4.10.2024
Jaana Holvikivi
11
Arrays
blocks = [8, 4, 7, 6, 15]
blocks.length 
  
gets value 5
blocks[0]
  
contains number 8
novel = blocks.sort()
Contains array  [15, 4,6,7,8]
numerical sort:
 
novel=blocks.sort(function(a,b){return a-b});
Arrays can contain different types of data
document.images[0].src = pics [frame].src
4.10.2024
Jaana Holvikivi
12
Expressions
i <= 10  
 
conditional expression: true or false
String operation:
”result is" + summa
   
Statement:
timerID = setTimeout(’alternate()', 800);
;
  
statement terminator
4.10.2024
Jaana Holvikivi
13
Operators
Assignment Operators
+
  
addition
 
 x+=y         is the same as x=x+y
 
x++
  
same as x=x+1
- 
  
Subtraction
* 
  
Multiplication
/
  
Division
%
  
remainder
Comparison Operators,  true or false
==
 
is equal to
!=
  
is not equal
  
5!=8 returns true
<
  
less than
>
  
Greater than
>=
 
 Greater than or equal
<=
 
less than or equal
4.10.2024
Jaana Holvikivi
14
Operators
Logical Operators
&&
  
AND
||
  
OR
!
  
NOT
4.10.2024
Jaana Holvikivi
15
Conditional statements
if
 ( !Math.random ) // here you check existense of a function
{
document.write('<em> -- weather called off due to rain --</em>');
}
else if
 ( Math.floor((Math.random()*2)) == 0 )
{
document.write ("<b>It's just awful. </b>");
}
else
{
document.write ("<em>How wonderful it is!</em>");
}
4.10.2024
Jaana Holvikivi
16
Loops
for (i = 0; i <= 10; i++)
{
result += i;
document.write(i + ": " + result + "<br/>");
}
document.write("<p></p>");
Increment 
 
i=i+1 or
 
i++
4.10.2024
Jaana Holvikivi
17
Loops
var x = 1;
var result = 0;
while ( x <= 10 ) { // the loop is repeated until x>10
result += x;
x++;
}
alert ("The result is " + result + " and x is " + x );
4.10.2024
Jaana Holvikivi
18
Functions
User defined
Predefined
 
alert
 
prompt
 
 
parsInt
  
converts variable into an integer
 
parseFloat
  
converts variable into a number
 
Math.sqrt
  
square root
 
Math.floor
  
rounding to the lower integer
 
Math.round
  
rounding
4.10.2024
Jaana Holvikivi
19
Functions: user defined
<html>
<head>
<script type="text/javascript">
function disp_alert()
 
{
  
alert("I am an alert box!!")
 
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display
alert box">
</form>
</body>
</html>
4.10.2024
Jaana Holvikivi
20
Methods
close() 
 
getElementById()
 
getElementsByName()
getElementsByTagName()
 
open()
 
 
 
document.write() 
 
Closes an output stream opened with the
document.open() method, and displays the
collected data
Returns a reference to the first object with
the specified id
 
Returns a collection of objects with the
specified name
Returns a collection of objects with the
specified tagname
Opens a stream to collect the output from
any document.write() method
Writes HTML expressions or JavaScript code
to a document
4.10.2024
Jaana Holvikivi
21
Event handlers
onabort  
 
Loading of an image is interrupted
onblur 
  
An element loses focus 
 
onchange 
 
The user changes the content of a field
onclick 
  
Mouse clicks an object 
 
ondblclick 
 
Mouse double-clicks an object 
 
onerror 
  
An error occurs when loading a document or an image
onfocus 
  
An element gets focus 
 
onkeypress 
 
A keyboard key is pressed or held down
onload 
  
A page or an image is finished loading
onmousedown 
 
A mouse button is pressed
onmouseout 
 
The mouse is moved off an element
onmouseover 
 
The mouse is moved over an element
onreset 
 
  
 
The reset button is clicked 
 
onresize 
 
A window or frame is resized
onselect 
  
Text is selected
onsubmit 
 
The submit button is clicked
onunload 
 
The user exits the page
setTimeout(), clearTimeout()
 
timer is activated
4.10.2024
Jaana Holvikivi
22
Event: onload() & getElementById
function process()
{
 
var string;
 
string="<ul>"
  
+ "<li>Black</li>"
  
+ "<li>Red</li>"
  
+ "<li>Blue</li>"
  
+ "</ul>";
 
var myDiv=document.getElementById("
Hook
");
 
myDiv.innerHTML=string;
}
ESIMERKIKSI: <div id="hook">stories and <h2>headings</h2></div>
Hook has an 
innerHTML
-property  
stories and <h2>headings</h2>
Hook has an 
outerHTML
-property
 
<div id="hook">stories and <h2>headings</h2></div>
4.10.2024
Jaana Holvikivi
23
..onload()
<html>
 
<head>
  
<title>AJAX Foundations: javascript and DOM</title>
  
<script type="text/javascript" src="morejsdom.js"></script>
 
</head>
<
b
o
d
y
 
o
n
l
o
a
d
=
"
p
r
o
c
e
s
s
(
)
"
>
  
Hello! Here is a cool list of colors for you:
  
<br/>
<
d
i
v
 
i
d
=
"
H
o
o
k
"
 
/
>
 
</body>
</html>
4.10.2024
Jaana Holvikivi
24
DOM Document Object Model
document.form1.text1.value
 
<form name="form1">
 
<input type="text" name="text1">
 
</form>
parent.location = word1 + word2 + ".html"
4.10.2024
Jaana Holvikivi
25
Javascript as a programming language
Object-oriented:
Instead of writing procedural programs, write class
libraries to encapsulate behaviors
DOM is not a collection of dumb elements but a
hierarchy of types
Styles are properties of objects
Complete OO code with error handling, instance
methods, static methods and type hierarchies
Versatile use of functions
A large number of object-oriented libraries
Used to create User Interfaces

								

								
								

										

												
Slide Note

												
6.9.2010

										

								


								
						

							
						


							

								

									
										
Embed
									
									
										
Share
									

									
									
									

								

								
							


							

							 
 							 
 							 
						  


							
							

								
This content provides an overview of client-side web programming using JavaScript, covering topics such as adding JavaScript to HTML pages, working with HTML elements, handling events, interacting with the Document Object Model (DOM), external code files, and programming language features like data types, constants, variables, expressions, and operators. Jaana Holvikivi, from the School of ICT, presents a comprehensive guide to understanding and implementing JavaScript for front-end web development.


								
    
																		
  •   Client-Side Web Programming
    • 
																	
  •    JavaScript Basics
    • 
																	
  •    DOM Manipulation
    • 
																	
  •    Web Development
    • 
																	
  •    Jaana Holvikivi
    • 
																

								

								

									

										maij_48
										

											 maij_48 Follow
											

										

									

									
Uploaded on Oct 04, 2024 | 2 Views

								

								


								

									
Download Presentation

									
								

								
Please find below an Image/Link to download the presentation.

								
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
									Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.


									
									

									


										 
										 
										 
										 

									

									

									

									

										
 E N D 

									


								
Presentation Transcript

								

								
  1. Client side web programming Introduction to JavaScript Jaana Holvikivi, School of ICT
    2. 
            
            
            
  2. Javascript on HTML pages HTML HEAD STYLEsheet STYLE Javascript file SCRIPT BODY <tag Javascript> Javascript <tag style> 4.10.2024 Jaana Holvikivi 2
    3. 
            
            
            
  3. Javascript on an HTML page <html> <head> <title>Javascript basics</title> </head> <body> <p> <form> <input value="Press" type="button" onClick="alert('HELLO')"> </form> </p> <p> <script language="JavaScript"> document.write(   Updated:"); document.write(document.lastModified); </script> </p> </body> </html> 4.10.2024 Jaana Holvikivi 3
    4. 
            
            
            
  4. Javascript on an HTML page <html> <head> <title>Javascript basics</title> </head> <body> <p> <a href="http://www.metropolia.fi"  onMouseOver="window.status=' click here '; return true"  onMouseOut="window.status=' '; "> Click the link about Metropolia</a>  </p> </body> </html> 4.10.2024 Jaana Holvikivi 4
    5. 
            
            
            
  5. Javascript on an html page <html> <head> <title>Javascript and DOM</title> <script type="text/javascript" > var date=new Date(); var hour=date.getHours(); if (hour>=22 || hour<=5) document.write("You should go to sleep"); else document.write("Hello, world!"); </script> </head> <body> </body> </html> 4.10.2024 Jaana Holvikivi 5
    6. 
            
            
            
  6. External code file jsdom.js: var date=new Date(); var hour=date.getHours(); if (hour>=22 || hour<=5) document.write("You should go to sleep"); else document.write("Hello, world!"); <html> <head> <title>Javascript and DOM</title> <script type="text/javascript" src="jsdom.js"></script> </head> <body> I love you! </body> </html> 4.10.2024 Hello, world! I love you!  Jaana Holvikivi 6
    7. 
            
            
            
  7. Programming language features     Data types     Constants     Variables     Expressions     Statements     Operators     Statements: conditional, loops     Functions      Methods     Events 4.10.2024 Jaana Holvikivi 7
    8. 
            
            
            
  8. Variables and values var i=0, result = 0;  for (i = 0; i <= 10; i++) { result += i; document.write(i + ": " + result + "<br/>");  } // = assingment statement var i = 0 declares a variable and sets the value to 0 (assignment statement) statement terminator Var a, A; JavaScript is case sensitive A declared variable is local Reserved words cannot be used as variable names ; 4.10.2024 Jaana Holvikivi 8
    9. 
            
            
            
  9. Data types in JavaScript     Numbers   0.44     Strings document.write (   greeting"+mj);  in quotations ( ' or ") <input value="Paina" type="button"  onClick="alert('HELLO')">     Null    empty"     String literals alert("I am an alert box!! \n\t Man!"); when HTML is not in use, adds a new line and a tab     Boolean values true, false 4.10.2024 Jaana Holvikivi 9
    10. 
            
            
            
  10. Character strings     Methods to operate on strings;  mj = "kissa"; other ="la" mj.length mj.toUpperCase() mj.charAt(0) mj.substring(0,3) concatenation: mj + other value 5 KISSA k kiss kissala 4.10.2024 Jaana Holvikivi 10
    11. 
            
            
            
  11. Arrays blocks = [8, 4, 7, 6, 15]  blocks.length  blocks[0] novel = blocks.sort() Contains array  [15, 4,6,7,8] numerical sort: novel=blocks.sort(function(a,b){return a-b}); gets value 5 contains number 8 Arrays can contain different types of data document.images[0].src = pics [frame].src  4.10.2024 Jaana Holvikivi 11
    12. 
            
            
            
  12. Expressions i <= 10   conditional expression: true or false String operation:     result is" + summa Statement: timerID = setTimeout(   alternate()', 800); ; statement terminator 4.10.2024 Jaana Holvikivi 12
    13. 
            
            
            
  13. Operators Assignment Operators + addition x+=y         is the same as x=x+y x++ same as x=x+1 - Subtraction *  Multiplication / Division % remainder Comparison Operators,  true or false == is equal to != is not equal < less than > Greater than >= Greater than or equal <= less than or equal 5!=8 returns true  4.10.2024 Jaana Holvikivi 13
    14. 
            
            
            
  14. Operators Logical Operators && AND || OR ! NOT RESULT AND 0 0 0  1 0 0  0 1 0  1 1 1  OR 0 0 0  1 0 1  0 1 1  1 1 1  NOT 1 0  0 1  4.10.2024 Jaana Holvikivi 14
    15. 
            
            
            
  15. Conditional statements if ( !Math.random ) // here you check existense of a function { document.write('<em> -- weather called off due to rain --</em>'); } else if ( Math.floor((Math.random()*2)) == 0 )  { document.write ("<b>It's just awful. </b>"); } else { document.write ("<em>How wonderful it is!</em>"); }  4.10.2024 Jaana Holvikivi 15
    16. 
            
            
            
  16. Loops for (i = 0; i <= 10; i++)  { result += i; document.write(i + ": " + result + "<br/>");  } document.write("<p></p>");     Increment i=i+1 or i++ 4.10.2024 Jaana Holvikivi 16
    17. 
            
            
            
  17. Loops     var x = 1; var result = 0; while ( x <= 10 ) { // the loop is repeated until x>10 result += x;  x++;  } alert ("The result is " + result + " and x is " + x );  4.10.2024 Jaana Holvikivi 17
    18. 
            
            
            
  18. Functions User defined Predefined alert prompt parsInt parseFloat Math.sqrt Math.floor Math.round converts variable into an integer converts variable into a number square root rounding to the lower integer rounding 4.10.2024 Jaana Holvikivi 18
    19. 
            
            
            
  19. Functions: user defined <html> <head> <script type="text/javascript"> function disp_alert() { alert("I am an alert box!!") } </script> </head> <body> <form> <input type="button" onclick="disp_alert()" value="Display  alert box"> </form> </body> </html> 4.10.2024 Jaana Holvikivi 19
    20. 
            
            
            
  20. Methods Closes an output stream opened with the  document.open() method, and displays the  collected data Returns a reference to the first object with  the specified id  close()  getElementById()  Returns a collection of objects with the  specified name getElementsByName()  Returns a collection of objects with the  specified tagname getElementsByTagName()  open()  document.write()  Opens a stream to collect the output from  any document.write() method Writes HTML expressions or JavaScript code  to a document 4.10.2024 Jaana Holvikivi 20
    21. 
            
            
            
  21. Event handlers onabort   onblur  onchange  onclick   ondblclick  onerror   onfocus   onkeypress  onload   onmousedown  onmouseout  onmouseover  onreset    onresize  onselect   onsubmit  onunload  setTimeout(), clearTimeout() timer is activated Loading of an image is interrupted   An element loses focus  The user changes the content of a field  Mouse clicks an object  Mouse double-clicks an object  An error occurs when loading a document or an image  An element gets focus  A keyboard key is pressed or held down  A page or an image is finished loading  A mouse button is pressed  The mouse is moved off an element  The mouse is moved over an element  The reset button is clicked  A window or frame is resized  Text is selected The submit button is clicked  The user exits the page 4.10.2024 Jaana Holvikivi 21
    22. 
            
            
            
  22. Event: onload() & getElementById function process() { var string; string="<ul>" + "<li>Black</li>" + "<li>Red</li>" + "<li>Blue</li>" + "</ul>"; var myDiv=document.getElementById("Hook"); myDiv.innerHTML=string; } ESIMERKIKSI: <div id="hook">stories and <h2>headings</h2></div> Hook has an innerHTML-property  stories and <h2>headings</h2> Hook has an outerHTML-property  <div id="hook">stories and <h2>headings</h2></div> 4.10.2024 Jaana Holvikivi 22
    23. 
            
            
            
  23. ..onload() <html> <head> <title>AJAX Foundations: javascript and DOM</title> <script type="text/javascript" src="morejsdom.js"></script> </head> <body onload="process()"> Hello! Here is a cool list of colors for you: <br/> <div id="Hook" /> </body> </html> 4.10.2024 Jaana Holvikivi 23
    24. 
            
            
            
  24. DOM Document Object Model      document.form1.text1.value  <form name="form1">  <input type="text" name="text1">  </form>      parent.location = word1 + word2 + ".html"  4.10.2024 Jaana Holvikivi 24
    25. 
            
            
            
  25. Javascript as a programming language     Object-oriented:     Instead of writing procedural programs, write class  libraries to encapsulate behaviors     DOM is not a collection of dumb elements but a  hierarchy of types     Styles are properties of objects     Complete OO code with error handling, instance  methods, static methods and type hierarchies     Versatile use of functions     A large number of object-oriented libraries     Used to create User Interfaces 4.10.2024 Jaana Holvikivi 25
    26. 
            
            
            
							

							

					

					
					
					

						
Related

						

						


							
							
							
							

						

							

									

      

        
          

            

              Introduction to Web Programming with JavaScript
            

            

              
Introduction to Web Programming with JavaScript

              
icarus

            

          

        
      


     

      

        
          

            

              Web Development: Frontend and Backend Roadmap
            

            

              
Web Development: Frontend and Backend Roadmap

              
auden

            

          

        
      


     

      

        
          

            

              JavaScript While Loops
            

            

              
JavaScript While Loops

              
maura

            

          

        
      


     

      

        
          

            

              Introduction to JavaScript: History, Features, and Functional Paradigm
            

            

              
Introduction to JavaScript: History, Features, and Functional Paradigm

              
delyth

            

          

        
      


     

      

        
          

            

              Simplifying Client-Side Scripting with jQuery
            

            

              
Simplifying Client-Side Scripting with jQuery

              
astor

            

          

        
      


     

      

        
          

            

              Building JavaScript Slot Machine Code with These Easy Tips
            

            

              
Building JavaScript Slot Machine Code with These Easy Tips

              
ridh

            

          

        
      


     

      

        
          

            

              Web Application Development and Programming CTE Program Overview
            

            

              
Web Application Development and Programming CTE Program Overview

              
harm_21

            

          

        
      


     

      

        
          

            

              Loops and Arrays in JavaScript
            

            

              
Loops and Arrays in JavaScript

              
ada_bev

            

          

        
      


     

      

        
          

            

              How to Write a Simple JavaScript Slot Machine Code
            

            

              
How to Write a Simple JavaScript Slot Machine Code

              
Bryan1

            

          

        
      


     

      

        
          

            

              Variable Declaration in JavaScript and Its Impact on Web Design
            

            

              
Variable Declaration in JavaScript and Its Impact on Web Design

              
blew_zir

            

          

        
      


     

      

        
          

            

              Triangle Congruence Properties
            

            

              
Triangle Congruence Properties

              
stetler_r

            

          

        
      


     

      

        
          

            

              Using JavaScript, CSS, and jQuery to Create Searchable Shuttle APEX Plug-in
            

            

              
Using JavaScript, CSS, and jQuery to Create Searchable Shuttle APEX Plug-in

              
stefha

            

          

        
      


     

      

        
          

            

              Client-Side Tips & Tricks for RadControls for ASP.NET AJAX
            

            

              
Client-Side Tips & Tricks for RadControls for ASP.NET AJAX

              
sehaj

            

          

        
      


     

      

        
          

            

              Exploring the World of JavaScript and DOM
            

            

              
Exploring the World of JavaScript and DOM

              
brennank

            

          

        
      


     

      

        
          

            

              Casino JavaScript_ Unlocking the Potential of Web-Based Gambling Games
            

            

              
Casino JavaScript_ Unlocking the Potential of Web-Based Gambling Games

              
ridh

            

          

        
      


     

      

        
          

            

              JavaScript: A Brief Overview
            

            

              
JavaScript: A Brief Overview

              
noga_ney

            

          

        
      


     

      

        
          

            

              Overview of Web Libraries, Tools, and Frameworks for Building Web Apps
            

            

              
Overview of Web Libraries, Tools, and Frameworks for Building Web Apps

              
lboon

            

          

        
      


     

      

        
          

            

              Sessions and Cookies in Web Development
            

            

              
Sessions and Cookies in Web Development

              
mal_si

            

          

        
      


     

      

        
          

            

              Securing JavaScript Information Flow with Staged Approach
            

            

              
Securing JavaScript Information Flow with Staged Approach

              
onestipe

            

          

        
      


     

      

        
          

            

              Harnessing the Power of Casino JavaScript for HTML5 Casino Game Development
            

            

              
Harnessing the Power of Casino JavaScript for HTML5 Casino Game Development

              
ridh

            

          

        
      


     

      

        
          

            

              Modern Web Development Techniques
            

            

              
Modern Web Development Techniques

              
mrece

            

          

        
      


     

      

        
          

            

              Introduction to Web Development and Tools for Success
            

            

              
Introduction to Web Development and Tools for Success

              
nas_arq

            

          

        
      


     							

						

					

					

				


				

			

		
		

			

				
				

					
More Related Content

					

						

														

					

				

				
			

		












 





  
  
  



giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#