1 / 15

JavaScript - PowerPoint PPT Presentation

  • Uploaded on

JavaScript. Bartosz Sakowicz. JavaScript - basics. JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'JavaScript' - ilar

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


Bartosz Sakowicz

Javascript basics
JavaScript - basics

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.

JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, Opera.

Javascript basics 2
JavaScript – basics (2)

  • JavaScript was designed to add interactivity to HTML pages

  • JavaScript is a scripting language

  • A JavaScript is usually embedded directly into HTML pages

  • JavaScript is an interpreted language

  • It is free

  • Java != JavaScript !!!

Javascript examples
JavaScript - examples



<script type="text/javascript">


document.write(“It is JavaScript!")





Javascript examples 2


<script type=“text/javascript”>

function pushbutton() {





<input type="button" name="hello" value=“Hello" onclick="pushbutton()">



JavaScript – examples(2)

Javascript examples 3


<script type=“text/javascript”>

function getname(str) {

alert("Hi, "+ str+"!");



<p>Enter your name:</p>


<input type="text" name="name" onblur="getname(this.value)" value="">


JavaScript – examples(3)

Inserting javascript
Inserting JavaScript

  • <head> section (as in previous transparencies)

  • Inline scripts:

  • <body> <script type="text/javascript"> .... </script> </body>

  • 3) External file:

  • <head>

  • <script src=“menu.js"></script>

  • </head>

Basics usage of objects
Basics usage of objects

a) With dot (.) – the same as in C++ (preferred way)

b) With usage the table of properties of object, eg:

document[1] – useful with loops

c) With usage of association table:


Expressions operators
Expressions & operators

x=7; // variables doesn’t have type!

str = “Some text";

(bool1 == true) && (bool2 == false);

str = “Some" + " text";

All the operators are identical as in C++/Java.

Control flow statements


Example usage


for(i=1; i<5; i++) {

// expressions

break; }


The same as break.


See break..

for (i in obj) {// expressions}


goto label1;


if(condition) {// expressions if true } else {// expressions if false }


function sum(a,b) {x=a+b; return x;}



while(condition) {//expressions}

do { //expressions } while (condition)


with (document) {

write " Some text "; }

Control flow statements

Events onload and onunload
Events - onload and onUnload

Events are triggered when the user enters or leaves the page.

The onload event is often used to check the visitor's browser type and browser version,

Events are often used to deal with cookies that should be set when a user enters or leaves a page.


<body onload="DoSthonload">

<body onunload="DoSthonunload">

Events onfocus onblur and onchange
Events - onFocus, onBlur and onChange

Events are often used in combination with validation of form fields.


<input type="text" size="30“

id="email" onchange="checkEmail()">;

Events onsubmit
Events - onSubmit

Event is used to validate all form fields before submitting it.


<form method="post" action="xxx.htm"

onsubmit="return checkForm()">

Events onmouseover and onmouseout
Events - onMouseOver and onMouseOut

Events are often used to create "animated" buttons, eg:


<script type=“text/javascript”><!--

function changeImage(i,j) {

document.images[i].src = “image"+j+".gif";


<a href= "doc.htm" onmouseover="changeImage(0,2)" onmouseout="changeImage(0,1)"> <img src=“image1.gif" alt=“image1"/></a>

<a href= "doc.htm" onmouseover="changeImage(1,2)" onmouseout="changeImage(1,1)"> <img src=“image1.gif" alt=“image1"/></a></body></html>