Web-fejlesztés 2.

Követelmények, JavaScript nyelvi elemek

Bucsánszki Tamás
demonstrátor
bucsi@inf.elte.hu

Visnovitz Márton, egyetemi tanársegéd

Előzmények, célok, motiváció

Célok

Megismerni…

  • egy új programozási nyelvet,
  • egy új programozási platformot,
  • a platform különféle programozási lehetőségeit,
  • ezek oktatásbeli alkalmazási lehetőségeit.

Félév felépítése

  • Ismerkedés a JavaScript programozási nyelvvel
  • Programozott grafika a böngészőben
  • Alkalmazások készítése a böngészőben
  • Kitekintés a szerveroldali programozás felé

Eddigi ismeretek

Alapvető programozási ismeretek:
Programozási alapismeretek

  • Vezérlési szerkezetek
  • Függvények, eljárások
  • Programozási tételek
  • Sorozat típus, rekord típus

Eddigi ismeretek

Statikus weblapok készítése:
Webfejlesztés

  • HTML 5 (dokumentumleíró nyelv)
  • CSS 3 (stílusleíró nyelv)
  • Alapvető HTTP ismeretek
  • CSS keretrendszerek (Bootstrap)

Eddigi ismeretek

Kliens-szerver architektúra:
HTTP protokoll

  • Web: kliens és kiszolgáló kommunikációja
  • HTTP: a kommunikáció protokollja
  • Kliens kérést intéz a szervernek
  • Szerver válaszol
  • A kliens feldolgozza a választ
Kliens-szerver

Motiváció

Követelmények

Információk, kommunikáció

https://github.com/bucsi/elteik

https://canvas.elte.hu

https://teams.microsoft.com

  • Előadások
  • Gyakorlatok (Teams, GitHub)
  • Beadandók (Canvas)
  • Eredmények (Canvas)

Általános információk

  • Óraszám: 1 előadás + 2 gyakorlat + 1 konzultáció
  • Előfeltétel: Webfejlesztés 1.
  • Számonkérés: folyamatos számonkérésű tárgy

Követelmények (általános)

  • Gyakorlatok kötelezők (max. 3 hiányzás)
  • Összesen 120 pont szerezhető a félév során

Követelmények

  • Beadandó: Komplex játék fejlesztése (60 pont)
  • Két ZH
    • Programozott rajzolás: 60 perc (30 pont)
    • Alkalmazásfejlesztés: 60 perc (30 pont)
  • Pluszpontok (max. 10 pont)
    • Házi feladatok
    • Kiadott anyagok fejlesztése
    • Órai munka

Ponthatárok

Minimum (%) Minimum (pont) Érdemjegy
40% 48 2
55% 66 3
70% 84 4
85% 102 5

Egy kis történelem

JavaScript története

  • 1991: világháló születése
  • 1993: első grafikus böngészők
  • 1994: Netscape Navigator böngésző
  • 1995. 04: Netscape
    • Brendan Eich: olyan programozási nyelv, amelyekkel interaktívvá tehetők weboldalak
  • 1995. 12: bejelentik a JavaScriptet

  • 1996-1999: I. böngészőháború ⚔️ (Netscape vs IE)
    • A kliensoldal megbízhatatlan
  • 1999-2004: Sötét középkor
    • Szerveroldali technológiák fejlődése
  • 2004-2017: II. böngészőháború ⚔️ (IE vs Firefox, Opera, …)
  • 2006-: JavaScript újrafelfedezése (AJAX, jQuery)
  • 2008: New kid on the block: Google Chrome
    • Versengés a JS sebességén: böngészőháború ⚔️
  • 2009-: parancssori JavaScript (Node.js)
  • 2017: Google Chrome 👑 (Chromium)
  • 2019-: III. böngészőháború ⚔️! (Chrome vs Edge)

Név és szabvány

  • Elnevezések:
    • LiveScript: eredeti név
    • JavaScript: marketing miatt a Java programozók átcsábítására (web Visual Basic-je)
  • Szabvány: ECMAScript
    • Európai Informatikai és Kommunikációs Rendszerek Szabványosítási Szövetsége (ECMA)
  • Microsoft
    • JScript

ECMAScript verziók

  • 1997: 1. verzió
  • 1999: 3. verzió
  • 2009: 5. verzió (ES5)
    • hibajavítások, apróbb fejlesztések
  • 2015: 6. verzió (ES6, ECMAScript 2015)
    • nagyobb fejlesztések, modern nyelvi tulajdonságok
  • 2016: 7. verzió (ES7, ECMAScript 2016)
  • 2017: 8. verzió (ES8, ECMAScript 2017)
  • …

Stages: 0, 1, 2, 3, 4 → szabvány

Fejlesztőeszközök

Szerkesztők, böngészők, dokumentáció

Böngésző + Code editor = 💙

Szerkesztők

  • Code editorok
    • Visual Studio Code
    • Notepad++
    • Sublime Text 3
    • Atom
  • Integrált fejlesztőkörnyezetek (IDE)
    • NetBeans IDE
    • Visual Studio
    • WebStorm

Tetszőleges modern kódszerkesztő használható

Böngészők

  • Microsoft Edge
  • Google Chrome
  • Opera
  • Mozilla Firefox
  • Safari

Tetszőleges modern kódszerkesztő használható

Dokumentáció

A JavaScript nyelv

Alapok

Mintaként szolgáló nyelvek

#include <iostream>

using namespace std; 

int main() { 
  //declaration 
  const int n=5; 
  double x[]={1,3,5,7,9}; 
  double s; 
  //process
  s=0; 
  for(int i=0; i<n; i++) { 
    s=s+x[i]; 
  } 
  //write output
  cout<<"Sum: "<<s<<endl; 
  return 0; 
}
C++ 





//declaration 

const x=[1,3,5,7,9];
let s;
//process 
s=0;
for(let i=0; i<x.length; i++) {
    s=s+x[i];
}
//write output 
console.log('Sum: ', s);
JavaScript

C++

  • Erősen típusos
  • Statikusan típusos
  • Fordított
  • Általános célú

JavaScript

  • Gyengén típusos
  • Dinamikusan típusos 🎓
  • Interpretált 🎓
  • Szkriptnyelv

Gyengén, dinamikusan típusos

  • A változók típusa a benne tárolt érték típusától függ
  • Vagy másképp: a típusok az értékekhez tartoznak, nem a változókhoz.
  • Automatikus típuskonverziók (lehetőleg kerüljük)

Interpretált

  • Értelmező értelmezi a JavaScript kódot sorról sorra
  • Nincs fordítási fázis, nem a lefordított kód fut 🎓
  • Minimális előfeldolgozás történik
  • A kód a hibáig lefut, ott elakad

További jellemzők

  • Kis és nagybetűk különböznek (case sensitive)
  • Nincs főprogram (main) 🎓
  • Nincs input/output (csak API-kon keresztül) 😭
  • Nincs fájlkezelés (csak API-kon keresztül) 😭
  • Imperatív 🎓
  • Funkcionális 🎓
  • Objektumorientált 🎓
  • Prototípusos 🎓
  • Automatikus pontosvessző beszúrás ❗

Típusok

Primitív értékek

null
undefined

Egyszerű típusok

Logikai Boolean
Szám Number
Szöveg String

Összetett típusok

Objektum Object
Tömb Array
Függvény Function

Objektum

  • Kulcs-érték párok gyűjteménye
  • Asszociatív tömbhöz hasonlít (hash)
  • Rekord, osztálypéldány szimulálható
  • Majdnem minden objektum
  • Ha az érték függvény → metódus

Tömb

  • Értékek rendezett sorozata
  • Tetszőleges típusú elemekből
  • Lekérdezhető a hossza
  • Vektor, verem, sor, lista szimulálható
  • Igazából egy speciális objektum

Függvény

  • First-class típus JavaScriptben
  • Futtatható kódot tartalmaz
  • Változóban eltárolható
  • Paraméterként átadható
  • Igazából egy speciális objektum

Osztályok

  • Igazából nincs a nyelvben
  • De azért lehet használni… 🤷‍♂️

Programozási stílusok (paradigmák)

  • Imperatív
  • Objektum-orientált
  • Funkcionális
  • Eseményvezérelt

Összefoglalás

  • C++ → JavaScript
  • Interpretált szkriptnyelv
  • Gyengén, dinamikusan típusos
  • Adatszerkezetek
    • egyszerű: logikai, szám, szöveg
    • összetett: tömb, objektum, függvény
  • A többit majd a gyakorlaton…