Laboratorium 11: javascript

JavaScript i jQuery

Podstawowe cechy

  • Język programowania stosowany do opisywania dynamicznych elementów stron WWW.
  • Interpretowany
  • Obiektowy (prototypy)
  • Skryptowy
  • Funkcje są „obywatelami pierwszej klasy”
  • Dynamiczny
  • Słabo typowany

Hello World

  1. Otwórz jakąś przeglądarkę
  2. Wpisz w pasku adresu:
    javascript:alert(”Hello, World!”);

Hello World w pliku

  • Sposób 1:
    <script type="text/javascript" src="hello.js"></script>
  • W hello.js:
    alert(”Hello, World!”);
  • Sposób 2:
    <script type="text/javascript">
 alert(”Hello, World!”);
</script>

Zmienne

  • Słabe typowanie
  • Deklarujemy następująco:
    var foo;
  • Można zainicjalizować:
    var foo = ”bar”;
  • Przypisania:
    foo = 8;

Prymitywy

  • Boolean
    var foo = true;
var bar = false;
  • Numeric
    var dwa = 2;
var trzyipol = 3.5;
  • String
    var s = ”String”;

Tablice

  • Tworzenie:
    var fib = new Array(0, 1, 1, 2, 3);
var fib = [0, 1, 1, 2, 3];
  • Można mieszać typy:
    fib[1] = ”jeden”;

Operatory

  • Takie same, jak w Javie.
  • ===, !== - identyczność, bądź jej brak
  • typeof x – string opisujący typ x
  • o instanceof c - sprawdza, czy obiekt o został stworzony przez konstruktor c
  • delete x – usuwa obiekt
  • new cl – nowy obiekt typu cl. cl musi być konstruktorem

Funkcje

  • W pliku hello.js:
     function helloWorld() {
   alert("Hello, World!");
 }
  • W pasku adresu:
       javascript:helloWorld();

Ulubiony przykład

function fib(n) {
  if (n == 0) {
    return 0;
  } else if (n == 1) {
    return 1;
  } else {
    return fib(n-1) + fib(n-2);
  }
}

Lambda abstrakcja

var twice = function(n) {
  return 2 * n;
}

Obiekty

  • Są tworzone za pomocą konstruktorów:
    function Osoba(imie) {
  this.imie = imie;
}
 
var Jan = new Osoba(”Jan”);
  • Ich pola są domyślnie inicjalizowane przez wartości określone w prototypach
    Osoba.prototype.nazwisko = ”Kowalski”;
 
Jan = new Osoba(”Jan”);
 
//teraz Jan.nazwisko == ”Kowalski”
  • Można to wykorzystać do dziedziczenia.
  • Inna notacja pozwalająca tworzyć obiekty – literały obiektów:
    Jan = { 'imię': 'Jan', 'nazwisko': 'Kowalski' }

Obsługa zdarzeń (Event handling)

  • Specjalne atrybuty zaczynające się na on:
    var helloWorld = function(evt) {
  alert("Hello, World!");
}
 
document.onclick = helloWorld;
  • Bardzo użyteczny jest window.onload, który jest wywoływany po załadowaniu dokumentu.

DHTML

  • Dynamic HTML
  • Drzewo DOM (Dynamic Object Model) – umożliwia dowolną modyfikację całego dokumentu HTML.

Znajdowanie elementów

  • Służą do tego metody obiektu document:
    document.getElementById(”id”);
document.getElementsByTagname(”p”);

Dodawanie elementów

  • Do tworzenia elementów służy metoda obiektu document:
    var div = document.createElement(”div”);
div.id = ”someDiv”;
div.class = ”someClass”;
  • Można teraz dodać nowy element do dokumentu:
    document.documentElement.appendChild(div);

Modyfikacja elementów

  • Można zmieniać atrybuty HTML za pomocą atrybutów javascriptowych obiektów:
    document.getElementById(”someDiv”).class = ”otherClass”;
  • Atrybut style modyfikuje styl css
    document.getElementById('someDiv').style.color = 'red';

Usuwanie elementów

  • Metoda removeChild obiektu dokument:
    div = document.getElementById(”someDiv”);
document.removeChild(div);

jQuery

  • Biblioteka JavaScript, która wszystko ułatwia.
  • Przenośność między przeglądarkami.
  • Łatwa nawigacja po drzewie DOM.
  • Łatwa obsługa eventów.
  • Łatwa dynamiczna zmiana stylów CSS.
  • Łatwy AJAX
  • Efekty i animacje.
  • Narzędzia ułatwiające pracę.
  • Dużo pluginów.

Pierwszy przykład

  1. Dodaj między <body></body>:
    <a href="http://jquery.com/">jQuery</a>
  2. Dodaj między <script></script>:
    $(document).ready(function() {
  $(”a”).click(function(event) {
   alert(”Hello, jQuery!”);
   event.preventDefault();
  });
});

jQuery i DOM

  • Selektory umożliwiają łatwe wybieranie elementów z drzewa DOM:
    $(".someClass").css("border", "red");
$("#someId").html(”Modified with jQuery”);
  • Różne rodzaje selektorów:
    $(”#someId > p”) - wszystkie elementy typu p, które są dziećmi elementu o Id someId
$("p[@class]") – wszystkie elementy typu p z atrybutem class 
$("p.foo[a]") – wszystkie elementy typu p, klasy foo, które zawierają element typu a.

jQuery i eventy

$(”p.shy”).click(function() {
  $(this).hide(”slow”);
});
  • Wszystkie paragrafy klasy shy schowają się po kliknięciu.

jQuery i AJAX

JavaScript

Czym jest JavaScript

  • Językiem stworzonym przez Netscape w 1995 roku
  • Interpretowanym językiem skryptowym działającym po stronie klienta
  • i obiektowym
  • i wspierającym programowanie funkcyjne (domknięcia i funkcje wyższego rzędu)

Do czego można stosować JS

  • Dynamiczne zmienianie wyglądu i zawartości strony w odpowiedzi na akcje użytkownika
  • Kontrolowanie ramek, apletów i pluginów
  • Otwieranie nowych okien, pobieranie informacji o przeglądarce, tworzenie plików cookies
  • Przetwarzanie żądań przed ich wysłaniem do serwera WWW

Do czego nie można stosować JS

  • Uruchamiania zewnętrznych aplikacji
  • Odczytywania i zapisywania plików na dysku użytkownika
  • Wysyłania sekretnych e-maili ze strony
  • Zmiany parametrów przeglądarki, przycisków nawigacyjnych

Elementy z których składa się JS

  • Jądro(EMAScript) - definiuje składnie, typy, wyrażenia...
  • DOM - programistyczny interfejs do obsługi html i xml
  • BOM - programistyczny interfejs do obsługi przeglądarki

Składnia

  • Wszystko jest case-sensitive
  • Zmienne są słabo typowaIne
  • Nie trzeba stawiać średników na końcu linii
  • Komentarze jak w Javie (/* */ i //)
  • Bloki kodu są zawarte w { }

Zmienne

  • Definiowanie za pomocą słowa kluczowego var
  • Można im zmieniać typy
  • Nazwy zaczynają się od litery, $ albo_

Instrukcje

  • if then else, switch, for ..., while..., do cos while... jak w C++
  • for (zmienna in object) cos

Przykład 1

<head>
<script type="text/javascript">
function notEmpty() {
  var myTextField = document.getElementById('myText');
  if(myTextField.value != " ")
    alert("You entered: "+ myTextField.value)
  else
    alert("Would you please enter some text?")
} </script>
</head>
<body>
<script type="text/javascript">
document.write("Wpisz tekst:");
</script>
<input type='text' id='myText' /> <input type='button'
onclick='notEmpty()' value='Form Checker' /> </body>

Przykład 2 - suma

function sum(numbers) {
  var total = 0
  forEach(numbers, function (number) {
    total += number
  })
  return total
}
alert(sum([1, 10, 100]));

Klasa Object

Właściwości:

  • constructor - referencja do funkcji która stworzyła obiekt
  • prototype - referencja do prototypu obiektu

Metody:

  • hasOwnProperty(property) - czy obiekt ma własność
  • isPrototypeOf(object) - czy jest prototypem
  • toString() - konwersja na String
  • propertylsEnumerable(property) czy właściwości można użyć w for

Przykład 3 - Obiekt

var cat = {colour: "grey", name: "Spot", size: 46};
cat.speak = function(line) {
 print("The cat says '", line, " " ');
}
cat.size = 
yellow";
alert(cat.size);
delete cat.size;
alert(cat.size);
alert(cat.speak("Cześć"));
alert(cat);

Przykład 4 - Obiekt

function Rabbit(adjecitve) {
  this.adjective = adjective;
  this.speak = function(line) {
    print("The ", this.adjective, " rabbit says '", line, " " ');
  };
}
var = new Rabbit("krolik");
function makeRabbit(adjective) {
  return {
    adjective: adjective,
    speak: function(line) { tresc funkcji }
  };
}
var blackRabbit = makeRabbit("black");

Klasa Array

  • var a = new Array(100), b = new Array(), c = new Array("a", "b", "c")
  • a.length - długość tablicy
  • sort() - sortuje toString
  • slice(), concat(), reverse()
  • push() i pop() robia z tablicy stos

inne klasy

  • Function
  • Date
  • Global
  • Math
  • RegExp

Przykład 5

function negate(func) {
  return function(x) {
    return !func(x)
  };
}
var isOdd = negate(isEven);

Czym jest jQuery

  • Cross-browserowa biblioteka JavaScript napisana aby ułatwiać pisanie własnych skryptów
  • Składnia zaprojektowana jest aby łatwo posługiwać się DOM, tworzyć animacje, obsługiwać zdarzenia
  • Duże wsparcie dla AJAX 
    • <script type="text/javascript" source="jquery.js"/>

Przykłady

$("#someId").html("<b>So Bold!</b>");
$(document).ready(function() {
 $("a").click(function(event) {
  alert("Thanks for visiting');
 });
}
$(document).ready(function() {
 $("#orderedlist li:last").hover(function() {
  $(this).addClass("green");
 },function(){
 $(this).removeClass("blue");
 });
});
$.ajax({
 type: "POST",
 url: "some.php",
 data: "name=John&location=Boston",
 success: function(msg){
  alert( "Data Saved: " + msg );
 }
});
$.post("test.php", { name: "John", time: "2pm" },
 function(data){
  alert("Data Loaded: " + data);
});
$.get("test.php", { name: "John", time: "2pm" },
 function(data){
  alert("Data Loaded: " + data);
});

Dostęp do baz danych ORACLE za pomocą PHP

Moduły OCI8 i ORA

  • Do dyspozycji mamy dwa moduły:
  • - Oracle Call-Interface functions (OCI8)
  • - Oracle 7 functions (ORA)
  • OCI8 – zoptymalizowany, duże możliwości, na nim się skupimy
  • ORA – przestarzały, nowsze wersje PHP go nie zawierają – nie używać.

Połączenie z Bazą danych

  • oci_connect(”login”, ”hasło”, ”baza”)
  • - zwraca identyfikator połączenia lub false w przypadku niepowodzenia
  • oci_new_connect
  • - jeśli chcemy kolejnego połączenia z tą samą bazą(dostaniemy nowy identyfikator)
  • oci_close(połączenie)

Obsługa błędów

  • oci_error()
  • - zwraca tablicę opisującą błąd lub false, jeśli żadnego nie zarejestrowano.
  • Pola w tablicy:
  • - code
  • - message
  • - offset
  • - sqltext

Zapytania PL/SQL:

  • oci_parse(połączenie, polecenie sql/plsql)
  • - zwraca id deklaracji lub false w przypadku błędu
  • - nie sprawdza poprawności zapytania
  • - SQL – nie stawiamy średnika na końcu polecenia
  • - PL/SQL – stawiamy średnik
  • oci_free_statement(deklaracja)
  • - zwalnia zasoby

Dostęp do zmiennych:

  • oci_bind_by_name(deklaracja, ”:nazwa”, zmiennaPHP)
  • - zwraca true/false
  • - wygodne i bezpieczne
  • oci_bind_by_name($s, ":bind1", $var1);

Wykonywanie deklaracji:

  • oci_execute(deklaracja, opcja)
  • - zwraca true/false
  • Opcje:
  • - OCI_COMMIT_ON_SUCCES
  • - OCI_NO_AUTO_COMMIT

Zatwierdzanie zmian:

  • Jeśli zamkniemy połączenie to przywracana jest wersja bazy sprzed wprowadzenia zmian
  • oci_commit(połączenie)
  • - zwraca true/false
  • oci_rollback(połączenie)
  • - cofa niezatwierdzone zmiany

Przetwarzanie wyników:

  • oci_fetch(deklaracja)
  • - przechwytuje następny wiersz
  • - zwraca true dopóki jest jeszcze coś do przeczytania
  • oci_result(deklaracja, pole)
  • - zwraca wartość pola w aktualnej linii

Przetwarzanie wyników:

  • oci_fetch_all(deklaracja, zmienna_php, ile_pomijamy, ile_czytamy, flagi)
  • - zwraca ilość wierszy lub false w przypadku niepowodzenia
  • Flagi:
  • - OCI_FETCHSTATEMENT_BY_ROW
  • - OCI_FETCHSTATEMENT_BY_COLUMN
  • - OCI_NUM
  • - OCI_ASSOC

Przykładowe użycie:

  • Całość na:
    https://students.mimuw.edu.pl/~rb291513/bd/przyklad
  • Połączenie z bazą danych:
    $c = oci_connect("rb291513", "XXXXXX");
if($c){
  echo "Jest polaczenie.<br><br>";
}else{
  $err = oci_error();
  echo "Oracle Connect Error " . $err['text'];
  exit(0);
}

Przykładowe użycie

  • Wypisywanie zawartości:
    • $r = oci_parse($c, "SELECT * FROM wypozyczenia");
oci_execute($r);
$rowCount = oci_fetch_all($r, $all, null, null, OCI_FETCHSTATEMENT_BY_ROW + OCI_ASSOC);
echo "Zawartosc tabeli WYPOZYCZENIA: <br>";
echo "<pre>".print_r($all, true)."</pre>";

    Przykładowe użycie:

    • Powiązanie zmiennych:
    $var2 = "Scott";
$tab = array(2,8,19,32);
$s = oci_parse($c, "insert into tab1 values (:bind1, :bind2)");
oci_bind_by_name($s, ":bind1", $var1, 20);
oci_bind_by_name($s, ":bind2", $var2);
foreach($tab as $var1){
  oci_execute($s);
}

    Przykładowe użycie:

    • Przetwarzanie wierszy jeden po drugim:
      • $s = oci_parse($c, "select * from tab1");
oci_execute($s);
while(oci_fetch($s)){
  echo "COL1 = " . oci_result($s, "COL1") .
    ", COL2 = " . oci_result($s, "COL2") . "<br>";
}

      Przykładowe użycie:

      • PL/SQL:
        • $s = oci_parse($c, "create or replace procedure powieksz(p1 in number, p2 out number) as
                    begin p2 := p1 + 1; end;");
oci_execute($s);
$p1 = 233;
$s = oci_parse($c, "begin powieksz(:x1, :x2); end;");
oci_bind_by_name($s, ":x1", $p1);
oci_bind_by_name($s, ":x2", $p2, 40);
oci_execute($s);
echo $p1 . " + 1 = " . $p2; // 233 + 1 = 234

        Dodatki:

        Przydatne linki

      • Firebug -- przydatne rozszerzenie do przegladarki
      • szablony stron: csszengarden.com freecsstemplates.org