Вопросы по css и javascript


Содержание

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
Страница 1 из 2 1 2 >

Как сделать чтобы green_line был виден только по наведении на li

Так не получается

imedia, может пора уже книжки начать читать? Карма уже -86.

22 самых распространенных вопроса на собеседованиях на должность веб-разработчика

Качественная подготовка — один из ключевых элементов, необходимых для успешного прохождения собеседования, которым, к слову, часто пренебрегают.

Несмотря на то, что данная статья не претендует на объективность, она включает в себя все основные вопросы, которые могут быть заданы по теме PHP, JS, JQuery, CSS, HTML, MySQL и ООП, а также развернутые ответы на них.

Изучив эти темы, вы заметно улучшите свою теоретическую базу и значительно увеличите свои шансы на получение заветной работы.

— Сколько типов данных в РНР?

PHP поддерживает 8 базовых типов данных.

4 скалярных типа:

— boolean. Логический тип данных, переменные данного типа могут принимать значения true или false.

21 ноября в 19:00, Москва, беcплатно

— integer. Целочисленный тип данных, переменные могут принимать целые значения (…-2, -1, 0, 1, 2…) в диапазоне от -2^31 до +2^31. Если значение превышает данный порог — оно автоматически переводится в тип float.

— float. Числовой тип данных с плавающей точкой, может содержать как целые, так и дробные величины.

— string. Строковый тип данных. Содержит нефиксированное количество различных символов. PHP не накладывает никаких ограничений на длину строки, поэтому можно смело работать даже с ОЧЕНЬ большими строками.

2 комплексных (составных) типа:

— array. Массив, содержит упорядоченный список элементов.

— object. Объект, содержит некий объект (экземпляр класса).

2 специальных типа:

— resource. Ссылка на абстрактный элемент, т.н. внешний ресурс. Примеры внешних ресурсов — ссылка на файл и ссылка на результат выполнения запроса.

— NULL. Пустой тип данных, обозначающий отсутствие какого-либо значения. О таких значениях обычно говорят «не определено». Пустым значением можно инициализировать переменные любого другого типа.

— Что такое static функция и чем она отличается от «обычной» (не static)?

Static принадлежит классу, а не экземпляру класса. И вызывается у класса, а не у объекта, т.е. напрямую. Объявление свойств и методов класса статическими позволяет обращаться к ним без создания экземпляра класса. Атрибут класса, объявленный статическим, не может быть доступен посредством экземпляра класса (но статический метод может быть вызван). Так как статические методы вызываются без создания экземпляра класса, то псевдопеременная $this недоступна внутри метода, объявленного статическим. Доступ к статическим свойствам класса не может быть получен через оператор -> .


— Есть ли разница между одинарными и двойными кавычками в PHP?

В двойных кавычках данные «парсятся», а в одинарных – нет. При двойных кавычках в данном случае выведется Chimay , а при одинарных — $beer .

— Написать программу, которая выводит простые числа, т.е. делящиеся без остатка только на себя и на 1.

— Напиши программу-цензор, которая бы заменяла вводимые пользователем в форму слова «fuck», «idiot» и «bitch» на «f**k», «id**t» и «bi**h».

— Что такое динамические переменные?

Динамической переменной считается та, имя которой хранится в самой переменной. Это так называемая «переменная переменная». Например:

$$var — динамическая, ее имя может меняться вместе с изменением $var . Также можно связать имя переменной с содержимым другой переменной неявно:

— Что такое шаблоны (паттерны) проектирования?

Паттерн проектирования — это общее типовое решение некоторой проблемы, многократно повторяемое в процессе проектирования архитектуры программного продукта. Они показывают отношения и взаимодействия между классами, позволяют сделать систему гибкой и легко изменяемой. За счет их правильного использования повышается коэффициент использования готовых решений.

— Напиши пример реализации полиморфизма.

— Какие еще есть парадигмы (модели, подходы) программирования кроме ООП?

Из тех, что наиболее часто встречаются: функциональная, аспектно-ориентированная и процeдурная.

— Нужно алертом вывести какое-то сообщение, спустя 3 секунды после запуска скрипта. Как это сделать?

— Расскажите п ару слов об объектах в JavaScript

Объекты (они же — ассоциативные массивы, хэши) и работа с ними в JavaScript реализованы не так, как в большинстве языков. Объект в JavaScript представляет собой обычный ассоциативный массив или, иначе говоря, «хэш». Он хранит любые соответствия «ключ => значение» и имеет несколько стандартных методов.

— Есть две функции. Есть ли между ними разница? Если есть, то какая?

Разница есть — она заключается в видимости функции. Вариант функции без var виден везде в текущей области видимости. В том числе и до самого определения функции. Вариант с var присваивает функцию переменной, поэтому такая функция видна только после определения.

— Что cделает код: break me_baby; ?

Выйдет из текущего блока цикла или switch на метку «me_baby».

— Что такое SQL-инъекция?

SQL-инъекции — встраивание вредоносного кода в запросы к базе данных. С использованием SQL-инъекций злоумышленник может не только получить закрытую информацию из базы данных, но и, при определенных условиях, внести туда изменения. Уязвимость по отношению к SQL-инъекциям возникает из-за того, что пользовательская информация попадает в запрос к базе данных без должной обработки: чтобы скрипт не был уязвим, требуется убедиться, что все пользовательские данные попадают во все запросы к базе данных в экранированном виде.

— Допустим, у вас есть Интернет-магазин. Составьте запрос, который покажет, сколько денег принес каждый отдельно взятый покупатель в общей сложности за всё время существования магазина.

— В чем разница между записью #my и .my?

#my – селектор ID.

.my – селектор класса.

— Что такое псевдоклассы?

Псевдоклассы — это то, что обычно пишут после селектора через двоеточие, чтобы определить реакцию или состояние для данного селектора. Самые известные псевдоклассы — это :link, :hover, :visited и :active. Псевдоклассы обладают следующей структурой:


т.е. нужно всего лишь поместить двоеточие между селектором и псевдоклассом.

— Найти все элементы div с классом one, а также все элементы p с классом two, затем добавить им всем класс three и визуально плавно спустить вниз.

— Выбрать div`ы, у которых нет класса cls

— Что такое DOCTYPE и зачем он нужен?

DOCTYPE — это определение типа документа (Document Type Definition (DTD)), правила, в соответствии с которыми осуществляется проверка конкретного документа (веб-страницы) XML или (X)HTML. Благодаря этой записи браузер определяет, какая в данном документе используется версия DTD. А нужен он для того, чтобы браузеры правильно отображали разметку документа. Если не указан DOCTYPE, то браузер будет добавлять «отсебятину», причём каждый браузер будет добавлять свою «отсебятину». В результате ни о какой кроссбраузерности не может и речи идти.

— Что такое entities?

Entities — это комбинации знака & и буквенного или цифрового кода после нее, предназначенные для замещения символов, которые не могут встречаться в «чистом» виде в HTML-тексте, например, символа «

— Какие магические методы знаешь? Что это вообще такое?

Это методы, зарезервированные в php, которые начинаются с двойного подчеркивания “__”.

Илон Маск рекомендует:  border-left в CSS

Список всех магических методов:

  • __construct
  • __destruct
  • __call
  • __callStatic
  • __get
  • __set
  • __isset
  • __unset
  • __sleep
  • __wakeup
  • __toString
  • __set_state
  • __clone

__construct и __destruct — самые популярные методы, которые реализуют базовые понятия объектно-ориентированного программирования: конструктор и деструктор;

__call, __callStatic, __get и __set – методы, связанные с перегрузкой обращений как к свойствам, так
и к методам. Методы __get() и __set() вызываются при установке и получении значения свойства,
а методы __call() и __callStatic — при вызове метода. Стоит заметить, что эти магические функции
будут вызываться только и исключительно в том случае, если запрошенные метод или свойство
не существуют;

__isset — метод, срабатывающий при вызове функций empty() или isset() на несуществующем
или недоступном свойстве класса;

__unset — срабатывает при вызове функции unset() на несуществующем или недоступном свойстве класса;

__sleep и __wakeup – методы, которые вызываются только из функций serialize и unserialize со-
ответственно. Метод __sleep будет вызван сразу при применении к объекту функции serialize, а
метод __wakeup – при применении unserialize. В настоящий момент методы применяются для сохранения текущего состояния системы с последующим восстановлением данного состояния
(например, коннект к базе);

__toString – метод, с помощью которого можно обращаться к классу как к строке (например, с
помощью print или echo);

__set_state – метод, который вызывается для классов, экспортирующих значения свойств функ-
цией var_export();

__clone – вызывается при клонировании объекта (введен для использования из-за того, что объ-
екты в php5 и выше передаются по ссылке);

__invoke – вызывается при попытке использовать объект в качестве функции.

Вопрос по позиционированию css/js

Насколько я знаю свойство position: fixed позиционируется относительно объекта window то есть окна браузера. Вопрос в следующем: как можно спозиционировать элемент таким образом чтобы он был будто fixed относительно нужного блока на странице (допустим колонки сайдбара). Знаю такой баг — если у нужного контейнера поиграться с transform: translate; и дочернему элементу этого контейнера дать position: fixed то позиционироваться он будет будто у него position: absolute . Но мне нужно чтобы это была такая себе иммитация fixed, чтобы элемент был в рамках viewport пока он над ним.

Заранее прошу прощения что так сумбурно объяснил суть вопроса, но лучше сформулировать пока что не могу.

2 ответа 2

Насколько я понимаю, Вам нужно сделать как бы прилипающий блок внутри статически расположенного блока. Если да, то вот примерное решение

В зависимости от того, какая нужна поддержка Если Ие, и всякая шушера не нужна, то вот вам вариант position: sticky;

если нет, то только js. Вот, самый простой вариант, с установкой top


Тесты на знание Web-технологий

Теперь на сайте доступно тестирование на знание следующих тем: HTML, CSS, JavaScript, PHP, SQL.

Каждый тест состоит из 10-ти вопросов по определённой теме. Я старался в каждом вопросе затрагивать самые разнообразные области применения конкретного языка, чтобы максимально тщательно проверить Ваш уровень знаний.

Безусловно, все тесты бесплатные и пройти их может любой желающий.

Порядок прохождения теста:

  1. Переходите по ссылке «Начать тестирование» у соответствующего теста.
  2. Отвечаете на поставленные вопросы, выбрав единственный правильный вариант.
  3. По завершению тестирования Вы увидите свой балл, количество ошибок, а также разбор каждого вопроса из теста.

Внимание! Вернуться к предыдущему вопросу не получится, поэтому прежде, чем отвечать, думайте.

Доступные на данный момент тесты

  • Всего тест прошло: 73051 человек
  • Средний балл: 2.84 из 5 баллов.

Тест на знание основ HTML. От Вас потребуется знание основных HTML-тегов, а также грамотное их использование. Так же необходимо понимание особенностей стандарта XHTML 1.1.

  • Всего тест прошло: 31867 человек
  • Средний балл: 3.37 из 5 баллов.

Тест проверяет знания по основам CSS. Для успешного прохождения теста Вы должны знать основные виды селекторов (их синтаксис), знать основные свойства и их возможные значения, а также знать назначение самых популярных псевдоэлементов.

JavaScript

  • Всего тест прошло: 24370 человек
  • Средний балл: 3.31 из 5 баллов.

Данный тест проверяет Ваши знания по языку JavaScript. Вопросы из теста затрагивают разные области применения данного языка. Очень много вопросов имеется на понимание «мелких» нюансов. В остальном же от Вас требуется знание базовых вещей: работа с переменными, основные функции JavaScript, приоритеты операций и прочее.

  • Всего тест прошло: 32834 человека

  • Средний балл: 3.03 из 5 баллов.

Данный тест проверяет Ваши знания по языку PHP. От Вас требуется знание основных конструкций PHP, работы с переменными, сессий, реализации редиректа и прочих стандартных вещей.
Убедительная просьба: В тесте содержится много вопросов по типу: «Что выведет скрипт?». Большая просьба, не надо копировать его и проверять. Будьте честны перед самими собой.

  • Всего тест прошло: 17843 человека
  • Средний балл: 3.29 из 5 баллов.

Данный тест проверяет Ваши знания по языку запросов SQL. Вопросы затрагивают только самые базовые знания этого языка, без какого-либо углубления. От Вас потребуется знание самых основных SQL-запросов, а также грамотное их использование.

Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

HTML, CSS и JavaScript в вебе (поймут даже чайники)

Вы время от времени задумываетесь, как работает программирование, но не делали ничего сложнее в Интернете, чем загрузка фотографии в Facebook? Тогда вы в нужном месте.

Для тех, кто никогда «кодил» раньше, концепция создания веб-сайта с нуля, макет, дизайн и иже с ними — могут показаться действительно пугающими. Вы представляете студентов Гарварда из фильма «Социальная сеть», сидя за своими компьютерами с гигантскими наушниками и набирающими код, и думаете: «Я никогда не смогу этого сделать».

Собственно, вы можете.

Любой может научиться программировать, точно так же, как любой может изучить новый язык. На самом деле, программирование вроде как говорит на иностранном языке — именно поэтому они называются языками программирования. Каждый из них имеет свои собственные правила и синтаксис, которые необходимо изучать шаг за шагом. Эти правила — способы сообщить компьютеру, что делать, точнее, они — способ сообщать вашим браузерам, что делать.

Цель этого поста – познакомить Вас с основами HTML, CSS и одного из самых распространенных языков программирования — JavaScript. Но прежде чем мы начнем, давайте дадим представление о том, какие языки программирования действительно существуют.

Что такое язык программирования?

Программировать или «кодить» — это как решать головоломку. Как изучать иностранный язык, например английский или французский. Мы используем эти языки, чтобы превращать мысли и идеи в действия и поведение. В программировании цель точно такая же — вы просто управляете разными видами поведения, а источник этого поведения не человек, а компьютер.

Язык программирования — это наш способ общения с программным обеспечением.

Программирование в веб-разработке

Сотруднику ставится задача «создать веб-страницу с таким-то заголовком, таким-то шрифтом, такими-то цветами, изображениями и анимированными единорогами, бегущими по экрану, когда пользователи нажимают на эту кнопку», главная цель — принять эту большую идею и разбить ее на маленькие части.

Каждая страница в Интернете, которую вы посещаете, строится на выполнении отдельных инструкций шаг за шагом. Ваш браузер (Chrome, Firefox, Safari и т.д…. если используете Internet Exploler, не читайте дальше, выключите компьютер и идите гулять) играет колоссальную роль в отображении кода и тем, что мы можем видеть на наших экранах и даже взаимодействовать. Помните, что код без браузера — это просто текстовый файл — это когда вы помещаете этот текстовый файл в браузер, что происходит волшебство. Когда вы открываете веб-страницу, браузер отображает HTML и другие языки программирования в максимально понятном для вас формате.

HTML и CSS на самом деле всего лишь структура страницы и информация о стиле. Прежде чем перейти к JavaScript и другим языкам программирования, необходимо знать основы HTML и CSS, поскольку они находятся на передней части каждой веб-страницы и приложения.

В самом начале 1990-х годов HTML был единственным языком, доступным в Интернете. С тех пор многое изменилось и теперь одним из самых распространенных языков программирования является JavaScript.

В первую очередь, необходимо понять, что HTML — основа каждой веб-страницы, независимо от сложности сайта или количества задействованных технологий. Это важный навык для любого веб-профессионала и отправная точка для всех, кто имеет отношение к созданию или редактированию контента в Интернете. И, к счастью для нас, ему удивительно легко учиться.

Как работает HTML?

HTML отображает язык разметки гипертекста. «Язык разметки» означает, что HTML использует теги для идентификации различных типов контента и целей, которые каждый преследует на веб-странице.

Взгляните на статью ниже. Если бы мы попросили вас структурировать текст, вы, вероятно, легко бы справились: наверху находится заголовок, затем подзаголовок, основной текст и изображения внизу.

Для разметки разметки используются HTML-теги, также известные как «элементы». Они имеют довольно интуитивные типы: заголовки, теги абзацев, теги изображений и т. д.


Каждая веб-страница состоит из нескольких тегов HTML, обозначающих определенный тип контента на странице. Каждый тип содержимого на странице «обернут», т. е. окружен тегами.

Например, слова, которые вы сейчас читаете, являются частью абзаца. Если кодировать эту страницу с нуля, этот абзац начался бы с тега абзаца открытия:

. Часть «тега» обозначается открытыми скобками, а буква «p» сообщает компьютеру, что мы открываем абзац вместо какого-либо другого типа содержимого.

После того, как тег был открыт, все следующее содержимое считается частью этого тега, пока вы не закроете его. Когда абзац заканчивается, нужно ставить тег заключительного абзаца: . Обратите внимание, что закрывающие теги выглядят точно так же, как открывающие теги, за исключением того, что после левой угловой скобки есть косая черта. Вот пример:

Илон Маск рекомендует:  Что такое код session_unset

Используя HTML, вы можете добавлять заголовки, форматировать абзацы, разрывы строк, создавать списки, выделять текст, создавать специальные символы, вставлять изображения, создавать ссылки, создавать таблицы, управлять некоторым стилем и многое другое.

Чтобы узнать больше о HTML, можно ознакомиться с руководством по базовому HTML или использовать бесплатные классы и ресурсы на codecademy, но пока перейдем к CSS.

CSS — это каскадные таблицы стилей. Этот язык разметки определяет, как HTML-элементы веб-сайта должны отображаться на интерфейсе страницы.

Если HTML — это гипсокартон, CSS — это краска.

В то время как HTML является основной структурой вашего сайта, CSS — это то, что дает всему вашему сайту стиль. Цвета, интересные шрифты и фоновые изображения – все это заслуга CSS. Этот язык влияет на все настроение веб-страницы, что делает его невероятно мощным инструментом и важным навыком для веб-разработчиков. Он также позволяет веб-сайтам адаптироваться к различным размерам экрана и типам устройств.

Чтобы показать вам, что CSS делает для веб-сайта, просмотрите следующие два снимка экрана. Первый снимок экрана — это сообщение моего коллеги, но показано в основном HTML, а второй снимок экрана — это тот же пост в блоге с HTML и CSS.

Пример HTML (без CSS)

Пример HTML без CSS, приводящий к неформатированному сообщению блога HubSpot

Обратите внимание, что все содержимое не изменилось, но визуально все выглядит иначе. Это то, что вы увидите, если таблица стилей по какой-либо причине не прогрузится на сайт. Теперь, вот как выглядит одна и та же веб-страница с добавлением CSS.

Пример HTML + CSS

Пример HTML + CSS, используемый для форматирования сообщения блога HubSpot

Разницу видно, не так ли?

Видите ли, HTML, разработанный еще в 1990 году, на самом деле не предназначен для отображения информации о физическом форматировании. Первоначально он создан для определения структурного содержания документа, например заголовков и абзацев. HTML вывел эти новые конструктивные особенности, а CSS был изобретен и выпущен в 1996 году: все форматирование может быть удалено из документов HTML и сохранено в отдельных файлах CSS (.css).

Итак, что же такое CSS? Он обозначает каскадные таблицы стилей — и «таблицу стилей» самого документа. Любой браузер имеет таблицу стилей по умолчанию, поэтому на каждой веб-странице отражается хотя бы одна таблица стилей, в зависимости от того, какой браузер посетитель использует, независимо от дизайна страницы. К примеру, допустим стиль шрифта нашего браузера по умолчанию — Times New Roman, размер 12, если разработчик не применил собственную таблицу стилей, то посетитель увидит веб-страницу в Times New Roman размером 12.

Разумеется, в большинстве случаев используется пользовательский CSS. Именно здесь вступает в игру слово «каскадирование» — подобно водопаду, вода падает вниз и поражает все на пути, однако скалы внизу влияют на то, где она будет течь. Точно так же последняя определенная таблица стилей сообщает моему браузеру, какие инструкции имеют приоритет.

JavaScript является более сложным языком, чем HTML или CSS, и он не был выпущен в бета-версии до 1995 года. В настоящее время JavaScript поддерживается всеми современными веб-браузерами и используется практически на каждом сайте в Интернете для более мощных и сложных функций.

Для чего используется JavaScript?

JavaScript — это логический язык программирования, который можно использовать для изменения содержимого веб-сайта и заставить его вести себя по-разному в ответ на действия пользователя. Общее использование JavaScript включает в себя окна подтверждения, призывы к действию и добавление новых идентификаторов к существующей информации.

Короче говоря, JavaScript — это язык программирования, который позволяет веб-разработчикам создавать интерактивные сайты с динамичными элементами.

Одним из примеров JavaScript в действии являются окна, которые появляются на вашем экране. Подумайте, как в последний раз, когда вы ввели свою информацию в онлайн-форму, и появилось окно с подтверждением, попросив вас нажать «ОК» или «Отменить», чтобы продолжить. Это стало возможным благодаря JavaScript — в коде вы найдете инструкцию if else, которая говорит компьютеру делать что-то одно, если пользователь нажимает «ОК», и другое дело, если пользователь нажимает «Отмена».

Призыв к действию

Другим примером JavaScript является призыв к действию (CTA), подобно тем, которые помещаются в сообщения в блоге, которые появляются в нижней правой части экрана. Вот как это выглядит:

Какие вопросы на собеседовании ожидать по JS?


Андрей: та там дичь всякая =) вперемешку с комментами, которые могу понять только я. Да и куча вопросов для меня уже не актуальны.
Такой вот вопрос меня, когда-то, застал врасплох:

Но сейчас уже кажется элементарным и понятным.
Или такой тоже может запутать неподготовленный моск:

Андрей: возможно как-то катну, если оформлю нормально. Я еще один файлик чуть позже завел, где отвечаю на практические вопросы которые где-то вычитал) Из примерчиков:

Но самые непонятные обычно теоретически все-таки. И по спекам всяких Date() и прочего хлама.

Антон Мудренок: Да уж, много избыточности на мой взгляд, которая не нужна для решения 99% задач. Я исповедую принцип необходимости и достаточности.

У меня возникла идея — надо будет как-нибудь задачек напостить на кодеварс и сходные ресурсы. :) А то там всякая абстрактная алгоритмистика, а надо бы поближе к боевым реалиям.

Андрей: как сказать. Я определенное время писал на js и бед не знал. Потом, на codewars как раз, попалась задачка написать декоратор с определенным функционалом. Помню я нормально так прифигел, понял что js не знаю, задачку решил и пошел читать Кайла Симпсона)

В целом эта избыточность и понимание языка помогает найти загадочный баг в 10-200 раз быстрее обычного.

Андрей: мой /users/mudrenok правда я с тех пор, как мне попалась та задачка — больше там не тусил)) Перешел на codepen для отвода души =)

Коварные вопросы, говорите?

1. Какое из нововведений es6 принципиально не полифилится в es5? Почему? (И на какой черт оно вообще нужно, вдогонку). (И я бы заодно вдогонку попросил набросать полифил какой-то из фичей, например, this в arrow function).

2. Какие условия должны быть соблюдены для того, чтобы v8 мог скомпилировать функцию в нативный код? Ну и разумеется, почему?

3. Почему до es5.1 включительно typeof null === «object»?

4. Что на самом деле произойдет, если вы напишите

5. Аналог второго вопроса, но все же: с чем, по вашему мнению, могла быть связана бага в одной из версий хрома, приводящая к следующему результату:

6. Какие вы знаете способы заставить js произвести несколько операций одновременно (буквально, за такт)?

7. Сработает ли documeny.onready, если скрипт загружать с аттрибутом async? В каких случаях и когда именно он сработает?

8. Что можно и что нельзя делать в событии document.beforeunload?

Но, справедливости ради, эти вопросы даже не на мидла, некоторые из них не сколько каверзные, сколько упоротрые и если их вам зададут — следует задуматься в адекватности компании.

Не слишком сложные вопросы, а упоротые.
Например: на вопрос 2 ответ — какие-то сакральные знания, передающиеся от сенсея к ученику. Это не документировано, мало кто знает, да и может меняться. Да, одно из условий очевидно — типы параметров вызова функции не должны меняться (иначе толку то компилировать, если каждый раз вызывается с разными типами аргументов), то два других не настолько очевидны. Если то, что функция должна быть вызвана n раз минимум, иначе большой шанс, что она будет вызвана вообще только один раз, еще можно догадаться, но прям с трудом (n = 100, к слову), то что v8 не компилирует функции с try-catch ты либо знаешь, либо нет.

3. Опять из серии «знаешь ли ты». Старая байка, наравне «почему . вначале имени файла в линуксе скрывает этот файл». Хотя знать саму эту особенность нужно.

6. Честные методы (он один: SIMD) — гипернераспространены, да еще поддержка в зачаточном состоянии, web-assembly — еще более плохая поддержка, да и вопрос же был про js, а веб-воркеры не гарантируют одновременного выполнения (более того, они почти наверное выполнятся последовательно, но не известно в каком порядке). А другие методы вообще странные (хотя понапридумывать можно). Хотя как подумать и пофантазировать вопрос не такой уж плохой.

7. Ты либо знаешь либо нет, хотя додуматься, что во время закрытия вкладки нельзя кидать всякие alert можно. Но это тот вопрос, который нет смысла знать, потому что гуглится за две секунды. (А еще тут жутко расходятся реализации в основных браузерах).

В итоге такие вопросы мало раскроют человека как специалиста, лишь покажут — натыкался ли он на что-то из этого случайно в процессе работы или нет.

40 важных вопросов и ответов по HTML5

Введение

Я, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

Поэтому ниже приводятся 40 важных вопросов, которые помогут вам блеснуть знаниями по HTML5 .

Илон Маск рекомендует:  Что такое код msql


Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.

Какая связь между SGML, HTML, XML и XHTML?

SGML ( Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

HTML – это язык разметки, который описывается с помощью SGML.

Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию « DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).

XHML был создан из XML и использовался в HTML 4.0 . Поэтому, например, в HTML, основанном на SGML, тег
недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

Что такое HTML 5?

HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

В HTML 5 нам не нужно DTD. Почему?

HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

Если я не вставлю в документ , будет ли работать HTML 5?
Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

Какие браузеры поддерживают HTML 5?

Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV . Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:

  • : Представляет блок заголовка страницы;
  • : Подвал страницы;

Вопросы по css и javascript

Вопросы кандидату на должность фронтенд-разработчика

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность фронтенд-разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

Также имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).

В настоящее время этот проект поддерживают:


С тех пор он был активным благодаря этим замечательным людям.

Создание учебного теста с ответами при помощи HTML и JavaScript

В статье описывается последовательное создание учебного теста. Если вы не хотите читать о программировании, то сразу переходите в раздел с инструкциями по изменению теста и его загрузки.

Создание простого теста

Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание HTML и jаvascript.

Как решить эту проблему. Учитель может воспользоваться онлайн конструктором тестов или же попытаться создать тест самостоятельно на основе использования шаблона. Именно второй вариант мы рассмотрим в данной статье.

Мы сформируем простой шаблон, который можно будет потом размножить на несколько файлов и каждый превратить в отдельный тест.

Допустим имеется несложный математический тест, состоящий из нескольких задач по математике:

Примеры нужно вывести на экран и дать ученику возможность ввести ответ, дальше сравнить ответ с правильным и показать ученику процент правильно выполненного задания.

Сначала создадим HTML код задач:

Напротив каждой задачи учебного теста мы подставили поле для ввода текста. Подробнее о различных полях в HTML читайте в статье по ссылке. В конце мы добавили кнопку, при нажатии на которую должна произойти проверка того, что набрал ученик в ответах текста.

Обратите внимание на идентификаторы “z_1”,”z_2” и “z_3”. Если вам нужно добавить задачу 4, то нужно просто скопировать последнюю строку с задачей, заменить условие и в поле идентификатора написать “z_4”.

В последней строке мы покажем результат выполнения заданий после проверки.

На следующем этапе нужно создать jаvascript код, который сравнит то, что набрал ученик с правильными ответами и подсчитает процент выполнения задач.

pr_otv_zadachi_1 = 55;
pr_otv_zadachi_2 = -9;
pr_otv_zadachi_3 = 85;

Первые три строки будут содержать правильные ответы. Четвертая и последующие задачи в тест добавляются путем копирования последней строки с ответом, подстановки числа 4 вместо 3 и указанием правильного ответа.

Теперь нужно узнать то, что ввел ученик в ответах. Для этого используем следующий код.

otv_uch_1 = document.getElementById(‘z_1’).value;
otv_uch_2 = document.getElementById(‘z_2’).value;
otv_uch_3 = document.getElementById(‘z_3’).value;

Четвертая задача будет означать новую строку с заменой цифр 3 на 4.

Далее нужно сравнить ответы ученика с правильными ответами. Если ответы будут совпадать, то за каждую задачу теста нужно добавить 1 балл.

ball = 0;
if(otv_uch_1 == pr_otv_zadachi_1) <
ball +=1;
>
if(otv_uch_2 == pr_otv_zadachi_2) <
ball +=1;
>
if(otv_uch_3 == pr_otv_zadachi_3) <
ball +=1;
>

Для добавления задачи 4 вам потребуется скопировать последние три строки и заменить цифры в них на 4.

Теперь нужно посчитать процент правильных ответов.

В этой строке мы указываем сколько всего задач в учебном тесте. Если вы добавили еще, то нужно исправить эту цифру.

procent_vip = ball/vsego_zadach * 100;

Затем нужно вывести ответ на экран.

Вот и все. Теперь объединим весь код в одну HTML страницу.

Тест из нескольких задач по математике

25 вопросов, которые задают на собеседовании JavaScript-разработчику

Доброго времени суток, дорогой гость! Рада приветствовать на страницах своего блога.

Сегодня речь пойдет о том, какие вопросы задаются на техническом собеседовании кандидату на позицию Javascript-разработчика. Цель — проверить необходимый уровень знаний языка кандидата и теоретической подготовки.

Мне бы хотелось выразить благодарность Senior Frontend Developer Греченок Евгению и Senior Backend Developer Гиззатову Марселю за помощь в создании статьи. Те вопросы, которые идут дальше, из их методички, которую они используют для собеседований кандидатов «и на 30 тысяч, и на 130». Большое спасибо, ребята, за время, которое мне уделили, и считаю, что для меня на собеседовании был хороший стимул убрать пробелы в собственных знаниях и сделать еще один шаг к тому, чтобы стать профессионалом.

Вопросы по JavaScript (синтаксис и особенности языка)

1. Если вам необходимо проверить, определено ли свойство у самого объекта … (hasOwnProperty)
2. Как работает this ( http://bonsaiden.github.io/JavaScript-Garden/ru/#function.this )
3. Замыкания ( http://bonsaiden.github.io/JavaScript-Garden/ru/#function.closures )
4. Определение переменных (всплытие)
5. Переменные let, const, var ( https://learn.javascript.ru/let-const )
6. Равенство и сравнение (оператор == и ===)
7. Операторы typeof и instanceof (для чего используются http://bonsaiden.github.io/JavaScript-Garden/ru/#types.instanceof )
8. Почему нельзя использовать eval ( http://bonsaiden.github.io/JavaScript-Garden/ru/#core.eval )
9. Деструктуризация ( https://learn.javascript.ru/destructuring )
10. Строки-шаблоны ( https://learn.javascript.ru/es-string )
11. Классы (прототипы, современные)
12. Итераторы ( https://learn.javascript.ru/iterator )
13. Генераторы ( https://learn.javascript.ru/generator )
14. Новые типы данных ( https://learn.javascript.ru/set-map )
15. Что такое Eventloop? Объясните принцип его работы.

Общие вопросы по программированию

  1. Отличие компилируемого языка от интерпретируемого
    Чем компиляция С отличается от Java
  2. Отличие статической типизации от динамической
  3. Отличие наследование от композиции ( https://habrahabr.ru/post/325478/ )
  4. Алгоритмы и их сложность (JS https://tproger.ru/translations/algorithms-and-data-structures/ )
    a. В приложении к любому языку привести примеры стандартных методов сортировки / обхода дерева / поиска в массиве, дикте с пояснением о их сложности и как работают.
  5. FIFO, LIFO
  6. Структуры данных (JS https://learn.javascript.ru/data-structures )
    a. Числа, Строки
    b. Объекты (ассоциативные массивы), передача по ссылке (что передаётся по значению)
    c. Массивы
    d. Деревья, Списки (связанный, ссылочный)
  7. Архитектура (в чём разница)
    a. асинхронная,
    b. многопоточная
  8. Микросервисы
    a. Будет ли микросервисами распределённая архитектура через общую шину данных
    b. Требования к микросервисам
    i. горизонтальное масштабирование
    ii. отказоустойчивость
  9. Преимущества микросервисов:
    i. легкая поддержка (небольшие сервисы легче)
    ii. нет ограничения на языки и библиотеки для решения задачи
    iii. упрощенное тестирование, возможность замокать взаимодействия
    iv. легкое накатывание и откатывание новых версий
    v. можно экспериментировать с технологиями

Гибкие методологии

  1. Зачем нужны
  2. Какие подходы есть
  3. Выявление проблем в разработке, зачем нужна ретроспектива в scrum
  4. Распределение задач по разработчикам
    • горят сроки
    • планирование

Задача на понимание JavaScript

Задача 1. Что выведет данный код?

Цель задачи: проверить понимание замыкания.

Тема: Замыкание (closure).

Ответ: Если исходить из определения замыкания — способность функции запоминать область видимости переменной, в которой та была объявлена, то правильный ответ 5. Функция a запомнила содержимое объявленной ранее переменной за пределами функции, и после вывода функции, передала в alert 5.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL