LAB11 - nvbach91/4IZ268-2024-2025-ZS GitHub Wiki

Vývoj webových aplikací - JavaScript

Obsah

  • Procvičování OAuth - Facebook
  • Pluginy
    • Bootstrap
    • Chart.js
  • HTML5 Browser API

Procvičování OAuth

Bootstrap

<!-- Always use a CDN for external libraries! i.e. https://cdnjs.com/ -->
<!-- The usage of CDN will help reduce net traffic thanks to browser cache -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Chart.js - vizualizace dat

HTML 5 Browser API

  • globální objekt window - metody a členské proměnné přímo pod window se volají bez reference na window

Obecné funkce

alert()
confirm()
blur()
focus()
open()
close()
print()
getSelectionText()
prompt()
resizeTo()

Matematické funkce: objekt Math 

Math.random()
Math.ceil()
Math.floor()
Math.round()
Math.sqrt()
Math.pow()
Math.sin()
Math.cos()
Math.tan()

Vytvoření datumu a jeho metody

const now = new Date()
now.getFullYear()
now.getMonth() + 1
now.getDate()
now.toISOString()

Funkce pro časování

const timeoutId = setTimeout(() => {}, 1000)
clearTimeout(timeoutId)
const intervalId = setInterval(() => {}, 1000)
clearInterval(intervalId)

Ovládání historie prohlížeče

history.length                           // the total number of history entries
history.back()                           // go back once
history.back()                           // go back once
history.forward()                        // go forward once
history.go(5)                            // go forward 5 entries
history.go(-2)                           // go back 2 entries
history.pushState(null, null, 'contact') // add a new entry as if you have gone one page further, with no page refresh
history.replaceState()                   // replaces the current entry

Informace o aktuální adrese prohlížeče

location.hash
location.host
location.hostname
location.href
location.origin
location.pathname
location.port
location.protocol
location.search
location.assign()
location.reload()
location.replace()

Serviceworker

Více událostí https://developer.mozilla.org/en-US/docs/Web/Events

image

Nahrávání souborů

<input id="file-input" type="file">
const fileInput = $('#file-input');
const reader = new FileReader();
reader.onload = (e) => {
  const content = reader.result;
  console.log(content);
};

$('#load-button').click(() => {
  const file = fileInput.get(0).files[0];
  reader.readAsText(file, 'utf8');
  reader.readAsDataURL(file);
  reader.readAsBinaryString(file);
  reader.readAsArrayBuffer(file);
});

Geolokace

<script src="http://code.jquerygeo.com/jquery.geo-1.0.0-b3.min.js"></script>
if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    $('#map-container').geomap({
      center: [ longitude, latitude ],
      zoom: 15
    });
  }); //API key for geomap: AIzaSyDidOy47JccQLTF3r1j1ssfhEkZF3_ec24
}

Web storage

localStorage.setItem('myCat', 'Tom');
localStorage.getItem('myCat') === 'Tom';
localStorage.removeItem('myCat');
localStorage.clear();

// localStorage only supports string data
// save arrays or objects as JSON string to localStorage
// parse JSON string back to array or object when needed
const cats = ['Tom', 'Infinnity', 'Puss', 'Kitty'];
localStorage.setItem('cats', JSON.stringify(cats));
localStorage.getItem('cats'); // -> '["Tom", "Infinnity", "Puss", "Kitty"]'
const storedCats = JSON.parse(localStorage.getItem('cats'));

Ukládání do localStorage

  • do localStorage ukládáme data v podobě, s jakou budeme pracovat v kódu po extrakci z localStorage
  • neukládáme všechna data ale pouze klíčové informace jako identifikátor, popř. název, a další vlastní data, související data stahujeme znovu z API podle uložených informací
  • Příklad: nechť máme nějaké knižní záznamy a chceme je všechny uložit do localStorage
const booksData = [
  {
    "id": "0",
    "title": "Harry Potter and the Philosopher's stone"
  },
  {
    "id": "1",
    "title": "Harry Potter and the Chamber of Secrets"
  }
  ...
];
localStorage.setItem('bookIds', JSON.stringify(booksData.map((book) => book.id)));
localStorage.getItem('bookIds'); // ["1", "2"]
  • pokud budeme chtít mazat jednotlivé záznamy, tak je ukládáme nejlépe do objektu (ale ztratíme tím pořadí záznamů)
const books = {};
items.forEach((item) => {
  books[item.id] = item.title;
});
console.log(books); // { "1": "Harry Potter and the Philosopher's stone", "2": "Harry Potter and the Chamber of Secrets" }
localStorage.setItem('books', JSON.stringify(books));

delete books['1'];
console.log(books); // { "2": "Harry Potter and the Chamber of Secrets" }
localStorage.setItem('books', JSON.stringify(books));

delete books['2'];
console.log(books); // {}
localStorage.setItem('books', JSON.stringify(books));
  • pokud budeme chtít mazat jednotlivé záznamy a chceme zachovat pořadí záznamů, můžeme použít metodu .filter nad polem
const booksData = [
  {
    "id": "0",
    "title": "Harry Potter and the Philosopher's stone"
  },
  {
    "id": "1",
    "title": "Harry Potter and the Chamber of Secrets"
  }
];
console.log(booksData ); // [ { "id": "0" }, { "id": "1" } ];
const bookIdToRemove = '1';
const remainingBooksData = booksData.filter((book) => book.id !== bookIdToRemove);
console.log(remainingBooksData); // [ { "id": "0" } ];
⚠️ **GitHub.com Fallback** ⚠️