СОДЕРЖАНИЕ

Введение в Web-программирование
Введение в JavaScript
Общее описание JS
Синтаксис
Примеры

ПОНЯТИЕ „WEB-ПРОГРАММИРОВАНИЕ”

В общем предполагает программирование сайтов для Интернета (глобальная сеть) или

ОБЛАСТИ ПРИМЕНЕНИЯ ВЕБ-ПРОГРАММИРОВАНИЯ

Веб-программирование относится к разработке статических сайтов (HTML+CSS), которые, обычно

Веб-программирование относится и к разработке динамических сайтов – сложные web-приложения или

КЛИЕНТ-СЕРВЕРНАЯ МОДЕЛЬ

Клиент-сервер  это вычислительная или сетевая архитектура, в которой задания или

КЛИЕНТ-СЕРВЕРНАЯ МОДЕЛЬ

Примеры:
Интернет-банкинг
Проверка эл. почты
google-translate

WEB-СКРИПТЫ

Web-скрипт это программные коды для компьютера созданные с целью динамизации Web-страницы
Пример

WEB-СКРИПТЫ

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

„CLIENT-SIDE” ПРОГРАММИРОВАНИЕ

Клиентские скрипты выполняются на стороне клиента, веб-браузером пользователя
Клиентские скрипты

DHTML

Программирование на стороне клиента является важной частью концепта Dynamic-HTML (DHTML)
DHTML

ДИНАМИЧЕСКИЕ WEB-СТРАНИЦЫ

Динамическая страница это веб-страница, сгенерированная программно, в отличие от статичной страницы,

SERVER-SIDE ПРОГРАММИРОВАНИЕ

Сценарии, предназначенные для выполнения на стороне сервера, располагаются на сервере
Принимая

SERVER-SIDE ПРОГРАММИРОВАНИЕ

Скрипты server-side выполняются на сервере, и генерируют одни и те

JAVA SCRIPT - ОБЩЕЕ

JavaScript является языком программирования (один из самых популярных),

ИСПОЛЬЗОВАНИЕ JAVA SCRIPT

DOM HTML (Document Object Model) это официальный стандарт консорциума W3C, используемый

ПРИМЕР ИЗМЕНЕНИЯ КОНТЕНТА HTML-ЭЛЕМЕНТА

Пример изменения

РЕЗУЛЬТАТ ПРИМЕРА

До нажатия кнопки:

После нажатия кнопки:

ИСПОЛЬЗОВАНИЕ JAVA SCRIPT

Пример изменения HTML-атрибутов

РЕЗУЛЬТАТ ПРИМЕРА

До нажатия:

После…:

ИСПОЛЬЗОВАНИЕ JAVA SCRIPT

Изменение стилей CSS в HTML-документах

РЕЗУЛЬТАТ ПРИМЕРА

До нажатия кнопки:

После:

ДРУГИЕ ИСПОЛЬЗОВАНИЯ JAVA SCRIPT

Проверка ввода данных
Вставка даты, дня недели, времени и

Тег „SCRIPT”
1. Используется для вставки JavaScript-ов

или
2. Используется для определения

ВОЗМОЖНОСТИ ОПРЕДЕЛЕНИЯ И ВСТАВКИ СКРИПТОВ

JavaScript-ы можно поместить за пределами (вне) HTML-документа
Представляют

ПРИМЕР ОПРЕДЕЛЕНИЯ ВНЕШНЕГО СЦЕНАРИЯ

Файлы со сценариями (.js) не содержат тег


Файл .js:
function functie() {document.getElementById("et").style.fontSize = "25px";}

ПРИМЕР ОПРЕДЕЛЕНИЯ ВНЕШНЕГО СЦЕНАРИЯ

Файл .html, тег

Пример изменения контента

JavaScript может изменить контент какого-то HTML-элемента:

Посмотри результат!

ВНУТРЕННИЕ JAVASCRIPT-Ы

Определяются при помощи тега

Пример изменения контента

JavaScript может изменить контент какого-то HTML-элемента:

Посмотри результат!

ПРИМЕР ОПРЕДЕЛЕНИЯ ВНУТРЕННЕГО СЦЕНАРИЯ

Пример изменения

ВЫХОДЫ В JAVASCRIPT

JavaScript не имеет специальных функций для печати или представления

ПРИМЕР МАНИПУЛИРОВАНИЯ ВЫХОДОМ

Нажми на кнопку чтобы увидеть результат манипулирования

РЕЗУЛЬТАТ ПРИМЕРА

После нажатия кнопок:

ВЫВОД ДАННЫХ НА ЭКРАН

Метод write() выводит HTML выражение или JavaScript код

ПРИМЕР ВЫВОДА ДАННЫХ НА ЭКРАН

…

Текущая дата:

Или:
…

ВВОД КОМЕНТАРИЕВ

JavaScript является языком для написания сценариев
Операторы в JavaScript это

ПЕРЕМЕННЫЕ В JAVASCRIPT

В JavaScript-е переменные представляют „контейнеры” для различных значений
В JS

ПЕРЕМЕННЫЕ В JAVASCRIPT. II

Переменным можно присвоить значения или выражения
Пример: cost=200; или

ПРИМЕР ОПРЕДЕЛЕНИЯ ПЕРЕМЕННЫХ В JS

Определение переменных

Результат:

ОПЕРАЦИИ В JS

Над числовыми переменными можно применить операцию сложения
Пример:
var adaos

ДЛИНА ТЕКСТОВОЙ СТРОКИ

В JS для определения длинны текстовой строки используется свойство

ДРУГИЕ ТИПЫ ДАННЫХ. Массивы в JS

Значения массива в JS включаются между

ФУНКЦИИ В JS

В JS функция это блок кодов написанный с целью

ПРИМЕР ОПРЕДЕЛЕНИЯ ФУНКЦИИ

Параметры или аргументы функции используются в качестве местных переменных,

ВЫЗОВ ФУНКЦИИ

Программный код, определенный внутри функции, выполнится при вызове функции
Функцию можно

Объекты в JS

Язык программирования JS это ОО зык программирования
Любой объект характеризуется

СОБЫТИЯ В JS

HTML-события представляют „что-то” что происходит с HTML-элементами страницы –

ПРИМЕР КОНТРОЛЯ СОБЫТИЯ

Нажми чтобы узнать время

Внимание в использование

ПРИМЕР КОНТРОЛЯ СОБЫТИЯ. II

В предыдущем примере JS изменил контент HTML-элемента с

ПРИМЕР КОНТРОЛЯ СОБЫТИЯ. III

События можно контролировать используя функции



Отправить данные

ПРИМЕР КОНТРОЛЯ СОБЫТИЯ. IV

… Нажми чтобы узнать время

ПРИМЕР С 2-мя СОБЫТИЯМИ

Aici va fi afisata data

Aici va fi afisat un mesaj de salutare

РЕЗУЛЬТАТ

МЕТОДЫ JS ДЛЯ РАБОТЫ С СИМВОЛЬНЫМИ СТРОКАМИ

Метод indexOf() возвращает индекс (позицию),

РЕЗУЛЬТАТ ПРИМЕРА

МЕТОДЫ JS ДЛЯ РАБОТЫ С СИМВОЛЬНЫМИ СТРОКАМИ

Метод search() ищет подстроку в

МЕТОДЫ JS ДЛЯ РАБОТЫ С СИМВОЛЬНЫМИ СТРОКАМИ

Метод lastIndexOf() возвращает индекс (позицию),

РЕЗУЛЬТАТ ПРИМЕРА

МЕТОДЫ JS ДЛЯ РАБОТЫ С СИМВОЛЬНЫМИ СТРОКАМИ

Чтобы извлечь подстроку из строки

ПРИМЕР С МЕТОДОМ „SLICE”

Красное покрывало покрывало другое покрывало...

ПРИМЕР С МЕТОДОМ „SUBSTR”

Красное покрывало покрывало другое покрывало...

МЕТОДЫ JS ДЛЯ РАБОТЫ С СИМВОЛЬНЫМИ СТРОКАМИ

Метод Replace() заменяет одно значение

МЕТОДЫ JS ДЛЯ РАБОТЫ С СИМВОЛЬНЫМИ СТРОКАМИ

Методы для преобразования строчных букв

РЕЗУЛЬТАТ ПРИМЕРА

После нажатия кнопки:

МЕТОДЫ JS ДЛЯ РАБОТЫ С СИМВОЛЬНЫМИ СТРОКАМИ

Метод concat() – объединение /

РЕЗУЛЬТАТ ПРИМЕРА

После нажатия кнопки:

МЕТОДЫ JS ДЛЯ РАБОТЫ С СИМВОЛЬНЫМИ СТРОКАМИ

Чтобы извлечь символ из текстовой

РЕЗУЛЬТАТ ПРИМЕРА

Применив метод charCodeAt(0), для этого примера

ПРЕОБРАЗОВАНИЕ ТЕКСТОВОЙ СТРОКИ В МАССИВ

Преобразование производится используя метод split()
Пример:

Красное

РЕЗУЛЬТАТ ПРИМЕРА

…document.getElementById("et1").innerHTML = vector[4];}…

Результат:

ОПРЕДЕЛЕНИЕ ТИПА ПЕРЕМЕННОЙ

Для определения типа переменной используется метод typeof()
Пример:

Красное покрывало

ОПРЕДЕЛЕНИЕ ТИПА ПЕРЕМЕННОЙ

…var vector = sir.split(" ");
var varsta = 56;
document.getElementById("et1").innerHTML

JS ФУНКЦИЯ isNaN()

В JS есть резервированное слово NaN, которое указывает если

ПРИМЕР NaN

Красное покрывало покрывало другое покрывало...

ПРИМЕР isNaN()

…

Красное покрывало покрывало другое покрывало...

document.getElementById("et1").innerHTML = isNaN(vector);

JS МЕТОДЫ ДЛЯ РАБОТЫ С ЧИСЛАМИ

Все методы используемые для работы с

JS МЕТОДЫ ДЛЯ РАБОТЫ С ЧИСЛАМИ

Метод toFixed() возвращает строку с определенным,