JS

JavaScript

postfix

источник: Современный учебник JavaScript

ключи: #js

Содержание >>

только важные выдержки

github: logo-designing

install

Навигация по странице:

const topMenu = document.getElementById("navbar__list");
const topMenuHeight = topMenu.offsetHeight + 1;
const menuItems = document.querySelectorAll(".menu-items");
const scrollItems = document.querySelectorAll(".sec");


// Bind to scroll
window.addEventListener("scroll", function() {
  // Get container scroll position
  const container = document.querySelector(".container");
  let fromTop = window.pageYOffset + topMenuHeight + 40;

  // Get id of current scroll item
  let cur = [];

  [...scrollItems].map(function(item) {
    if (item.offsetTop < fromTop) {
      cur.push(item);
    }
  });

  // Get the id of the current element
  cur = cur[cur.length - 1];
  let id = cur ? cur.id : "";

  if (lastId !== id) {
    lastId = id;

    menuItems.forEach(function(elem, index) {
      elem.classList.remove("active");
      const filteredItems = [...menuItems]
        .filter(elem => elem.getAttribute("href") === `#${id}`);
      filteredItems[0].classList.add("active");
    });
  }
});

Размеры и прокрутка элементов

Highlight my navbar menu items whenever I scroll through that section? Only using Javascript

Как передать данные в iframe?

Как передать данные в iframe?
MDN: Window: parent property

Родительское окно:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<body>
<iframe id="iframe" name="target" src="https://evgeniyvorobev.github.io/testpage/iframe.html" frameborder="no" scrolling="no" width="100%" ></iframe>
<div id="reciveIframe">а это инфа которую мы получили с iframe</div>

<script>
// отправка сообщения в iframe win.
window.onload = function(){
var win = document.getElementById("iframe").contentWindow; // объект iframe
win.postMessage("Сообщение отправлено с страницы "+location.href,"https://evgeniyvorobev.github.io/testpage/iframe.html"); // отправляем сообщение в iframe ( после запятой адресс iframe )

function listener(event) { // получение сообщения из iframe
    event.origin == '' 
    document.getElementById("reciveIframe").innerHTML = event.origin + " прислал: " + event.data;
}
if (window.addEventListener){
    window.addEventListener("message", listener,false);
 } else {
    window.attachEvent("onmessage", listener);
 }     
}
</script>
</body>
</html>

Дочерний iframe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<body>
<div id="test"></div>
<script type="text/javascript">
            function listener(event){
                document.getElementById("test").innerHTML = event.origin + " прислал: " + event.data;
                parent.postMessage('Вернули обратно произвольный текст Lorem ipsum dolor.','https://evgeniyvorobev.github.io/testpage/index.html')
            }
            if (window.addEventListener) {
                window.addEventListener("message", listener,false);
            } else { // ie 8
                window.attachEvent("onmessage", listener);
            }
        </script>
</body>
</html>

js fetch await

async function getData() {
  const url = "https://example.org/products.json";
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }

    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error(error.message);
  }
}

MDN: Using the Fetch API

form sumbit evnt

function add_edit_form_submit_event(){
    let fcl = 'form-edit';
    let form = document.getElementById(fcl);
    console.log('add_edit_form_submit_event');
    console.log('form', form);
    if(!form)return;
    form.addEventListener('submit', edit_form_submit_event.bind(form,form), true)
}


function edit_form_submit_event(form,ev){
    ev.preventDefault();
    console.log('edit_form_submit_event')
    return false;
}

fetch

How to submit serialized data to an API

Parsing HTML

const parser = new DOMParser();

const xmlString = "<warning>Beware of the missing closing tag";
const doc = parser.parseFromString(xmlString, "application/xml");
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
  // parsing failed
} else {
  // parsing succeeded
}

MDN: DOMParser: parseFromString() method

Get script line number

    /**
     * 
     * @returns [int] caller line number
     */
    function calLine(deep=0){
        let stack = new Error().stack
        // console.log(stack)
        errs = stack.split("\n")
        err = errs.shift()
        err = errs.shift()
        err = errs.shift()
        if(deep&&deep>0){
            for(let i=0;i<deep;i++){
                err = errs.shift()
            }
        }
        errs = err.split(':')
        // console.log(err)
        err = errs.pop()
        err = errs.pop()
        // console.log(err)
        err = parseInt(err,10);
        return err
    }

        let errnum = calLine( ) // return current line number
        console.log('err l', errnum)

Размеры и прокрутка

Размеры и прокрутка элементов: Метрики