Содержание

уроки с заданиями, примеры и решения

Выберите тему:

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

Итак, приступим.

Для начала разберем, javaScript – что это такое и зачем он необходим в html?
Javascript — это алгоритмический язык программирования.

Рассмотрим схему взаимодействие браузера с сервером — клиент-серверную схему. Принцип работы строится на схеме запрос-ответ. Мы вбиваем адрес в строке адреса браузера, браузер отсылает запрос на сервер: «необходим такой-то ресурс». Сервер обрабатывает запрос и выдает ответ в виде html-страницы.

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

html есть для этого элементы управления – кнопки, списки, переключатели и т.д. Набор элементов мы можем поместить на страницу и с помощью кнопки отправить их на сервер.

Но недостаток схемы в том, что взаимодействие клиент-сервер занимает какое-то время. И если мы хотим сделать интерактивную страницу, которая бы реагировала быстро на действия пользователя, то нам эта схема не подходит. И, кроме того, во многих случаях большинство действий со страницей и ее объектами можно выполнить на компьютере пользователя: например, подсветка пункта по наведению мыши. Зачем для подсветки загружать сервер, заставляя его заново формировать и выдавать страницу? Можно это сделать на клиентском компьютере.

Однако, язык html – декларативный язык, и он не может выполнять алгоритмические конструкции. Поэтому в середине 90-х годов прошлого века возникла идея встроить в html еще один язык, простой, и с его помощью выполнять простые программы без запроса-ответа к серверу. Идея появилась у программистов компании Netscape Communications. Они разработали javaScript — алгоритмический язык программирования и встроили в свой браузер Netscape Navigator. Назывался язык lifeScript (живой сценарий).

В середине 90 была популярна платформа java. Данный язык был настолько новаторским и популярным, что бытовало мнение, что в скором времени все будут программировать на

java. Поэтому программисты Netscape переименовали свой lifeScript в javaScript и сделали синтаксис похожим, позаимствовав некоторые основные конструкции. Однако, javaScript и java — это два совершенно разных языка. В дальнейшем поддержку javaScript добавили и в другие браузеры. Стали разрабатывать и принимать стандарты javaScript (ECMA).

Итак, кратко по истории JavaScript:

  • Разработан в Netscape Communications как язык сценариев для обозревателей Netscape Navigator, начиная с версии 2.0 (декабрь 1995 ) (на основе языка Java от Sun Microsystems). Язык LifeScript =>JavaScript
  • К разработке подключается корпорация Microsoft, чьи обозреватели Internet Explorer поддерживают JavaScript, начиная с версии 3.0. В Internet Explorer JavaScript носит название Jscript
  • В июне 1997 г. была принята первая версия стандарта под названием ECMAScript (ECMA-262) – официальное название JavaScript.

labs-org.ru

Пять книг по JavaScript для начинающих — Блог Академии — HTML Academy

Мы попросили Леру, автора интерактивных курсов по JavaScript, поделиться пятью, на её взгляд, полезными книгами по JavaScript. Они подойдут для новичков и тех, кто хочет подтянуть знания.

Если вы знаете английский язык, то советуем читать их в оригинале.

JavaScript для детей

«Самоучитель по программированию.»

Книга подойдёт для тех, кто только начинает изучать JavaScript. Она знакомит с основами и даёт поверхностное представление о языке. В книге три части: основы, продвинутый JavaScript и графика. В ней также есть практические задания, в которых пошагово рассказывается, как написать игру.

Книга на Озоне

JavaScript. Подробное руководство

«JavaScript. Подробное руководство.»

Эту книгу советуют все и не зря. Она даёт хорошую базу, но тяжеловато читается. В руководстве рассматриваются основы JavaScript, среда разработки сценариев и клиентский JavaScript.

Книга на Озоне

Выразительный JavaScript

«Выразительный JavaScript.»

Знакомит с основами программирования и языка JavaScript. В ней предлагается выполнить несколько небольших проектов, чтобы закрепить материал. Один из них — создание своего языка программирования. В книге также рассказывается о canvas, SVG и Node.js.

Читать перевод

Грокаем алгоритмы

«Иллюстрированное пособие для программистов и любопытствующих.»

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

Книга на Озоне

JavaScript for Web Designers

«JavaScript for Web Designers.»

В книге доступно рассматриваются основы JavaScript. В целом ориентирована на начинающих.

Книга на Амазоне

Совет: Читая книги, не забывайте запускать у себя код из примеров. Так вы закрепите прочитанное на практике и лучше усвоите информацию.

htmlacademy.ru

Учебник JavaScript — Как создать сайт

Самоучитель по языку JavaScript

Учебник JavaScript
Учебник по синтаксису JavaScript

Перед тем как приступить к чтению учебника по языку JavaScript

, вы должны обладать знаниями по основам языка HTML.

Будет большим плюсом в изучении синтаксиса JavaScript, если вы уже знакомы с каким-нибудь языком программирования, например PHP, C или Pascal, а также понимаете что такое переменная, тип данных, функция или массив.

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

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

Как происходит изучение JavaScript

Изучение языка JavaScript, обычно делится на четыре этапа:
1. Освоение синтаксиса JavaScript (данный учебник),
2. Изучение DOM и BOM,
3. Управление DOM и BOM c помощью JavaScript,
4. Изучение различных библиотек JavaScript. jQuery — самая популярная на данный момент библиотека (учебник по jQuery должен появиться на этом сайте, в конце 2015 года).

DOM — это объектная модель документа. Благодаря технологии DOM, теги HTML-страницы начинают представлять из себя дерево объектов и у каждого объекта в этом дереве, есть свой уникальный адрес. Язык JavaScript обращаясь по этому адресу, может получить доступ к тому или иному HTML-тегу и управлять им (изменять цвет, размер, положение и мн. др.).

BOM — это браузерная модель документа. Структура та же самая что и у DOM, только вместо объектов HTML-страницы, выступают объекты браузера: окно браузера, размеры экрана браузера, история посещений, статусная строка и т.д.

После изучени DOM и BOM, приступают к созданию более-менее сложных скриптов на JavaScript, взаимодействующих со страницей и браузером.

Затем, немного освоившись, изучают какую-нибудь библиотеку JavaScript, например jQuery, благодаря ей можно создавать такие же программы как на JavaScript, только намного быстрее и эффективнее.

Некоторые вебмастера сразу приступают к изучению jQuery, пропустив предыдущие три этапа, но я не рекомендую этого делать, поскольку в любом случае нужно понимать синтаксис JavaScript и знать объекты DOM/BOM их свойства, методы и предназначения.

Какие программы можно написать с помощью JavaScript

С помощью языка JavaScript можно создавать множество интересных программ (скриптов):
— можно создавать скрипты которые будут изменять элементы страницы сайта или их расположение, путём нажатия на ту или иную кнопку,
— можно создавать анимацию,
— манипулировать формами, например проверять введённые пользователем данные на корректность,

— создавать различные тесты, например типа ЕГЭ (школьных экзаменов) и сразу получать результат,
— благодаря BOM можно узнавать характеристики браузера и компьютера пользователя посетившего ваш сайт, что позволяет создавать различные счетчики посещений,
— с помощью JavaScript, можно создавать даже игры, мультфильмы и множество других интересных и полезных программ.

Какова цель данного самоучителя по JavaScript?

Цель данной книги по JavaScript заключается в том, чтобы обучить вас основам синтаксиса JavaScript, познакомить с программированием и такими понятиями как переменные, типы данных, операции, операторы ветвления, функции, циклы, массивы, объекты и т.д. Всё это встречается и в других языках программирования, поэтому освоив JavaScript, вам уже намного легче будет изучать другие языки, например PHP, C++ или Python.

Структура учебника по JavaScript

В учебнике по JavaScript, будут рассмотрены следующие темы и уроки:

  1. Введение в учебник по JavaScript, для начинающих,
  2. Внедрение кода JavaScript в HTML-документ,
  3. Переменные в JavaScript,
  4. Типы данных в JavaScript,
  5. Операции в JavaScript,
  6. Оператор ветвления,
  7. Циклы в JavaScript,
  8. Функции в JavaScript,
  9. Массивы в JavaScript,
  10. Объекты в JavaScript,
  11. Заключение учебника

Читать далее: Внедрение JavaScript в HTML-документ.


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014


Навигация по записям

gabdrahimov.ru

JavaScript Учебник



JavaScript — язык программирования HTML и Веб.

JavaScript легко выучить.

Данный учебник JavaScript научит Вас от базового до продвинутого.


Примеры в каждой главе

С помощью «Редактора кода», Вы можете изменить все примеры и просмотреть результаты.

Пример

Мой первый JavaScript

Щелкните меня, чтобы отобразить дату и время Редактор кода »

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


Учитесь на примерах

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

Учебник дополняет пояснения и уточняет примеры «Редактора кода» .

Примеры JavaScript

Если вы посмотрите все примеры, вы узнаете очень много о JavaScript, за короткое время!


Для чего нужно изучать JavaScript?

JavaScript является одним из 3 языков веб разработчика

Веб-разработчики должны знать:

   1. HTML для определения содержания веб страниц

   2. CSS для разметки макета веб страниц

   3. JavaScript программировать поведения веб страниц

Учебник JavaScript работает с HTML и CSS.

А Вы что думали?

JavaScript и Java совершенно разные языки, как в концепции и дизайне.

JavaScript был изобретен Бренданом Эйхом в 1995 году и стал стандартом ECMA в 1997 году.
ЕСМА-262 — официальное название стандарта. ECMAScript — официальное название языка.

Подробнее о различных версиях JavaScript можно прочитать в этой главе Версии JS.


Скорость обучения

Скорость обучения упражнений — зависит от Вас.

Если Вы думаете, сделать перерыв, лучше дочетать материал до конца.

Также, нужно убедится в том, что, понимаете ли Вы данный пример «Редактора кода» .

После чего, можете отдохнуть.


JavaScript справочники

SchoolsW3 поддерживает полный справочник JavaScript, включая все объекты HTML и браузера.

Справочник содержит примеры для всех свойств и методов, а также постоянно обновляется в соответствии с последними веб стандартами.

Справочник JavaScript


JavaScript викторина

Проверьте свои навыки JavaScript на SchoolsW3!

Начать JavaScript викторину!


JavaScript Экзамен — Получить диплом!

SchoolsW3 Сертификат

Онлайн — Сертификация SchoolsW3

Идеальное решение для профессионалов, которым необходимо сбалансировать работу, семью и карьерный рост.

Уже выдано более 10 000 сертификатов!

Получите Сертификат »

HTML Сертификат документы на ваши знания HTML.

CSS Сертификат документы на ваши знания новейших CSS.

JavaScript Сертификат документы на ваши знания JavaScript и HTML DOM.

jQuery Сертификат документы на ваши знания jQuery.

PHP Сертификат документы на ваши знания PHP и SQL (MySQL).

XML Сертификат документы на ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документы на ваши знания Bootstrap фреймворк.


schoolsw3.com

Учи JavaScript правильно. Путеводитель для растерявшихся

Заблудились в JavaScript? Это совсем неудивительно. Вам нужен гид, который расскажет, что на самом деле важно. У нас как раз есть такой.

Посмотрите налево – тут рынок фреймворков, которые наперебой расхваливают свои возможности. Посмотрите направо – здесь супермаркет npm-модулей. Впереди вы можете видеть огромные мастерские бандлеров и таск-раннеров и офисные небоскребы Node-приложений.

Улицы города JavaScript длинные и извилистые, с десятками магазинчиков и торговцев разных мастей, мечтающих продать вам очередную полезную библиотеку. И с сотнями растерянных разработчиков, которые не знают, куда идти и что покупать. Некоторые набирают целые сумки товаров, которые потом никогда не будут использовать.

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

Предполагается, что с основами языка вы уже знакомы – иначе как вы вообще попали в этот город?

Асинхронность в основе всего

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

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

Следующий шаг в этом направлении – изучение функции fetch, удобной альтернативы классическому XMLHttpRequest.

Зачем нужны фреймворки

Фреймворки стали такой важной составляющей современного JavaScript, что кажется, что они были всегда.

Почему так получилось, почему js-фреймворки вообще существуют?

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

Привязка данных

Привязка данных (data binding) между представлением и контроллером – важная часть современных приложений. Необходимо синхронизировать пользовательский интерфейс с реальными изменениями данных. Все фреймворки имеют какой-то способ сделать это, независимо от того, являются ли они полным воплощением модели MVC, MVVM или просто слоем представления.

Повторно используемые компоненты

Самое большое достижение AngularJS – введение моды на компонентную структуру приложения, которую быстро подхватили и Vue, и React. Эта идея оказалась настолько удачной, что в самом языке появился специальный интерфейс веб-компонентов. К сожалению, он не имеет механизма привязки данных, поэтому фреймворки по-прежнему незаменимы.

Правильное изучение JavaScript фреймворков

Выбрав фреймворк для изучения, помните – это лишь инструмент для увеличения возможностей разработчика. Вы должны точно понимать, какие проблемы языка решаете таким способом. Фреймворки будут меняться, но с подобным пониманием вы легко разберетесь в любом из них.

Часто бывает так, что Junior JavaScript разработчик, не имея еще достаточного опыта, с головой ныряет в какой-нибудь фреймворк и начинает считать его способ работы единственно правильным. Решение этой проблемы довольно интересное. Чтобы понять, что фреймворки не являются самоцелью, нужно… больше фреймворков!

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

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

Под капотом сборщика

Программирование на JavaScript в настоящее время – дело довольно комплексное и сильно выходит за пределы ванильного JS. Мы используем множество различных инструментов для выполнения рутинных задач и сборщики для объединения их в единый слаженный механизм.

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

Сборка – самая быстро развивающаяся область в JS. Производительность стремительно растет, размеры бандла так же стремительно уменьшаются. Разработчики выжимают из процесса все, что возможно. Именно поэтому вы должны разобраться в этом волшебстве.

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

TypeScript – новый JavaScript

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

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

Начинающему разработчику нет необходимости досконально изучать TypeScript (хотя там много интересного). На первых порах достаточно ознакомиться с основами: аннотациями типов для переменных, свойств классов и параметров функций. Понимание этих правил и следование им убережет вас от многих ошибок даже в классическом JS, вы станете гораздо более дисциплинированным разработчиком.


Забавно, что среди самых важных тем для изучения в современном JavaScript только одна относится к ванильному языку. Но такова реальность. Сейчас освоить инфраструктуру языка даже важнее для успеха, чем разобраться в его тонкостях.

Что вы считаете главным в современном JavaScript?

proglib.io

Курс изучения JavaScript для начинающих — Онлайн обучение программированию на JavaScript

Курс состоит из 2-х частей: базовый JavaScript с нуля для начинающих разработчиков и JS продвинутый для более опытных программистов.

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

Чему вы научитесь

  • Изучите основы программирования и алгоритмов, объектно ориентированное программирование (ооп)
  • Познакомитесь с самыми основами языка JavaScript, основными концепциями и принципами JS на практических примерах и заданиях
  • Изучите популярные технологии: AJAX, JSON и т.д.
  • Научитесь работать с Git и GitHub
  • Разберетесь, как работать с npm, Babel, Browserify, Webpack и т.д.
  • Узнаете, какой фрэймворк или библиотеку выбрать в дальнейшем и познакомитесь с React, Angular, Vue, Jquery
В результате вы напишите приложение, создадите интерактивные элементы на сайте: создадите таймер обратного отсчета, калькулятор, напишите скрипт отправки данных из формы и многое другое. Все знания закрепляются на практике.
  • Разберетесь в задачах на понимание основ JS взятые с реальных собеседований для вакансии фронтенд-разработчик
  • Также научитесь работать в редакторе кода VS Code, установите и подключите все нужные плагины
  • Бонус. Узнаете основные концепции и напишите свое приложение на React. Научитесь писать автотесты

JavaScript — это язык программирования реализующий интерактивность на веб-страницах. Каждый сайт использует этот язык. К тому же, используя различные фрэймворки, JavaScript распространяется всё шире: серверная сторона (Node.js), мобильные приложения (React Native, Ionic), виртуальная реальность (React VR) и так далее. Поэтому, если вы хотите пойти по одному из этих путей — нативный JS станет для вас просто необходимой базой.

Для прохождения данного курса необходимы базовые знания и навыки HTML и CSS. Рекомендуем изучить наши базовые курсы
Основы HTML/CSS — верстка сайтов с нуля
Верстка сайтов на HTML/CSS для начинающих

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

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

Course Author

Иван Петриченко

О преподавателе курса

  • Практикующий frontend-разработчик и консультант
  • Более 3х лет профессионально занимается frontend-разработкой и создает сайты «под ключ». Обучает этому взрослых и детей, организовывает и проводит мероприятия. Проводит консалтинг и аудит сайтов.

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

Я фрилансер и очень люблю путешествовать и выступать на различных конференциях.»

beonmax.com

JavaScript для начинающих | Введение

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

Язык сценариев JavaScript был разработан Бренданом Эйхом (Brendan Eich) в 1995 году, как одно из расширений для браузера Netscape Navigator 2.0, о котором мало уже кто помнит. Но сам язык живет и процветает.

В отличие от HTML и CSS это уже настоящий язык программирования. Можно сказать, что HTML и CSS — это только цветочки, а вот JavaScript — такие себе ягодки ягодки. Различаются они принципиально. HTML — банально разметка (или иначе — структура сайта), а CSS — внешний вид этой разметки. А вот JavaScript позволяет создавать именно программы, которые предписывают компьютеру пользователя выполнять активные действия.

Поэтому, если вы еще не знаете даже таких простых вещей, как HTML и CSS, то за JavaScript вам браться явно рановато.

Но пугаться не стоит. В отличие от старших братьев, типа Java или C++, JavaScript довольно простой язык. Освоить его может любой начинающий веб-разработчик. Во всяком случае, научиться им пользоваться совсем не трудно.

Программы, которые создаются на JavaScript, называются сценариями или скриптами. Следует четко понимать, что сценарии эти выполняются только на компьютере пользователя, а не где-то в сети. Поэтому во многом они зависят от настроек того же браузера, которые выставил у себя пользователь. Если он намеренно отключил у себя работу скриптов, то они попросту не сработают.

Зачем нужен JavaScript?

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

Примеры таких атрибутов:

onclick — одиночный щелчок мышью;
onmouseover — размещение курсора мыши в области, которую занимает какой-либо элемент страницы;
onfocus — выделение (фокусировка) элемента. Например, поля формы, куда установлен курсор.

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

Все верно, JavaScript не обрабатывает данные, это делает php на удаленном сервере.

Но что если пользователь не все заполнил? Если, к примеру, пропустил обязательные поля, помеченные звездочкой * . Что тогда? Тогда с сервера к нему прилетит новая страница, на которой будет написано, какой он лох.

Принципиальная разница тут вот в чем: без использования JavaScript при отправке формы запрос будет в любом случае отправлен на удаленный сервер, даже если форма заполнена неправильно или не полностью. И от сервера будет получен ответ с ошибкой. Пользователю придется все вводить заново. И так каждый раз. А если применить JavaScript, то страница с формой не будет отправлена на сервер до тех пор, пока пользователь не введет правильные данные.

То есть, скрипт, как говорится, «не отходя от кассы», прямо в браузере пользователя проверит форму и выдаст сообщение в случае неправильного или недостаточного ее заполнения. Здесь он выступает как контролирующий орган.

Согласитесь, что это гораздо удобнее, занимает меньше времени и, безусловно, съедает меньше трафика. А в случае с мобильным подключением к сайту это тем более существенно.

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

Продвинутый читатель скажет:

— Ха! Так это же все можно сделать и на чистом CSS3 без всяких скриптов!

Согласен, кроме слова «все». Все да не все. Всякие свистелки и перделки можно и на чистом CSS3 сотворить, но проверить правильность заполнения формы CSS никак не может. А кроме этого существует еще тысячи способов использовать скрипты JavaScript для более серьезных вещей. Иначе умные люди не стали бы впихивать JavaScript в тот же Bootstrap или создавать мегаполезную библиотеку скриптов jQuery.

Как включить JavaScript в страницу сайта

Существует несколько вариантов подключения JavaScript на страницах сайта.

1. Небольшой код JavaScript можно внедрить непосредственно в тегах HTML. Например, следующий код будет выводить в поле формы текст «Ведите ваш E-mail», который при установке туда курсора будет автоматически исчезать, чтобы не мешать пользователю:

<input type="text" value="Введите ваш E-mail" onblur="if(this.value=='') {this.value='Введите ваш E-mail';}" onfocus="if(this.value=='Введите ваш E-mail') {this.value='';}" />

Как видите, нигде специально не обозначено, что это JavaScript, но браузеры это понимают и обрабатывают соответственно написанным командам.

Однако JavaScript активно использует те же символы, что применяются в HTML. Например, угловые скобки или прямые кавычки. Чтобы браузер не ошибся в интерпретации этих знаков, обычно сценарии записываются между специальными тегами:

<script></script>

2. Чуть более крупный код сценария JavaScript можно добавить непосредственно в том месте страницы, где ему надлежит срабатывать. Как было указано выше, его мы обрамляем тегами <script></script>.

Но это не всегда удобно, а в некоторых случаях и чревато.

К примеру, если пользователь отключил в своем браузере работу скриптов, то страница может «зависнуть» на этом месте и не загрузиться полностью. Поэтому обычно рекомендуется размещать скрипты в самом низу страницы перед закрывающим тегом </body>. В этом случае, даже если скрипт не сработает, то сама страница загрузится целиком и без лишних задержек.

3. Самый правильный способ подключения скриптов JavaScript — это вынести их в отдельный файл с расширением .js и подключить к странице посредством ссылки, как и в случае с листом стилей CSS, вынесенным в отдельный файл. Пример:

<script src="myscript.js"></script>

Кстати, подключать его тоже рекомендуется в самом низу страницы перед закрывающим тегом </body>. Это ускоряет загрузку страниц в целом.

На этом ознакомительный экскурс в JavaScript заканчиваем. В следующий раз напишем наш первый сценарий на этом замечательном языке. Подпишитесь на обновления блога Вебсовет, чтобы ничего не пропустить!

www.websovet.com