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

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

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

• Что же из себя представляет язык программирования JavaScript, и какая разница между браузерными сценариями и сценариями сервера.
• Основы синтаксиса JavaScript.
• В чем состоят особенности работы с переменными (как их объявлять и автоматически определять их тип).
• Какими способами можно вызывать JavaScript-сценарии.

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

Начинайте просмотр видео.

Приступаем к практике.

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

Благодаря этой задаче вы:

• Освоите getElementById - важный метод связи.
• Сможете попрактиковаться в использовании переменных.
• Получите большее понимание объектно-ориентированности JavaScript. Чтобы освоить это еще лучше, я покажу, как решить еще одну задачу, условие которой будет изменить цвет рамки окошка поля ввода, кликнув на него.
• Эти задачи могут быть решены двумя способами. Первый способ – использовать функции, при этом мы лучше изучим синтаксис. Второй способ – применить директиву this, благодаря чему мы узнаем больше информации об этой полезной вещи.

Идем дальше! Этот урок расскажет вам об оставшихся основных конструкциях JavaScript, после освоения которых, а также воспользовавшись полученными из прошлого урока знаниями, вы уже сможете сами создавать несложные программки.

В третьем видеоуроке вас ждет:

• Знакомство с оператором условия if – else.
• Общая информация о циклах for и while, которые непременно потребуются вам для написания программ.
• Массивы, которыми должен уметь пользоваться каждый настоящий программист.
• Но главное в этом видеоуроке - это знакомство с методами и источниками получения информации о свойствах элементов, которой вам не хватает.

Этим четвертым уроком мы продолжаем изучение видеокурса по JavaScript. Мы начинаем углубляться в изучение этого языка и познавать все его сложности.

Описание видеоурока:

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

Эта тема крайне важна, так как объектно-ориентированная парадигма значительно упрощает все сложные программы. В случае если в ваши планы не входит создание сложных программ, то для вас изучение ООП является не обязательным. Но следует заметить, что, например, API Яндекс.Карт применен именно ООП JavaScript, и его понимание существенно облегчит вашу работу с картами Яндекса. Да и вообще, изучать JavaScript и не затронуть его ООП-возможности – это непозволительная роскошь!

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

Первая часть

Вторая часть

Третья часть

Четвертая часть

В сегодняшнем видеоуроке мы поговорим о не менее важном моменте языка JavaScript – DOM-моделях.

DOM-модель - это довольно сложная для понимания парадигма.

Этот урок максимально просто и доступно рассказывает о принципах DOM.

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

С помощью регулярных выражений осуществляются все манипуляции с подстроками в тексте.

В видеоуроке будет показано, как на стороне пользователя можно проанализировать правильность ввода e-mail адреса.

После того, как вы просмотрите это видео, конструкция /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,4})+$/ больше не будет вас пугать, и из ребуса превратится во вполне понятный текст.

Ну а теперь приступим!

Этот урок расскажет вам о cookies в JavaScript.

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

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

Подробнее обо всем этом вы узнаете, посмотрев этот видеоурок.