Изучение javascript
Всем привет!
Я часто сталкиваюсь в работе с js, могу решить задачи различной сложности => найти код и отредактировать под свои нужды. Хотя, на данном этапе, это времязатратный процесс, поскольку нет полноценного понимания языка. Поэтому я решил начать изучать js основательно, так сказать, научиться программировать самому, а не говнокодить), с применением современных стандартов. С теорией у меня туго, поэтому предпочитаю изучать в ходе работы, на практике, по необходимости заглядывая в доки. Сделал небольшую подборку простеньких скриптов, возможно они кому-нибудь тоже пригодятся. http://jsfiddle.net/madeas/07vqk1ms/12/ В скрипте уже заменил все var на const и подвел скрипты к более современному виду. Возможно, кто-то подскажет, как можно сделать еще лучше... Придумывать задачи из головы не получается, поскольку не совсем понимаю куда двигаться. Можете накидать несколько интересных, но не слишком сложных задач, отталкиваясь от примера выше, для повышения уровня работы с js, но так, чтобы не перескакивать через этапы и не пропустить важные вещи? Или посоветуйте канал/видео уроки, с качественным содержанием. Искал в сети видео, но почти везде пишут, что авторы не правильно рассказывают, начинают не с того или говорят совсем не то, перескакивая через "шаги". Грубо говоря, ищу наставника и друга, который поможет в изучении языка). В дальнейшем планирую работу с node.js, gulp и angular. Буду рад совместной работе, в ходе обучения, над каким-нибудь проектом. |
Цитата:
// 1 задаем стили рабочей области через js
document.querySelector('.container').style = 'display:flex; flex-direction: column;align-items: center;border: 1px dotted lightgray;padding:25px';
сделайте тоже самое, но используя метод обьекта. |
У вас в коде для выборки DOM-элементов используется как jq, так и нативный js. Если используете jq, то используйте его по максимуму.
Также в коде часто из dom дергаются одни и те же элементы, не лучше ли сохранить на них ссылку? Ниже что-то нелепое. В первой строке вы уже изменили контент блока, во второй вы снова достаете из dom этот же блок и снова изменяете его контент на тот, что у него уже установлен.
const cont = document.getElementById('cont').innerHTML = 'Please wait...';
document.getElementById('cont').innerHTML = cont;
|
рони,
Что-то сложновато) Сделал иначе, но это явно не оно... Пока не совсем понял принцип работы с объектами. Пример из учебника:
var user = {
name: 'Василий'
};
user.sayHi = function() {
alert('Привет!');
};
user.sayHi();
Мы создаем переменную, в ней задаем объект, затем обращаемся к этой переменной, чтобы создать функцию и затем присваиваем метод, который выводим в конце. Вроде бы, ничего не упустил. Вопросы: 1. Какой смысл этого обращения, если в алерте все равно только "привет"? 2. Наверное глупый вопрос. Если я пишу console.log - я знаю, что она выводится в консоль, с alert тоже все ясно. Куда выводится этот метод? Или как он работает... |
Цитата:
Цитата:
Цитата:
И еще, подскажите. При создании всплывающего окна, хотел сделать несколько вариантов ответа, например: hello == 'нет' || 'Нет' || 'ytn' и для других тоже, но когда прописываю несколько, работа окна сбивается. |
Цитата:
Цитата:
hello=hello.toString().toLowerCase().trim();
if(['нет','ytn','no','etc.'].indexOf(hello)>=0)
alert('Выбран один из вариантов ответа');
|
рони,
Цитата:
|
Nexus,
переделал под js все что было на jq, а вот на счет сохранения ссылок и нескольких вариантов для ответа нет. Подскажите, где об этом можно почитать. Dilettante_Pro, лучше на js конечно, не хочется лишний раз прибегать к jq |
Цитата:
Чтобы каждый раз не искать элементы в дереве их можно сохранить в переменную и работать с ней. По поводу нескольких вариантов ответа см. комментарий №6. |
Цитата:
|
Цитата:
Цитата:
UPD: Подправил. ошибка была в переменных. Заменил вторую Hello на ho. |
madeas, метод "toLowerCase" приводит строки к нижнему регистру, поэтому нет смысла задавать варианты ответа с заглавной первой буквой, она никогда не будет выбрана.
Задавайте варианты ответа в нижнем регистре. |
Nexus,
кстати да, спасибо. работу метода посмотрел, а сообразить не сообразил)) Может еще подкинете какую-нибудь задачку? |
Цитата:
https://developer.mozilla.org/en-US/...yleDeclaration |
Nexus,
точно. ушел читать |
madeas,
Dilettante_Pro, Nexus, уточню, изменить стиль элемента, надо, используя метод Object |
рони,
так?
<div class="container">Hello JavaScript</div>
<script>
// способ записи (представление объектов) #1
var contGlobStl = {} // создаем пустой объект
contGlobStl.style = 'display: flex;\nflex-direction: row;\njustify-content:center;\nwidth: auto;\nheight:55vh;\nalign-items: center;\npadding: 25px;\nbackground: black;\ncolor: white' // добавили свойство объекту
// способ записи #2
var contGlobStl = { // создаем объект
style: 'display: flex;\nflex-direction: row;\njustify-content:center;\nwidth: auto;\nheight:55vh;\nalign-items: center;\npadding: 25px;\nbackground: black;\ncolor: white' // добавили свойство объекту
};
// выводим свойство(а) объекта в консоль
console.log(contGlobStl.style);
// выполняем проверку наличия свойств(а) в alert (не обязательно)
if ('style' in contGlobStl) {
alert('Свойство' + ' ' + 'найдено'); // если найдено
} else {
alert('Свойство не существует'); // если не найдено
}
var contGlob = document.querySelector('.container');
contGlob.style = contGlobStl.style;
</script>
Тогда в моем примере это будет выглядеть вот так. Строка 8+ Конечно, мог что-то упустить, но вроде все на месте. Если я правильно понял, можно было еще разбить стили на отдельные свойства, но мне кажется, так будет хуже. |
madeas,
три строки максимум, и никаких style = |
madeas, вряд ли. У вас не используются методы объекта Object.
|
Цитата:
|
Цитата:
результат должен быть такой <div class="container" style="display: flex; flex-direction: column; align-items: center; border: 1px dotted lightgray; padding: 25px;">123</div> тоже самое что
document.querySelector('.container').style = 'display:flex; flex-direction: column;align-items: center;border: 1px dotted lightgray;padding:25px';
|
???????????????
<div class="container">Hello JavaScript</div>
<script>
var obj = document.querySelector('.container').style;
Object.defineProperties(obj, {
background: {
value: 'black',
},
color: {
value: 'white',
}
});
</script>
|
Цитата:
<div id="div"></div>
<script>
Object.assign(div.style,{
minHeight:'300px',
background:'#DDD'
});
</script>
|
Nexus,
да:victory: |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v1/polyfill.js?Object.assign"></script>
</head>
<body>
<div class="container" >123</div>
<script>
var oldStyle = document.querySelector('.container').style,
newStyle = {display:'flex', 'flex-direction': 'column','align-items': 'center', border: '1px dotted lightgray',padding:'25px'};
Object.assign(oldStyle,newStyle)
</script>
</body>
</html>
|
Dilettante_Pro,
ок! :) |
я был близок, вроде бы))
|
рони,
Труднее всего было догадаться о сути вопроса, т.к., например $('#circle').css({ - тоже метод объекта... |
madeas,
менять стиль лучше либо по одному style.display = 'flex' или $.css или Object.assign иначе легко можно стереть какие-то значения в style, используя style = |
рони,
понял. Еще почитаю, потренируюсь. Спасибо за не простую, но интересную задачу) |
Ребята, посмотрите код. Может есть замечания какие или новые задачи.
|
madeas, в строке 68 используется необъявленная переменная.
prompt помимо string может возвращать и null, проверка полученных данных отсутствует. У null нет метода toString, поэтому скрипт падает в 68 строке. |
Цитата:
|
Nexus,
спасибо, поправил Dilettante_Pro, что-то не могу понять как и куда прописать в условные операторы функцию нажатия новых кнопок... Пример строка 77. И вообще возможна ли такая запись?) Результат пока вывел в алерт для наглядности |
madeas,
Назначение и удаление обработчиков событий И еще: не надо так писать:
let
btn1 = document.getElementById('btn1'),
btn1Stl = document.getElementById('btn1').style,
Зачем вы дважды ищете одно и то же? Нужно
let
btn1 = document.getElementById('btn1'),
btn1Stl = btn1.style,
|
Dilettante_Pro,
действительно, не додумался. Подправил и структурировал код А подскажите, можно ли записать эти четыре строки в одну? В доках не нашел информацию про это. Object.assign(globStl, globStyle); Object.assign(resStl, resStyle); Object.assign(btn1Stl, btn1Style); Object.assign(textStl, textStyle); |
madeas,
Вообще-то удобнее не задавать элементам непосредственно стили, а написать в css нужные классы, и подключать/переключать их по необходимости. |
Dilettante_Pro,
знаю, просто в целях "набивания рук" решил попробовать обойтись без написания в css, поскольку с ним у меня проблем нет. Вдруг решу когда-нибудь написать сайт на чистом js + html и закину во внешний скрипт)) Хотя, это, наверное, извращение) |
| Часовой пояс GMT +3, время: 20:03. |