2. előadás - Javascript

Objektum

• különböző dolgokat foglalunk egységbe

const books ={
    {title: "Anna Karenina", year: 1877},
    {title: "Harry Potter", year: 1997}
}

Class, adattagok, példányosítás, metódusok léteznek javascriptben

Függvények

• filter
  • kiválogatás: books.filter(book => book.year >= 1900 && book.year < 2000)

Program

Hello Program

Megoldás lépései:

• event
• beolvasás
• feldolgozás
• kiírás

function greet(name){
    return `Hello ${name}!`
}

Interaktív programok

A javascript a html-t fogja programozni

$$ \begin{array}{} \boxed{\text{HTML}} \ \downarrow \ \boxed{\text{DOM}} & \leftrightarrow & \boxed{\text{UI}}

\end{array} $$

Dokumentum Objektum Modell (DOM)

Az objektumfa gyökere a document

A DOM a html-t képzi le, egy szöveges szabványhoz ad egy object szabványt

Elem kiválaszáts

• querySelector: selector mint css-ben
  • querySelectorAll: az összes helyes elemet kiválasztja és tömben visszaadja
• $0 a kiválaszott elemre hivatkozik

operátor: `` "backtick" sablon szöveg

const callsing = "Red 5"
const html3 = `${callsign} standing by.`

const callsings = {"Red 5", "Red 10", "Red 7" }
const html4 = `<p> All wings, report in.</p>
<ul>
${callssings.map(callsign => `
    <li>${callsign}, standing by. </li>
`).join("")
}
</ul>
`

Trinary operátor

bool value ? Statement : Statement
like everywhere else duh

Style

Kötöjelek elhagyása, átírás camelCase-re
pl:

• getComputedStyle()
• classList
• $ \text{document.styleSheet} \to \text{tömb(StyleSheet)} $