Преобразование типов данных. Правила объединения JavaScript и HTML-код

Правила объединения JavaScript и HTML-код

1. Операторы JavaScript и команды HTML можно чередовать в произвольном порядке.

Способы размещения JavaScript в HTML документе:

· сценарий находится в отдельном файле (файл должен иметь расширение js).

· сценарий находится между тегами <head> и </head>;

· сценарий находится после тега <body>;

_____________________________________________

Правила вставки JavaScript в HTML-страницу:

--------------------------------------------------------------------

1. Подключаем файл:

<html>

<head>

</head>

<body >

…

</body>

<html>

-----------------------------------------------------------------------

2. Вставляем программу JS в разделы <head> и <body>:

<html>

<head>

<! -- function hello()

{ alert (“ Вас приветствует JavaScript ”) ; }

-->

</script>

</head>

<body >

</form>

</body>

<html>

Синтаксис JavaScript

Синтаксис JavaScript наследует синтаксис конструкции С и С++

Основные правила создания программ на JavaScript

· “Тело” cкрипта в HTML-странице ограничивается тегами

…

</script>

· В JavaScript не обязательно указывать тип переменных;

· В теле скрипта может использоваться функции;

· Одна функция может вызывать другую;

· Переменные, объявленные до объявления функций являются глобальными (т. е. попадают в область видимости каждой функции.

· Переменные объявленные внутри функции, являются локальными (т. е. значения таких переменных доступны только в пределах той функции, в которой данные переменные объявлены);

· Если скрипт должен выполнятся при определенном событии (выбор пункта меню и т. д.), то “тело” скрипта записывается как комментарий HTML-странице – начало комментария открывает тег <! -- , завершение комментария – тег --> ( Если теги комментариев убрать, то скрипт будет выполнятся немедленно при загрузке документа).

Комментарии

JavaScript игнорирует все строки между /* и */, а также остаток строки после //.

Строковые литералы

Строки заключаются в двойные кавычки.

Для включения в строку управляющих символов (например, перевода строки) используется обратная косая черта \ совместно с зарезервированным символом.

Наиболее важные из них:

\n перевод строки

\t табуляция

\b возврат на символ со стиранием

\\ обратная косая черта

\r возврат каретки

\’ одинарная кавычка

\’’ двойная кавычка

Булевы литеры имеют значения true или false

Целые литералы

Целые числа записываются без десятичной точки.

Шестнадцатеричные – с префиксом 0х

Пример: 0х10 соответствует десятичному числу 16

Восьмеричные числа начинаются с нуля 0

Пример: 010 соответствует десятичному числу 8

Литералы с плавающей точкой

Записываются с десятичной точкой (15.0).

В экспоненциальной форме используется буква Е (15.3Е-2 или 1.59Е6).

Требования к созданию имен переменных, объектов и функций

Правила образования имен переменных, объектов или функций

· имена не могут начинаться с цифры;

· имена не могут содержать пробел;

· имена не могут содержать дефис;

· имена не могут иметь знаки пунктуации;

· допустимы специальные символы # или _ ;

· имена не должны совпадать с ключевыми словами.

Арифметические операции

Арифметические операции аналогичны языку PHP

2 + 2

b * m

i + +

и т. д.

Операции сравнения

Проверка эквивалентности = = , не эквивалентности !=

Сравнения чисел >, < , <=, >= эквивалентны языку PHP

Булевы операции

Логические операции И (&&) и ИЛИ ( || )

Конкатенация строк

Символ + используется как для конкатенации строк, так и для арифметического сложения.

Фигурные скобки

В фигурные скобки заключаются блоки операторов (обычно в операторах цикла if – else).

Оператор if – else

В JavaScript используется стандарт языка С:

if (x==0) {

// Выполняется при х = 0.

}

if (y != 3) {

// Выполняется, если у не равно 3.

}

else {

// Выполняется при y = 3.

}

Цикл for

Для оператора цикла используется стандарт языка С

for ( i = 3; i <100; i++) do {

fred [ i ] = 0;

}

Перед началом цикла инициализируется управляющая переменная (i = 3).

После проверки условия (i <100) выполняется тело цикла, затем управляющая переменная увеличивается на единицу ( i++ ). Так продолжается до тех пор, пока она не станет больше 100.

Цикл while

Цикл while полностью соответствует синтаксису языков С и PHP:

while (i<100) {

// тело цикла

i++ ;

}

Оператор break

Досрочный выход из цикла и переход на следующий за циклом оператор.

Оператор continue

Пропускает остаток цикла. Цикл начинается заново с измененной управляющей переменной.

Оператор return

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

Разделитель операторов

Разделителем команд является символ новой строки.

Можно использовать и знак ; для тех же целей.

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

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

x = 10 ;

x = 1.34 ;

y = “Высота” ;

y = 2 ;

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

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

Определение функции

Функции в JavaScript определяются аналогично языку PHP.

function foo(bar1 , bar2)

{

var bar = bar1 + bar2;

document.write (bar);

}

Преобразование типов данных

…

Объектно-ориентированное программирование в JavaScript

Создание объектов

Объекты создаются конструкторами так же как и в Java и в PHP по ключевому слову new, за которым следует обращение к методу (функции JavaScript) которая в свою очередь называется конструктором.

Пример:

a = new Array (3)

Создается новый объект a с помощью функции конструктора Array и параметром 3.

Внутри метода на объект ссылается ключевое слово this. При этом не требуется отдельного определения типа объекта и его полей. Поля объекта называются свойствами (properties)

<html>

<head>

<title> Создание объекта </title>

<! - -

function Person (birthyear , name) {

this . name = name ;

this . birthyear = birthyear ;

this . age = 2013 - birthyear ;

return this ;

}

a = new Person(1993, “Петрова”) ;

document . write(“ Возраст “ + a.name + a.age + “лет.”) ;

- ->

</script>

</head>

<body>

</body>

</html>

____________________________________________

В примере по команде document.write( ) на экран выводится строка

Возраст Петрова 20 лет

Доступ к объектам

Все объекты доступны при помощи “точечной ” нотации.

Метод Person работает как конструктор объекта.

Используется “точечная” нотация для указания составных частей объекта. Например, если объект document имеет поле name, то доступ к полю записывается как document. name.

Массив как объект

При создании массива необходимо задать размер (количество элементов в массиве):

Массив рассматривается как объект для хранения набора других объектов с числовыми метками (индексами).

Создание массива

Массив, как и любой другой объект, создается командой new.

В языке JavaScript нумерация элементов массива начинается с единицы, а в нулевом элементе храниться количество элементов (размер) массива.

Элемент a [ 0 ] доступен так же, как и остальные элементы, т. е. допустима команда:

a [ 0 ] = 14 ;,

но при этом истинное значение размера массива будет утеряно.

Для создания массива необходимо явным образом вызвать функцию-конструктора

function Array(len)

{

this.length = len ;

for ( i=1 ; i< len ; i++ )

{

this[ i ] = 0 ;

}

return this ;

}

a = new Array(3) ;

a [ 1 ] = “ Петров” ;

a [ 2 ] = “Иванов” ;

a [ 3 ] = “Сидоров” ;

Обращение к элементу массива

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

Пример:

parameter = a [ 2 ] ;

В браузере иерархическая организация доступа к объектам (элементам).

Создание объекта

Объекты создаются функциями-конструкторами.

Каждый элемент объекта называется свойством (property) и добавляется в объект путем простой операции присвоения.

Пример:

function Location ( longitude , latitude )

{ входные параметры

this . lon = longitude ;

this . latitude = latitude ;

} свойства объекта

function Animal (genus , species , longitude , latitude ) {

this . genus = genus ;

this . species = species ;

this . where = new Location(longitude , latitude ) ;

}

_________________________________________________________

Пример создание нового объекта:

ti = new Animal (”Земноводный” , “ Тритон” , 153.32 , 42.93)

Свойство longitude нового объекта ti может быть получено через “точечную” нотацию как:

ti . where . longitude.

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

Встроенные объекты

Интерпретатор JavaScript браузера содержит несколько предопределенных объектов, используемых как набор стандартных функций.

№	Название встроенного в браузер объекта	Назначение
	Math	Использование математических функций
	String	Работа со строками
	Date	Работа с датами и временем

Объект Math содержит набор математических функций. Для обращения к этому методу не требуется предварительного создания объекта.

В состав объекта Math входят шесть “свойств”, ( констант )

№	Свойство	Описание константы	Значение
	Math . E	Основание натурального логарифма е	2.718
	Math . PI	Число π	3.14159
	Math . LN10	Натуральный логарифм 10	ln10
	Math . LN2	Натуральный логарифм 2	ln2
	Math . SQRT1_2	Квадратный корень из 1 / 2	√ ½
	Math . SQRT2	Квадратный корень из 2	√ 2

В число методов включены все стандартные математические функции:

№	Метод	Метод возвращает
	Math . abs	Абсолютное значение
	Math . acos	Арккосинус в радианах
	Math . asin	Арксинус в радианах
	Math . atan	Арктангенс в радианах
	Math . ceil	Округляет число в большую сторону
	Math . floor	Округляет число в меньшую сторону (отбрасывает все числа после точки)
	Math . cos	Косинус
	Math . exp	Экспоненциальная функция
	Math . log	Натуральный логарифм
	Math . max	Максимальное из двух чисел
	Math . min	Минимальное из двух чисел
	Math . pow	Степень числа по заданному основанию Math.pow(x,y) вычисляет x^y
	Math . random	Псевдослучайное число между нулем и единицей
	Math . round	Ближайшее целое
	Math . sin	Синус
	Math . sqrt	Квадратный корень
	Math . tan	Тангенс

Все функции возвращают результат с максимально возможной точностью. Округляющие функции возвращают целые значения.

Объекты String

В JavaSccript строкой считается любой текст, заключенный в двойные кавычки.

Любая строка имеет единственное свойство – длину. Доступ к длине строки можно получить следующим способом:

Таблица 4. Методы объектов String

№	Метод	Выполняемые действия
	anchor	Выводит строку на экран и делает ее якорем, для организации ссылки
	big	Устанавливает крупный шрифт
	blink	Запускает мигание текста в браузере
	bold	Устанавливает Полужирный шрифт
	charAt	Определяет первый символ в строке
	fixed	Преобразует шрифт в моноширинный
	fontcolor	Меняет цвет строки текста
	fontsize	Устанавливает размер шрифта
	index0f	Осуществляет поиск подстроки
	italics	Формирует шрифт курсив
	lastIndex0f	Осуществляет поиск подстроки, начиная с конца
	link	Создает ссылку на другую страницу
	small	Уменьшает размер шрифта
	strike	Перечеркивает текст
	sub	Выводит текст в виде нижнего (подстрочного) индекса
	toLowerCase	Преобразует строку в символы нижнего регистра
	toUpperCase	Преобразует строку в символы верхнего регистра

Большинство команд работы со строками использует метод writeln при выводе информации на страницу браузера.

Операция “+” для конкатенации строк объекту String не принадлежит.

Подробно о некоторых методах работы со строковыми объектами.

Метод anchor преобразует х в точку привязки на HTML-странице для организации ссылки.

Пример:

x = "Этот текст выводится на экран и на него можно

организовать ссылку (т. е. он является якорем).";

document . writeln (x. anchor(" web_design "));

</script>

…

<a href="# web_design ">Перейти</a>

____________________________________________________

big Команда x.big() формирует строку <big> x </big>

№	Команда	Аналог строки в HTML-документе	Выполняемые действия
	x.anchor()		Преобразует х в точку привязки на HTML-странице для организации ссылки
	x.big()	<big> x </big>
	x.blink()	< blink> x </ blink>	Мигание текста в браузере
	x.bold()	< bold> x </ bold >	Полужирный шрифт текста в браузере
	x.chartAt(i)		Определяет i-й символ в строке x. Символы в строке пронумерованы от 0 до <длинны строки> -1
	x.fixed	<tt> … </tt>	Формирует шрифт с одинаковой шириной знаков
	x.fontcolor()		Устанавливает цвет строки шрифта
	x.fontsize()		Устанавливает размер шрифта
	x.index0f(y,z)		Поиск подстроки, находит начало первого вхождения подстроки y в строке x. Поиск начинается с позиции z. Если z не задано, то с начала строки
	x.italics()	<it> … </it>	Формирует шрифт “курсив”
	x.lastIndex0f		Поиск подстроки начиная с конца строки. Аналогично команде x.index0f(y,z)
	link()		Создание ссылки на другую Веб-страницу. Требует в качестве аргумента URL для href
	x.small()	<small> … </small>	Уменьшает размер шрифта
	x.strike()	<strike> … </strike>	Перечеркивает текст
	x.sub()	<sub> … </ sub >	Выводит текст в виде нижнего (подстрочного) индекса
	x.substring(y,z)		Выделяет из строки x подстроку, расположенную между символами с номерами y и z
	x.sup()	<sup> … </ sup >	Выводит текст в виде верхнего (надстрочного) индекса
	x.toLowerCase()		Преобразует строку х в символы нижнего регистра (строчные буквы)
	x.toUpperCase()		Преобразует строку х в символы верхнего регистра (прописные буквы)

Большинство команд работы со строками использует метод writeln при выводе информации на страницу браузера.

12 3

Дата добавления: 2015-11-06; просмотров: 569;