Java Script

JavaScript

JavaScript (JS) – obiektowy skryptowy język programowania, stworzony przez firmę Netscape,
najczęściej stosowany na stronach internetowych.
Pod koniec lat 90, XX wieku organizacja ECMA wydała na podstawie JavaScriptu
standard języka skryptowego o nazwie ECMAScript.

Najczęściej spotykanym zastosowaniem języka JavaScript są strony WWW.
Skrypty służą najczęściej do zapewnienia interaktywności poprzez reagowanie na zdarzenia,
sprawdzania poprawności formularzy lub budowania elementów nawigacyjnych.
Podczas wzbogacania funkcjonalności strony internetowej istotne jest, aby żaden element serwisu
nie stał się niedostępny po wyłączeniu obsługi JavaScriptu w przeglądarce.
Skrypt JavaScriptu ma znacznie ograniczony dostęp do komputera użytkownika (o ile nie zostanie podpisany cyfrowo).
Niektóre strony WWW zbudowane są z wykorzystaniem JavaScriptu po stronie serwera, jednakże znacznie częściej
korzysta się w tym przypadku z innych języków.

W języku JavaScript można także pisać pełnoprawne aplikacje.
Fundacja Mozilla udostępnia środowisko złożone z technologii takich jak XUL, XBL, XPCOM oraz JSLib.
Umożliwiają one tworzenie korzystających z zasobów systemowych aplikacji o graficznym interfejsie użytkownika
dopasowującym się do danej platformy.
Przykładem aplikacji napisanych z użyciem JS i XUL może być klient IRC o nazwie ChatZilla, domyślnie dołączony do pakietu Mozilla.
Microsoft udostępnia biblioteki umożliwiające tworzenie aplikacji JScript jako część środowiska Windows Scripting Host.
Ponadto JScript.NET jest jednym z podstawowych języków środowiska .NET.
Istnieje także stworzone przez IBM środowisko SashXB dla systemu Linux, które umożliwia tworzenie
w języku JavaScript aplikacji korzystających z GTK+, GNOME i OpenLDAP.

Java a JavaScript
Początkowo Netscape nazwała nowy język LiveScript.
Nazwa została jednak szybko zmieniona na JavaScript wskutek biznesowych porozumień
pomiędzy Netscape a firmą Sun Microsystems
(Sun jest współwłaścicielem znaku handlowego JavaScript).
Skutkiem tego jest wiele nieporozumień wśród początkujących programistów.
Mimo odrębności dwóch języków skrypty JavaScriptu oraz aplety Javy mogą się wzajemnie komunikować
dzięki dostępnej w przeglądarkach Netscape, Mozilla i Opera technologii LiveConnect.

JavaScript - przykłady:

Pierwszy program

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

Ukrywanie kodu przed prostymi przeglądarkami, które nie rozpoznają Java Script

<html>
<head>

<script type="text/javascript">

</script>

</head>
<body>
<noscript>
Twoja przeglądarka nie obsługuje JavaScriptu.
Aby zobaczyć stronę w pełnej funkcjonalności, zainstaluj inną przeglądarkę:
Internet Explorer, Netscape Navigator, Mozilla, Opera...
</noscript>

kod HTML strony

</body>
</html>

Wprowadzanie danych

Zmienna

<HTML>
<HEAD>

</HEAD>

<script language = "JavaScript">

</SCRIPT>

<BODY>

</BODY>
</HTML>

Wprowadzanie danych bez zmiennej

HTML>
<HEAD>

</HEAD>

<script language = "JavaScript">

</SCRIPT>

<BODY>

</BODY>
</HTML>

Równanie kwadratowe

<HTML>
<HEAD>
</HEAD>

<script language = "JavaScript">


</SCRIPT>

<BODY>
<p>Cwiczenia z Java Script</p>

</BODY>
</HTML>

// Obliczenie azymutu ze współrzędnych
<HTML>
<HEAD>
</HEAD>

<script language = "JavaScript">

</SCRIPT>

<BODY>
<p>Cwiczenia z Java Script</p>

</BODY>
</HTML>

// Obliczenie długosci i azymutu ze współrzednych - druga wersja

<HTML>
<HEAD>
</HEAD>

<BODY>

<H2>Cwiczenia z Java Script</H2>

<script language = "JavaScript">


</SCRIPT>

</BODY>
</HTML>

Osadzania JS na stronie HTML

The example below shows how to use JavaSript to write text on a web page:

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

Dodanie znaczników HTML tags do JavaScript:

<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>

Obsługa prostych przeglądarek

<html>
<body>
<script type="text/javascript">

</script>
</body>
</html>

Gdzie wstawic kod JS?

W nagłówku - skrypt ładowany na początku, przed właściwą treścią strony

html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>

W body - ciele funkcji - generuje zawartość strony

<html>
<head>
</head>

<body>
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>

</html>

Użycie w <head> i <body>

<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Użycie zewnętrznych plików JS

<html>
<head>
<script type="text/javascript" src="xxx.js"></script>
</head>
<body>
</body>
</html>

JavaScript is a sequence of statements to be executed by the browser.

JavaScript is Case Sensitive

Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions.
JavaScript Statements

A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser what to do.

This JavaScript statement tells the browser to write "Hello Dolly" to the web page:document.write("Hello Dolly");
It is normal to add a semicolon at the end of each executable statement. Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web.

The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. Because of this you will often see examples without the semicolon at the end.

Note: Using semicolons makes it possible to write multiple statements on one line.
JavaScript Code

JavaScript code (or just JavaScript) is a sequence of JavaScript statements.

Each statement is executed by the browser in the sequence they are written.

This example will write a heading and two paragraphs to a web page
Example
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

JavaScript Blocks

JavaScript statements can be grouped together in blocks.

Blocks start with a left curly bracket {, and ends with a right curly bracket }.

The purpose of a block is to make the sequence of statements execute together.

This example will write a heading and two paragraphs to a web page:Example
<script type="text/javascript">
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>

JavaScript Comments

Comments can be added to explain the JavaScript, or to make the code more readable.

Single line comments start with //.

The following example uses single line comments to explain the code:
Example
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

<script type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

Operatory

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

Warunki

if, else

script type="tex
t/javascript">
//Write a "Good morning" greeting if
//the time is less than 10

var d=new Date();
var time=d.getHours();

if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>

<script type="text/javascript">
//If the time is less than 10, you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.

var d = new Date();
var time = d.getHours();

if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}

</script>

case

<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>

Alert box

<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="show_alert()" value="Show alert box" />

</body>
</html>

Confirm box

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>

<input type="button" onclick="show_confirm()" value="Show confirm box" />

</body>
</html>

Prompt box

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Please enter your name","Harry Potter");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>

<input type="button" onclick="show_prompt()" value="Show prompt box" />

</body>
</html>

Funkcje

<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>

return w funkcji

<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(product(4,3));
</script>

</body>
</html>

Petla for

<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

while

<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>

do while

<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>

break

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
    {
    break;
    }
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

continue

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
    {
    continue;
    }
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

For...In

<html>
<body>

<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>

</body>
</html>