Однако, чтобы научиться его использовать необходимо познакомиться с основами языка JavaScript . И тут приходит на помощь данная категория сайта.
Многие думают, что JavaScript - это сложный язык. На самом деле, это не так, далеко не так, и освоить его в состоянии любой человек, который имеет хоть какое-то мышление. И чтобы направить это мышление в нужную сторону, необходимо ознакомиться с материалами по основам JavaScript , которые представлены в данной категории абсолютно бесплатно !
Прочитав статьи по основам JavaScript, Вы узнаете:1) Код простейшей программы Hello World на языке JavaScript .
2) Как создавать, инициализировать и использовать переменные в JavaScript .
3) Какие бывают типы переменных в JavaScript .
4) Как создавать и использовать функции в JavaScript .
5) Об условном операторе в JavaScript .
6) Какие бывают операторы цикла в JavaScript .
7) Об операторе switch case в JavaScript .
8) Как создавать массивы в JavaScript .
9) Об ООП в JavaScript .
10) Об объекте Math в JavaScript .
11) Как работать с массивами в JavaScript .
12) Как работать со строками в JavaScript .
13) Как работать с датой и временем в JavaScript .
14) Об объекте Number в JavaScript .
15) Об объекте Window в JavaScript .
16) Об объекте Document в JavaScript .
17) Как реализовать редирект на JavaScript .
18) Об объекте Image в JavaScript .
19) Об объекте Link в JavaScript .
20) Как узнать браузер пользователя в JavaScript .
21) Как сделать проверку формы в JavaScript .
22) Как получить доступ к любому объекту HTML через JavaScript .
23) Об объекте Object в JavaScript .
24) О событиях и их обработчиках в JavaScript .
25) Как реализовать таймер в JavaScript .
26) Как обработать исключения в JavaScript .
27) Как создать собственный объект в JavaScript .
28) Как решить проблему отображения PNG в IE6 .
29) Как проверить включён или нет JavaScript у пользователя.
30) Как сделать валидным JavaScript .
31) Что такое JSON .
32) Как зашифровать JavaScript .
33) Как отправить POST-запрос через JavaScript .
34) Как сделать горячие клавиши на сайте.
35) Как сделать визуальный редактор на JavaScript .
36) Как запустить несколько функций в onload .
37) Как сделать перетаскиваемый DIV на JavaScript .
38) Как сделать исчезающий текст в input .
39) Как создать ассоциативный массив в JavaScript .
40) Как найти ошибку в JavaScript .
41) О работе с cookie через JavaScript .
42) Как отправить ajax-запрос на другой домен.
43) Как установить комментарии ВКонтакте на сайт.
44) Как динамически проверить форму.
45) Как обработать колёсико мыши на JavaScript .
46) Как обработать закрытие вкладки на JavaScript .
47) Когда стоит использовать jQuery .
49) Как динамически подгружать данные для select .
50) Об аналоге str_replace() в JavaScript .
51) Как изменить стиль у select .
52) Как сделать изменение размеров у div на JavaScript .
53) Как проверить: активен пользователь на странице или нет.
54) Как прокрутить скролл до низа у div .
55) Как сделать слайдер изображений на jQuery без плагинов.
56) Как воспроизвести звук на JavaScript .
57) Как изменять дизайн сайта в зависимости от времени суток.
58) Как подключить Яндекс.Карты к сайту.
59) Как проверить сложность пароля на JavaScript .
60) Как проверить занятость логина на Ajax .
61) Как определить местоположение посетителя.
62) Что такое объекты, конструкторы и прототипы в JavaScript .
63) Какие новые методы для работы с массивами появились в ES5 .
64) Что такое стандартная модель событий в JavaScript .
65) Как вешать события для старых Internet Explorer(8-) .
69) Что такое AngularJS .
70) Что такое AngularJS . Решаем проблему с валидностью.
71) Как изменить стандартный вид select на JavaScript .
72) Что такое Long-Polling , WebSockets , SSE и Comet .
73) Какие различия между объявлениями функций function declaration и function expression в javascript .
74) Какие существуют способы преобразования типов в JavaScript .
75) Как использовать анонимные самовызывающиеся функции и функции обратного вызова в JavaScript .
76) Как сделать , используя Ajax .
77) Как сделать динамическое добавление комментариев в базу данных, используя Ajax .
78) Как быстро сделать всплывающие подсказки на JavaScript .
79) Что такое трансформатор иконок - Marka .
80) Как сделать эффект при клике в материальном дизайне на JavaScript .
81) Как сделать динамические тени на JavaScript , используя библиотеку shine.js .
82) Как визуализировать данные на JavaScript .
83) Как сделать онлайн-трансляцию вашей веб-камеры на чистом JavaScript .
84) Как сделать потрясающие анимации на javascript , используя библиотеку Scripty2 .
85) Как сделать захват изображения с веб-камеры на JavaScript .
86) Что нового появилось в EcmaScript 6 .
87) Как преобразовать код с ES6 в ES5 .
88) Что такое замыкание в JavaScript .
89) Как определить, смотрит ли пользователь на страницу на javascript .
90) Библиотека javascript - underscore.js .
91) Изучаем CoffeeScript . Введение.
92) Изучаем CoffeeScript . Типы данных.
93) Изучаем CoffeeScript . Операторы.
94) Изучаем CoffeeScript . Функции.
95) Изучаем CoffeeScript . Условия.
96) Как работать со стилями в JavaScript .
97) Как работать с классами в ES 2015 .
98) Изучаем CoffeeScript . Циклы.
99) Как сделать таймер обратного отсчета на javascript в 18 строк кода.
100) Как сгенерировать случайное число в javascript .
101) Изучаем CoffeeScript . Классы.
102) Зачем нужно ключевое слово Let в ES6 .
103) Что такое стрелочные функции в ES6 .
104) Как сделать 3D модель объекта на JavaScript .
105) Что такое обещания в ES6 .
106) Как работать с хранилищами с использованием Basil.js .
107) NodeJS . Введение.
108) NodeJS . Установка платформы.
109) Gulp . Введение.
110) NodeJS . Движок V8.
111) Gulp . Установка и настройка.
112) NodeJS . Глобальный объект.
113) NodeJS . Как работают Function Expression .
114) NodeJS . Модули.
115) NodeJS . Шаблоны модулей.
116) NodeJS . Обработчик событий.
117) NodeJS . Запись и чтение файлов.
118) Gulp . Структура проекта и работа задач.
119) Gulp . Наблюдение за изменениями в файлах.
120) NodeJS . Создание и удаление директорий.
121) NodeJS . Клиенты и серверы.
122) NodeJS . Как создать сервер.
123) Как изучить JavaScript быстрее.
124) Как визуализировать данные и рисовать на JavaScript .
125) NodeJS . Что такое потоки и буферы.
126) NodeJS . Как считывать данные с потока.
127) NodeJS . Как записывать данные в поток.
128) Анимация элементов при прокрутке страницы на чистом JavaScript .
129) NodeJS . Что такое pipe().
130) NodeJS . Потоковый вывод HTML страницы.
131) NodeJS . Как отправить данные в формате JSON.
132) Что такое SPA в веб-разработке.
133) NodeJS . Навигация по страницам.
134) NodeJS . Что такое NPM.
135) NodeJS . Как работать с файлом package.json.
136) NodeJS . Пакет Nodemon.
137) NodeJS . Начинаем работу с Express.
138) NodeJS . Параметры маршрутизации в Express.
139) NodeJS . Template Engine. Часть 1.
140) NodeJS . Template Engine. Часть 2.
141) NodeJS . Как собрать шаблон из нескольких частей.
142) NodeJS . Что такое Middleware и статические файлы.
143) NodeJS . Что такое Query Strings.
144) NodeJS . Как обрабатывать POST запросы.
145) NodeJS . Как создать "список дел ". Часть 1.
146) NodeJS . Как создать "список дел ". Часть 2.
147) NodeJS . Как создать "список дел ". Часть 3.
148) Как правильно обрабатывать ошибки в JavaScript .
149) Как использовать методы объекта JSON .
150) Как использовать циклы: for...in и for...of в JavaScript ES6.
151) Что такое метод querySelector в JavaScript .
152) Как объявлять константы в JavaScript ES6 .
153) О JavaScript const и объектах .
154) Об использовании инструкции "use strict" в JavaScript . Часть 1.
155) Об использовании инструкции "use strict" в JavaScript . Часть 2.
156) Что такое деструктурирующее присваивание в JavaScript ES6.
157) Как деструктурировать объекты в ES6 .
158) Зачем нужны cтроковые шаблоны в JavaScript ES6 .
159) Как сделать меню аккордеон на JS .
160) Как сделать всплывающую форму .
161) Как сделать модальное окно на CSS + JS .
162) Как сделать прогресс бар на CSS + JS .
163) Как сделать вкладки в HTML .
164) Как получить input в JavaScript (1 часть).
165) Как вывести результат в JavaScript (2 часть).
166) Как вывести текст в JavaScript .
167) Какие есть примеры If-Else в JavaScript .
168) О способах объявления переменных (var, let, const) в JS .
169) Какие есть примеры цикла for в JavaScript .
170) Как создать и вывести массив в JS .
171) Какие бывают методы массива в JS .
172) Понятиях функции (return, параметры) в JS .
173) Как получить элемент в JS .
174) Что такое ассоциативный массив в JS .
175) Как добавить класс по клику в JavaScript .
176) Как сделать таймер отсчета на JS .
177) Как сделать валидацию формы на JS .
178) Как показать скрытый текст на JS .
Всем привет, вот и пришло время узнать нам с Вами основы JavaScript , так как JavaScript является той технологией, с помощью которой можно организовать динамические HTML страницы у себя на сайте.
Примечание. Данный урок предназначен в большей степени для тех пользователей, которые понимают общие принципы программирования, а также знают основы HTML. Если Вы не знаете что такое тег ol и li, то Вам лучше познакомиться сначала с основами HTML . Т акже, если Вы не знаете что это за конструкция if…then…else (это общий вид), рекомендую узнать общие принципы программирования в не зависимости от языка программирования. Только в этом случае можно начать изучать JavaScript. И этот урок будет для Вас максимально полезен.
Основы JavaScript — теорияИ начнем как обычно с основ, т.е. с определения, что такое JavaScript? JavaScript – это скриптовый язык программирования, код которого выполняется на стороне клиента (пользователя ). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.
Зачем нужен JavaScript?А зачем Вы спросите организовывать динамические страницы?
Во-первых , это красиво, удобно и современно.
Во-вторых, для того чтобы сделать любое изменение на сайте необходимо перезагрузить страницу, при этом у сервера будут отниматься ресурсы, а теперь представьте что у Вас посещаемый сайт и таких обращений очень много, Ваш сервер будет просто перегружен. А так как JavaScript — это клиентская технология, обращения к серверу не нужны. Вся программа на JavaScript будет выполняться непосредственно у Вас на компьютере или на компьютере пользователя, который зашел к Вам на сайт.
Теперь поговорим конкретней для чего можно использовать JavaScript у себя на сайте? Например, для динамически выпадающего меню или появления, исчезания каких-то элементов управления. В общем можно сделать практически все что угодно.
Сейчас давайте разберемся с принципами этого языка программирования. JavaScript не строго типизированный язык программирования. Точку с запятой в конце каждой строки можно не ставить, но лучше ставить, для того чтобы самим лучше понимать и читать код, но если Вы вдруг забыли поставить точку с запятой, то никакой ошибки не будет в отличие, например, от языка PHP.
В процессе формирования HTML страницы браузером, сам браузер не только отрисовывает ее, но и формирует так называемое дерево элементов, которое состоит из узлов. А каждый узел формируется на основе кода HTML. Исходя из всего сказанного, можно сказать, что JavaScript может изменять это дерево и соответственно изменять сам код HTML, а как следствие изменять отображение HTML страницы в браузере. Под изменением дерева элементов понимается как само изменение некоторых узлов, так и удаление, добавление этих самых узлов. Чтобы было понятней, узел формируется на основе элементов в HTML, другими словами, тегов или самого содержимого, т.е. текста. Например, следующий код HTML можно отобразить в виде дерева элементов.
Код HTML:
Привет
Узлы этого кода:
Корневой Узел – html
Дочерний Узел узла HTML — body
Дочерний Узел узла body – p
Дочерний Узел узла p — сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста ).
Надеюсь с этим понятно, перейдем непосредственно к синтаксису и написанию первых программ на JavaScript.
По началу мне показалось, что JavaScript очень схож, с серверным языком программирования PHP, но это только в некоторых конструкциях, да, кстати, он также схож и с просто языком программирования JAVA, но на самом деле схоже написание нескольких конструкций и называние этих языков, но в остальном, имеется в виду в принципах программирования, это две разные вещи. Кстати, JavaScript никак не связан с языком JAVA, если только названием, поэтому не путайте JavaScript — это один язык программирования, а Java — это совсем другой. Но почему его назвали именно JavaScript? Да потому что в то время, когда разрабатывали JavaScript, был сильно популярен язык Java, и поэтому разработчики JavaScript решили переименовать свой язык LiveScript (так он изначально назывался ) в JavaScript, а также изменили написание базовых конструкций, похожих на Java. Кстати, JavaScript официально называется ECMAScript , существует одноименный стандарт. Это для того чтобы не было проблем с владельцами торговой марки Java. Таким образом, JavaScript и JAVA — это совершенно два разных языка программирования. А почему у всех на устах название JavaScript? Да потому что просто так привыкли, и все называют язык ECMAScript языком JavaScript.
Пример кода JavaScriptХватит лирического отступления от сути нашего вопроса, перейдем к тому, как нам изменять эти самые узлы в этом дереве. Как обычно мы это сделаем на примере. Ниже у нас есть небольшой список, как нам в него добавить (или удалить ) еще несколько значений? Попробуйте нажать «Добавить в список » и у Вас откроется окно для ввода, введите название нового пункта и нажмите OK. Как все это происходит, давайте разбираться.
Сам пример:
Код JavaScript:
//пишем функцию добавления нового пункта в списке function addLi() { var stroka = prompt("Введите название строки:", "");//для ввода названия новой строки if (stroka){ var ol = document.getElementById ("spisokst");//находим наш список var li = document.createElement("LI");//создаем новый элемент списка ol.appendChild(li);//присваиваем нашему списку новый элемент var text = document.createTextNode(stroka);//создаем новый узел текст li.appendChild(text);//присваиваем этот текст нашему новому пункту списка } } //пишем функцию удаления пунктов из списка function deleteLi() { var ol = document.getElementById ("spisokst");//находим наш список var lastLi = ol.lastChild;//заводим переменную и храним в ней последний элемент нашего списка //проверяем на наличие нашего элемента, исключая пробелы, табуляции и комментарии while (lastLi && lastLi.nodeType != 1){ lastLi = lastLi.previousSibling; } if (lastLi){ lastLi.parentNode.removeChild(lastLi);//удаляем пункт списка, //если конечно в списке еще что-то осталось } }
Код HTML:
| Добавить в список | Удалить из списка |
В самом коде я написал комментарии, поэтому я думаю проблем возникнуть не должно, что для чего. Но я все равно поясню общую картину.
У нас есть некий список, помеченный id = spisokst, для того чтобы нам было его легче найти, из JavaScript. Затем мы пишем две функции на javascript:
1. addLi() –для добавления новых строк.
В функции addLi мы просим пользователя ввести название новой строки с помощью встроенной функции prompt, и помещаем это название в переменную stroka (как Вы уже, наверное, поняли, переменные объявляются с помощью оператора var ).
Затем с помощью метода getElementById объекта document, находим нужный нам id списка.
Потом с помощью метода createElement все того же объекта document, создаем элемент LI (Вы, наверное, заметили, что при создании элемента, его название пишется с большой буквы ).
Затем мы создаем новый узел текст и передаем ему значение, которое ввел пользователь в нашу переменную stroka.
И снова присваиваем, только уже элементу li, новое его значение (или его дочерний узел, т.е. текст ) с помощью метода appendChild.
2. deleteLi() – для удаления этих строк.
Здесь мы также находим наш список с помощью метода document.getElementById и передаем ему значение spisokst.
Затем заводим новую переменную lastLi и присваиваем ей значение последнего пункта в нашем списке (ol.lastChild).
Здесь существует небольшая проблема, по стандарту при формировании страницы HTML все пробелы, табуляции, комментарии в коде HTML учитываются, но не выводятся на экран, поэтому запомните, при обращении к последним элементам, какого-нибудь узла, там может оказаться пробел, табуляция или комментарии, поэтому результат может немного отличатся от действительного, например, если бы я здесь не учел этого, то у меня пункты в списке удалялись через один или, в некоторых случаях, через два клика на кнопку «Удалить из списка » и чтобы этого избежать я проверял, что находится в последнем узле. Если это пока не понятно, можете не запоминать:)
3. Также хочу отметить, что функционал кнопок также реализован на javascript путем обработки событий, например, при клике (событие — onClick=»javascript:addLi()») на кнопку «Добавить в список » запускается функция addLi(), а при клике на кнопку «Удалить из списка » запускается функция deleteLi(). Остальное сделано для визуальных эффектов, пока это можете не запоминать. Например, событие onmouseover означает, что при наведении курсора мыши будет что-то выполняться.
Надеюсь, сегодняшний урок был Вам полезен и интересен, в следующих уроках будем рассматривать уже примеры посложней.
2 голосаЗдравствуйте, уважаемые читатели. Пока кто-то истошно ищет на чем бы еще сэкономить, чтобы сохранить уровень своего благосостояния, умные люди вкладывают в себя. Они уже давно поняли, что на знании технологий можно неплохо зарабатывать.
Как именно? У меня примерно 100 статей в блоге, посвящено этому. К примеру, « » или « ». Что уж говорить о тех, кто собирается заняться чем-то серьезным? Компьютерная грамотность среди населения растет, а вместе с ней и количество обучающих материалов. Осталось лишь найти лучшие.
Сегодня мы поговорим про JavaScript уроки для начинающих. Зная этот язык программирования, вы уже сможете искать клиентов и зарабатывать. Для кого-то это станет очередной ступенью к успеху в IT-индустрии.
Из сегодняшней статьи вы узнаете где можно научиться кодить, получите подсказку как сделать это максимально эффективно и быстро или же бесплатно. У каждого человека свои приоритеты, так что я постараюсь реализовать надежды каждого найти в этой публикации нечто полезное.
Вопреки обычаю не стану долго ходить вокруг да около. Информации много. Приступим.
Бесплатные занятия по JavaScriptФинансовый вопрос для множества начинающих программистов имеет первостепенное значение. Это вполне логично. Интернет изначально создавался как база знаний, в которой каждый может найти интересующую информацию. «С чего это вдруг я должен платить?», — вполне естественный вопрос.
К сожалению, ответ на него тоже незатейливый – качество. Слишком мало у нас в стране талантливых и бескорыстных людей, готовых предоставить свое время бесплатно, но не стоит расстраиваться.
К счастью, существуют всякие акции, бонусы и курсы, созданные для повышения PR разработчиков. Малоизвестные школы создают материалы, но первое время, ради отзывов и рецензий, готовы предоставлять их бесплатно. Нужно только попасть в нужное место и найти лучшее для этого время. Мне удалось отыскать неплохой вариант, которым я с удовольствием с вами сейчас поделюсь.
Если вы ничего не смыслите в JS (это всемирное сокращение JavaScript), могу предложить подборку видео с YouTube. Это вводный курс для обучения с нуля, созданный онлайн школой Хакслет.
Вы также можете получить курс «Основы программирования » с заданиями на официальном сайте компании. В 17 часов на обучение входят 27 уроков и 21 практическое упражнение.
После того, как основы будут изучены, можно перейти к следующему шагу «JS: подготовка к работе ». Доступ также предоставляется бесплатно.
Естественно, сам я этот курс не проходил, а потому не могу гарантировать вам качество и рассказать про какие-то особенности обучения. Хакслет появился сравнительно недавно и позиционирует себя как международная команда специалистов, занятых обучением людей с нуля до профессионального уровня.
Англоязычные тексты, курсы, отсылки к знакомым ресурсами типа Лайфхакер и Хабра внушают доверие. Однако, основным преимуществом, на мой взгляд, пока является бесплатность.
Возможно, чуть позже компании удастся проявить себя, доказать свою значимость в этом мире, показать уровень выпускаемые специалистов и добиться славы, успеха и тому подобного.
Если нет желания тратить время и изучать так много, можете «выкупить» только ту информацию, что касается JS: «JavaScript. Уровень один» и «JavaScript. Уровень два». Правда, думаю, что в этом случае о стажировке придется забыть. Эту информацию следует уточнить у разработчиков.
Вот в принципе и все. Желаю вам всего доброго. Не забывайте подписываться на мою группу Вконтакте , чтобы знать о заработке в интернете чуть больше. До новых встреч.
На данной странице размещается начало учебника JavaScript для новичков. Для его освоения вам необходимо иметь хотя бы минимальные знания HTML и CSS. Обратитесь к учебнику HTML и CSS для новичков для их получения (для изучения JavaScript вам нужно пройти хотя бы 3-4 урока минимум).
Язык JavaScript предназначен для выполнения в браузере наряду с HTML и CSS. Но, если эти языки предназначены для верстки структуры сайта, то JavaScript позволяет "оживлять" web-страницы - делать их реагирующими на действия пользователя или демонстрировать некоторую динамичность (к примеру, смена картинок в блоке или красивые плавно выпадающие менюшки).
Итак, давайте без лишних слов приступим к изучению этого, бесспорно, полезного языка.
Как запустить JavaScriptНаписать и запустить JavaScript можно двумя способами: первый заключается в том, что мы пишем код прямо на HTML странице внутри тега :
Это заголовок тайтл var name = "Дима"; alert("Привет, "+name);
Тег можно располагать в любом месте страницы - как в , так и в .
Второй вариант заключается в том, что JavaScript код хранится в отдельном файле (наподобие CSS) и подключается тоже с помощью тега с атрибутом src , в котором указывается путь к файлу со скриптом:
Это заголовок тайтл Это основное содержимое страницы.
В дальнейшем я не буду расписывать то, как подключается JavaScript, а буду просто писать HTML код в одном блоке, а JavaScript код - в другом.
Поиск ошибок в кодеПосмотрите следующее видео, в котором я показываю, как работать с отладчиком, который показывает ошибки JavaScript, и консолью:
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
AJAX- урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
Это вводный курс по 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», который при установке туда курсора будет автоматически исчезать, чтобы не мешать пользователю:
Как видите, нигде специально не обозначено, что это JavaScript, но браузеры это понимают и обрабатывают соответственно написанным командам.
Однако JavaScript активно использует те же символы, что применяются в HTML. Например, угловые скобки или прямые кавычки. Чтобы браузер не ошибся в интерпретации этих знаков, обычно сценарии записываются между специальными тегами:
2. Чуть более крупный код сценария JavaScript можно добавить непосредственно в том месте страницы, где ему надлежит срабатывать. Как было указано выше, его мы обрамляем тегами .
Но это не всегда удобно, а в некоторых случаях и чревато.
К примеру, если пользователь отключил в своем браузере работу скриптов, то страница может «зависнуть» на этом месте и не загрузиться полностью. Поэтому обычно рекомендуется размещать скрипты в самом низу страницы перед закрывающим тегом . В этом случае, даже если скрипт не сработает, то сама страница загрузится целиком и без лишних задержек.
3. Самый правильный способ подключения скриптов JavaScript - это вынести их в отдельный файл с расширением.js и подключить к странице посредством ссылки, как и в случае с листом стилей CSS, вынесенным в отдельный файл. Пример:
На этом ознакомительный экскурс в JavaScript заканчиваем. В следующий раз напишем наш первый сценарий на этом замечательном языке. Подпишитесь на обновления блога Вебсовет, чтобы ничего не пропустить!
