Ia Av02

2
JavaScript

JavaScript - o
JavaScript Java, Java

Brendan Eich Netscape
JavaScript LiveScript,
Java
JavaScript ASCII
- ( JavaScript 2.0),
,

JavaScript
(cookies)
HTML
<script>
JavaScript
<script> :
<script type="text/javascript">
//avaScript kod
</script>
<html>
<head>
<script type = "text/javascript">
<!-document.write("<h1 style=\"color: red\">");
document.write("Hello world");

document.write("</h1>");
HTML5
// -->
</script>

</head>

<body> <p>And here is more text</p> </body>

</html>
JavaScript
script
script ,
JavaScript

,
HTML
<!
script here
// -->

</script>
</h1>
</body>
</html>
JavaScript
(<head>)
(<body>) HTML

(<head>)

JavaScript
.js
<script src="myJavaScriptFile.js"></script>
.js
HTML
.js
<script>
:
<script src="myjavascript.js
language="JavaScript1.2
type="text/javascript">
</script>
DOM
HTML DOM (Document Object Model)

HTML

JavaScript Output

HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
</script>
</body>
</html>
document.write()
10
console.log()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
11
alert("Input field is empty.");
answer = confirm("Do you want to quit?");
Prompt
age = prompt("Enter your age:", "");
12
JavaScript
:

(number),
(string),
(boolean)

0x
0123
,
13
- \n (newline), \" (double

quote), .
:
strFirst = "John";
strLast = "Kennedy";
strFull = strFirst + "F." + strLast;
true false
0, "0", , undefined, null, NaN false

true
14
Object
Array
Null
Undefined
15
var
var (
)

j
Var pi;
Var ime: Integer;
//(avascript 2.0)

=
var pi = 3.1416, x, y, name = "Dr. Dave" ;
,
(_) $

16

:
+
:
<
:
&&
:
&
: +=
>>>= &= ^= |=
:
- * / % ++ -<= == != >= >

|| !
| ^ ~ << >> >>>
-= *= /= %= <<= >>=
+
:
condition ? value_if_true : value_if_false
:
new
typeof
void
delete
17

:
!=

=== !==

==
18

, true 1 false 0
,
true, (undefined) false
, true true false
false

a * b =>
e(x) => ( e)
a + b => ( )
19
C Java:
//
/* */
<script language=JavaScript>

</script>
20
(1)
:
greeting = "Hello, " + name;
nNum -= 3; nNum = nNum - 3;
nNum *= 3; nNum = nNum * 3;
nNum /= 3; nNum = nNum / 3;
nNum %= 3; nNum = nNum % 3;
{ statement; ...; statement }
: ;; { }
21
(2)

If,
switch

for,
do-while, while. for-in

:
var
var
var
for
person = {fname:"John", lname:"Doe", age:25};

text = "";
x;
(x in person) {
text += person[x];
break, continue
22
()
()
o ()

,
, ()
,
: document.bgcolor
document , bgcolor
document.write(Hello World")
document , write .

23
:
{ name1 : value1 , ... , nameN : valueN }
:
var car = {myCar: "Saturn", 7: "Mazda", getCar:
CarTypes("Honda"), special: Sales}
myCar, getCar, 7 ( ) ,
"Saturn" "Mazda" (String),
CarTypes ,
Sales
:
document.write("I own a " + car.myCar);
24

:
var course = new Object();
course.number = "CIT597";
course.teacher = "Dr. Dave";
:
function Course(n, t) { // best placed in <head>
this.number = n;
this.teacher = t;
}
var course = new Course("CIT597", "Dr. Dave");
25
function name(arg1, , argN) { statements }

return value;
:
function calc_sales(units_a, units_b, units_c) {
return units_a*79 + units_b*129 + units_c*699;
}

name(arg1, , argN)

26

, , x[4]
color = ["red", "yellow", "green", "blue"];

0,
: color[0] "red"
27

,

:
color = ["red", , , "green", "blue"];

5
color = ["red", , , "green", "blue,];

5
28
var colors = new Array();

:
colors[0] = "red"; colors[2] = "blue"; colors[1]="green";

var colors = new Array(3);
:
var colors = new Array("red", "green", "blue");

: myArray[50000] = 3;
0
232-1
29
sort() -
reverse()
:
var a = [8,7,6,5]; for(i=0;i<a.length;i++) a[i] += 2;
b = a.reverse();
push()

pop()
,
toString()
,
length

: var myArray = new Array(5); myArray[10] = 3;
30
,
car = { myCar: "Saturn", 7: "Mazda" }
:
car[7] car.7
car.myCar car["myCar"] car["my" +
"Car"]
31

JavaScript
<!DOCTYPE html>
<html>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body></html>
32
HTML
JavaScript DOM
( HTML )
JavaScript :

HTML
HTML
HTML

HTML
33
M HTML
-
<html>
<head>
<script language="JavaScript">

</script>
</head>
<body>
<form>
<input type="button" value="Change the paragraph" onClick="change()">
<p id="demo">
JavaScript can change the HTML content
</p>
</form>
</body>
</html>
34
M HTML
35

HTML
JavaScript
HTML
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="pic_bulboff.gif";
}
else
{
element.src="pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180"/>
<p>Click the light bulb to turn on/off the light</p>
</body>
</html>
36

HTML
37
JavaScript
HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript example</h1>
<p id="demo">
JavaScript can change the style of an HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.color="#ff0000"; // Change the style
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
38
M (2)
39
JavaScript

<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 1 and 10:</p>
<input id="numb" type="text">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
//Get the value of input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
40
41
JavaSript
<html>
<head>
function korisnickiIsklucok(p,errCode)
{
this.description = p;
this.err = errCode;
}
function delenje(delenik,delitel)
{
if(delitel==0)
{
var i = new korisnickiIsklucok('Delenje so nula');
throw i;
}
return delenik/delitel;
}
42
JavaSript
try
{
var result = delenje(123,0); // obid za delenje so nula
}
catch(err)
{
alert('Exception: ' + err.description);
}
</script>
</head>
<body>
</body>
</html>
43
JavaSript
<html>
<head>
try{
var pocetok=7; var kraj=77; var x=100;
if(x<7||x>77)
{
throw "NadvorOdOpsleg"
}
}
catch(err){
if(err == "NadvorOdOpsleg")
alert ("Promenlivata x = " + x + " e nadvor od
opsegot [" + pocetok + "," + kraj + "]!!!");
}
</script>
</head>
<body>
</body>
</html>
44
<html>
<head>
<title>Calculator</title>
<!-var oper="+";
function SetOp(op) {
oper=op;
Calculate(); }
function Calculate() {
document.Calc.sum.value=(document.Calc.br1.value + oper +
document.Calc.br2.value)+ " = " + eval(document.Calc.br1.value + oper +
document.Calc.br2.value) ;
}
// End -->
</script>
</head>
<body onLoad="Calculate()">
<form name="Calc">
<table border=1>
45
<tr> <td> Operand 1: </td>

<td> <input type="txt" name="br1"
onChange="Calculate()"></td>
</tr>
<tr> <td> Operand 2: </td>
<td> <input type="txt" name="br2"
</tr>
<tr> <td>
<input type="radio" name="operat"
checked>+
</td>
<td> <input type="txt" name="sum"
</tr>
</table></form>
size="10" value="1"
size="10" value="2"
value="+" onClick="SetOp('+')"
value="-" onClick="SetOp('-')">value="*" onClick="SetOp('*')">*
value="/" onClick="SetOp('/')">/
size="10"
46
<html>
<head>
<title>Factorials</title>
document.write("<h2>Table of Factorials</h2>");
for(i = 1, fact = 1; i < 10; i++, fact *= i) {
document.write(i + "! = " + fact);
document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
47

<html>
<head><title>Simple Animation</title></head>
<body>
<h1 id='title'>Simple Animation<h1>
// Look up the element to animate
var e = document.getElementById("title");
e.style.position = "absolute";
var frame = 0; // Initialize frame counter.
// This function moves the element one frame
// at a time, then hides it when done.
function nextFrame() {
if (frame++ < 20) { // Only do 20 frames
e.style.left = (10 * frame) + "px";
// Call ourselves again in 50ms.
setTimeout("nextFrame()", 50);
}
else e.style.visibility="hidden"; // Hide it.
}
nextFrame(); // Start animating now!
</script>
</body>
</html>
48
49
<html>
<head>
<title>Button Example</title>
<style>
.start {color:yellow; background:navy}
.end {color:green; background:#ff00ff}
</style>
</head>
<body>
<form name=highlight onMouseover="highlightButton('start')"
onMouseout="highlightButton('end')">
<input type="button" value="Pass Your Mouse Over Me"
onClick="location.href='http://www.finki.ukim.mk'">
<input type="button" value="Pass Your Mouse Over Me Too"
onClick="location.href='http://www.w3schools.com'">
</form>
<script language="javascript">
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s;
}
</script>
</body>
</html>
50
<html>
<head>
<script>
function myFunction(e)
{
x=e.clientX;
y=e.clientY;
coor="Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML=coor;
}
function clearCoor()
{
document.getElementById("demo").innerHTML="";
}
</script>
</head>
51
<body style="margin:0px;">
<div id="coordiv" style="width:199px;height:99px;border:1px solid"
onmousemove="myFunction(event)" onmouseout="clearCoor()">
</div>
<p>Mouse over the rectangle above, and get the coordinates of your
mouse pointer.
</p>
<p id="demo"></p>
</body>
</html>
52
53

Ia Av02

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ia Av02

Uploaded by

Copyright:

Available Formats

2

JavaScript Java, Java

HTML DOM (Document Object Model)

alert("Input field is empty.");

answer = confirm("Do you want to quit?");

age = prompt("Enter your age:", "");

- \n (newline), \" (double

0, "0", , undefined, null, NaN false

- * / % ++ -<= == != >= >

{ statement; ...; statement }

do-while, while. for-in

person = {fname:"John", lname:"Doe", age:25};

function name(arg1, , argN) { statements }

color = ["red", "yellow", "green", "blue"];

color = ["red", , , "green", "blue"];

color = ["red", , , "green", "blue,];

var colors = new Array();

colors[0] = "red"; colors[2] = "blue"; colors[1]="green";

var result = delenje(123,0); // obid za delenje so nula

<tr> <td> Operand 1: </td>

You might also like