Изучаем JavaScript

Видео #3. Изменение HTML с помощью JavaScript Ищем нужный элемент document.querySelector("css-selector"); Возвращает один элемент, если элементов несколько, возвращает первый Близкий по смыслу селектор document.querySelectorAll("css-selector"); Возвращает массив из всех найденных элементов. Для существующего на странице элемента document.querySelector("css-selector") == document.querySelectorAll("css-selector")[0] Для несуществующего элемента есть различие: document.querySelector("css-selector"); вернёт null document.querySelectorAll("css-selector"); вернёт отсутствующий элемент массива, т.е undefined Стилизуем элемент element.style.backgroundColor = "red"; Для сравнения: как записываются свойства в css и js css: background-color js: backgroundColor Для свойств, состоящих из одного слова, различий нет element.style.width = "500px"; element.style.border = "solid ...

Ну вот такие ещё курсы посмотрю. Что они пишут о себе: Самой большой проблемой всех учебников и статей, по которым начинают учиться начинающие программисты JavaScript, является отсутствие нормальной практики. Можно читать тонны материалов по веб-программированию на JavaScript и не научиться ничему, потому что знания, которые Вы не успели применить, очень быстро забываются. Многие на полпути буквально устают, им надоедает бесконечное блуждание по различным материалам, из которых трудно собрать общую картину. Собственно, это про меня. Я на полпути и мне надоела теория. А эти курсы обещают практику. Там 9 модулей, к каждому есть практическое задание. Пока посмотрела первое десятиминутное видео. Что не понравилось: - преподаватель начинает лекцию с того, что js ему не нравится. Причём это "не нравится" достаточно ярко выражено, потому что через пять минут он же заявляет, что приведение типов это "проклятие js". Ну вот как можно учить тому, что тебе не...

Демо: https://projectstictactoe1.github.io/ Код: https://github.com/projectstictactoe1/projectstictactoe1.github.io Данный пост продолжение предыдущего Задача новой версии проекта - улучшить код, улучшить функционал и избавиться от некоторых недостатков. Что планируется изменить: - проверку на выигрыш, сделать её код более компактным и логичным; - добавить проверку на ничью, которой не было в предыдущей версии; - запретить делать ход в уже заполненные ячейки; - запретить делать ход после выигрыша; - сделать кнопку сброса игрового поля и предложения сыграть ещё раз - возможно сделаю счётчик побед и поражений. хоть пока компьютер не играет сам в таком счётчике нет особого смысла Код можно посмотреть по ссылке на гитхаб. Эта небольшая, простая, даже примитивная игра заняла у меня неделю времени и показалась достаточно сложной. Ходы компьютера, пусть даже рандомные, не говоря уже об ии я запрограммировать не сумела. Немного успокаиваю себя фразой "Есть один момент, на...

Глобальные переменные и глобальные функции - свойства глобального объекта. В браузере это window. var a = 5; window.a; // 5 или так window.b = 12; b; // 12 Локальные переменные и локальные функции находятся внутри других функций. Выполнение js-кода I стадия: инициализация - ищет все функции, которые объявлены как function declaration и их код, то есть функции сразу создаются работающими; - ищет все переменные и функции, объявленные как function expression , но значений им не присваивает, то есть они undefined ; - значения переменным и функциям, которые function expression , присваивается тогда, когда выполнение кода доходит до них. II стадия - выполнение Переменные, созданные без объявления Такая переменная всегда глобальная, даже если создаётся внутри функции. Но в новом стандарте так делать нельзя: use strict a = 3;  // SyntaxError И такая переменная не инициализируется, то есть, пока до неё не дойдёт код, скрипт о её существовании не ...

Диалог на собеседовании: Напиши мне калькулятор. Простой калькулятор, когда на вход программе подается выражение, состоящее из 2 чисел, разделенные знаком '+', '-', '*', '/', которое нужно посчитать. У тебя полтора часа. Цитата отсюда https://habrahabr.ru/post/320830/ Попробовала проверить смогу ли решить такое задание. Смогла. За 20 минут. Без проблем, но с гуглом. Без гугла, конечно, было бы намного печальнее Результат: function calculator(str) {   var num1 = parseFloat(str);   var i = ~str.indexOf('+') || ~str.indexOf('-') || ~str.indexOf('*') || ~str.indexOf('/');   var sign = str[~i];   var num2 = parseFloat(str.substring(i + 1));   switch (sign) {     case '+':       return num1 + num2;       break;     case '-':       return num1 - num2;       break;     case '*':    ...

Первая ссылка в Google https://youtu.be/-YWO-YFW9Ag Результат: https://projectstictactoe.github.io/  Понравилась манера говорить, детальность рассказа, иногда даже чрезмерная, то, что выложил архив с исходниками Не понравилось: - названия переменных, например, "hod" - устаревший код, когда вместо var game = document.getElementById("game"); game.addEventListener("click", function(e) { ... } используют document.getElementById('game').onclick = function(e){ ... } - индусский код, например, проверка на выигрыш выглядит так:   function checkWinner() {         var allblocks = document.querySelectorAll(".block");         if(allblocks[0].innerHTML === "✖" && allblocks[1].innerHTML === "✖" && allblocks[2].innerHTML === "✖")             result.innerHTML = "Победили крестики";         if(allblo...

Инструкция от loftblog: https://youtu.be/VHGaBc9OcXU Описание: https://loftblog.ru/material/11-pervaya-programma-kalkulyator-na-javascript/ Результат: https://projectcalculator1.github.io/  Определяем, какие функции нам понадобятся: numberPress - отслеживать нажатие на клавиши с цифрами и получать число operationPress - получать значения операторов decimal - ввод десятичной точки clear - очистка - полная (клавиша С) и последнего действия (клавиша СЕ) Для поиска элементов используем методы: document.querySelectorAll(".class") - находит все элементы определённого класса, например, все кнопки с числами или все кнопки с операторами; document.getElementById("id") - находит уникальные элементы, имеющие свой id, который, как известно, на странице может быть только один. Например, знак "равно", десятичную точку, клавишу "С" и т.д e.srcElement.id - свойство для распознавания кнопки по её id e.target.textContent - свойство для пол...

   Html разметка: <!DOCTYPE html> <html lang="ru"> <head>     <meta charset="UTF-8">     <title>clock</title>     <link rel="stylesheet" href="style.css">     </head>     <body>         <div id="clock"></div>     </body> </html> Разметка стандартная. Единственный блок с  id="clock" И скрипт, подключающийся в шапке, потому что без него в этом блоке нет смысла JS код function clock() {             var date = new Date();             var hours = date.getHours();             var minutes = date.getMinutes();             var seconds = date.getSec...

Создали объект: var obj = {}; Можно и так: var obj = new Object(); но это долго и бессмысленно Создали свойство объекта: пару ключ - значение: obj.name = "John"; Здесь name - имя свойства, "John" - значение свойства Создали ещё одно свойство: obj.age = 22; Изменили свойство name , переписали его значение: obj.name = "Bill"; Удалили свойство name delete obj.name; Проверили, есть ли у объекта свойство с именем name "name" in obj; // false ...а со свойством age ? "age" in obj // true Проверить можно было и проще: obj.name // undefined obj.age // 22 Или так obj.name === undefined // true - свойства нет obj.age === undefined // false - свойство есть Работает для всех случаев, кроме тех, когда кто-то прямо не назначил свойству объекта значение undefined. Не надо так Ещё один способ доступа к значению свойства - квадратные скобки obj.name // "Bill"; obj["name"] // ...