Работа с данными в сценариях

Содержание

1. Работа с данными в сценариях
2. 6.1 Создание и использование переменныхОсобенности:автоматическое объявление переменных;динамическое изменение типа переменной.
3. Ключевое слово var var name=prompt(“Введите ваше имя”);
4. Правила именования переменных:можно использовать латинские буквы, цифры
5. В JS различают следующие типы данных:целое число;число с плавающей запятой;строка текста;логическая переменная;объект.
6. Значением целочисленной переменной могут быть положительные и
7. //Объявления переменныхvar iVal=14; //Десятичное числоvar hVal=0xE; //Шестнадцатеричное
8. Форматы представления числа с плавающей запятой: 1. Обычный2. ЛогарифмическийЛогарифмический формат имеет следующий синтаксис: #.##E??Например: 6.02Е-4число>1,0*1020число
9. Строки текста - последовательность любых символов, в
10. sVal = "В тексте мы может использовать \"кавычки\" , заключать слова в \\ или \\косые\\ скобки.";document.write(sVal);
11. Логические переменные - значения true (истинно) и
12. В зависимости от области действия различают два
13. Изменение типа переменнойКоманда typeof имя_переменной – определяет
14. Для изменения типа переменной в JS предусмотрен
15. Для выполнения обратного действия используется функция parseInt()
16. Вопрос 7.2 Выражения и операцииАрифметические ( +
17. Арифметические операции// Начальное значение счетчикаvar count=0;…. Конструкция
18. Конструкции ++count и count++ - одинаковый результат.
19. Операции присваиванияОдна и та же переменная находится слева и справа от оператора присваивания:Num=Num+5;Это выражение можно упростить:Num+=5;
20. Список операторов присваивания
21. Список операторов присваивания
22. Операции сравнения == - равенство;!= - неравенство;> - больше;>= - больше или равно;< - меньше;
23. Строковые операцииНабор методов для работы с текстом
24. Строковые операцииВсе объекты класса String содержат переменную length, в которой хранится информация о длине строки. Например:sVal=”Привет!”;alert(sVal.length);
25. Методы объекта String сoncat(str2,str3,…) Последовательно конкатенирует строки
26. Методы объекта String split(“разделитель”) Разбивает строки на
27. substring(позиция, позиция) Возвращает подстроку, заданную позициями начала
28. big() Увеличивает размер шрифта на 1bold() Устанавливает
29. Вопрос 8. Управление ходом выполнения сценарияОператор ifСинтаксис
30. Оператор switch Оператор удобно применять для анализа
31. Условный оператор?... : … Пример: определим цену билета в зависимости от возраста покупателя:price = (age
32. Организация цикловДля организации циклов в JS используются
33. Контроль за выполнением цикловbreak – прерывает цикл
34. Вопрос 10. Внутренние (встроенные) объекты языка JSВнутренние
35. Объект Date Содержит информацию о дате и
36. parameters может принимать следующие значения: пустой параметр,
37. Слайд 37
38. Слайд 38
39. theTime = new Date(); theHour =
40. Объект Math Объект Math является встроенным объектом
41. Свойствами объекта Math являются математические константы:
42. Слайд 42
43. Методы объекта Math представляют собой математические функции
44. Слайд 44
45. Слайд 45
46. Не забывайте указывать префикс Math перед методом
47. Вопрос 11. Массивы данных
48. Массивы – коллекции взаимосвязанных данных.Встроенные массивы: document.link[]document.images[]Массивы, определяемые пользователем:a=new Array();
49. Новый массив создается с помощью ключевого слова
50. Синтаксис обращения:элемент = имя_массива[индекс];Нумерация элементов массива начинается
51. Заполнении элементов массива данными1 способmonths = new
52. Увеличение размерности массиваarray1 = new Array();array1[9] = “значение последнего элемента”;
53. Значение размера массива хранится в переменной length,
54. Объект Array содержит ряд методов, которые позволяют
55. splice(индекс1, индекс2) – работает так же, как
56. reverse () – инвертирует порядок следования элементов
57. Скачать презентанцию

6.1 Создание и использование переменныхОсобенности:автоматическое объявление переменных;динамическое изменение типа переменной.

Главная
Разное
Работа с данными в сценариях

Слайды и текст этой презентации

Слайд 1

Вопрос 6. Работа с данными в сценариях JavaScript

Слайд 2
6.1 Создание и использование переменных

Особенности:
автоматическое объявление переменных;
динамическое изменение типа переменной.

Слайд 3Ключевое слово var
var name=prompt(“Введите ваше имя”); //имя пользователя
var amount=currency.value; //сумма,

взятая из поля “Сумма”
var date=new Date(); //объект текущей даты
var rate=5.05; //курс

Ключевое слово var var name=prompt(“Введите ваше имя”); //имя пользователяvar amount=currency.value; //сумма, взятая из поля “Сумма”var date=new Date(); //объект текущей

Слайд 4Правила именования переменных:
можно использовать латинские буквы, цифры и подстрочный символ;
имя

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

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

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

Слайд 5В JS различают следующие типы данных:
целое число;
число с плавающей запятой;
строка

текста;
логическая переменная;
объект.

Слайд 6Значением целочисленной переменной могут быть положительные и отрицательные целые числа.
Например,

число 14 в разных системах счисления:
в десятичной – 14;
в восьмеричной

– 016;
в шестнадцатеричной – 0хЕ.

ПРИМЕР

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

Слайд 7

//Объявления переменных
var iVal=14; //Десятичное число
var hVal=0xE; //Шестнадцатеричное число
var oVal=016; //Восьмеричное

число
//Вывод переменных в окно обозревателя
document.write("Это десятичное число: "+ iVal+"
");
document.write("Это шестнадцатеричное

число: "+ hVal+"
");
document.write("Это восьмеричное число: "+ oVal+"
");
document.write("Это сумма чисел: "+ (oVal+hVal)+"
");

………………….

//Объявления переменныхvar iVal=14; //Десятичное числоvar hVal=0xE; //Шестнадцатеричное числоvar oVal=016; //Восьмеричное число//Вывод переменных в окно обозревателяdocument.write(

Слайд 8Форматы представления числа с плавающей запятой:
1. Обычный
2. Логарифмический

Логарифмический формат

имеет следующий синтаксис: #.##E??
Например: 6.02Е-4
число>1,0*1020
число

Форматы представления числа с плавающей запятой: 1. Обычный2. ЛогарифмическийЛогарифмический формат имеет следующий синтаксис: #.##E??Например: 6.02Е-4число>1,0*1020число

Слайд 9Строки текста - последовательность любых символов, в том числе и

цифр, заключенная в кавычки или апострофы.

Чтобы ввести в текст двойные

кавычки, необходимо использовать символ \ “.

Если текст выводится в окно браузера с помощью команды document.write, то в нем для форматирования можно использовать дескрипторы HTML.

ПРИМЕР

Строки текста - последовательность любых символов, в том числе и цифр, заключенная в кавычки или апострофы.Чтобы ввести

Слайд 10

sVal = "В тексте мы может использовать \"кавычки\" ,

заключать слова в \\ или \\косые\\ скобки.";
document.write(sVal);

Слайд 11Логические переменные - значения true (истинно) и false (ложно).
Этим

переменным можно присваивать целочисленные значения:
0 будет соответствовать false,
любое другое

значение – true.

Логические переменные - значения true (истинно) и false (ложно). Этим переменным можно присваивать целочисленные значения:0 будет соответствовать

Слайд 12В зависимости от области действия различают два вида переменных:
Глобальные переменные

–созданные непосредственно в коде сценария в блоке ….
Локальные

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

В зависимости от области действия различают два вида переменных:Глобальные переменные –созданные непосредственно в коде сценария в блоке

Слайд 13Изменение типа переменной
Команда typeof имя_переменной – определяет тип переменной
Команда возвращает

текстовое значение, соответствующее типу переменной:
Number – целое число или число

с плавающей;
String – строка текста;
Boolean – логическое значение;
Object – объект;
Underfined – переменная не определена (не была создана или программа вышла за область видимости переменной).

Изменение типа переменнойКоманда typeof имя_переменной – определяет тип переменной Команда возвращает текстовое значение, соответствующее типу переменной:Number – целое

Слайд 14Для изменения типа переменной в JS предусмотрен ряд функций.
toString() –

преобразовать число в строки текста. Пример:
var iVal=5;
var sVal=iVal.toString();
В результате получим

переменную sVal, значением которой будет строка “5”.

Строковую переменную из числа можно получить, прибавив число к пустой строке:
Var sVal=’’ + iVal;

Для изменения типа переменной в JS предусмотрен ряд функций.toString() – преобразовать число в строки текста. Пример:var iVal=5;var

Слайд 15Для выполнения обратного действия используется функция parseInt() и parseFloat(), например:
var

sVal = ‘5’;
var iVal = parseInt(sVal);
var fVal = parseFloat(sVal);

Для выполнения обратного действия используется функция parseInt() и parseFloat(), например:var sVal = ‘5’;var iVal = parseInt(sVal);var fVal

Слайд 16Вопрос 7.2 Выражения и операции
Арифметические ( + - сложение; -

- вычитание; * - умножение; / - деление; % -

вычисление модуля).
Например: mod=14 % 4; в переменной mod будет сохранено значение 2.
Присваивания.
Сравнения.
Строковые.

Вопрос 7.2 Выражения и операцииАрифметические ( + - сложение; - - вычитание; * - умножение; / -

Слайд 17Арифметические операции
// Начальное значение счетчика
var count=0;
…. Конструкция с оператором цикла

или код функции обработки события
//инкрементация счетчика
count = count + 1;
Для

упрощения используются операторы инкремента:
Count++; - увеличивает значение переменной count на 1;
Count--; - уменьшает значение переменной count на 1.

Арифметические операции// Начальное значение счетчикаvar count=0;…. Конструкция с оператором цикла или код функции обработки события//инкрементация счетчикаcount =

Слайд 18Конструкции ++count и count++ - одинаковый результат.

НО:
Num1 = ++count;

//значение count увеличивается на единицу и присваивается переменной Num1
Если count=6,

то Num1 = 7
Num2 = count++; //значение count присваивается переменной Num2 после чего увеличивается на 1
Если count=6, то Num2 = 6, а count=7

Конструкции ++count и count++ - одинаковый результат. НО:Num1 = ++count; //значение count увеличивается на единицу и присваивается

Слайд 19Операции присваивания
Одна и та же переменная находится слева и справа

от оператора присваивания:
Num=Num+5;
Это выражение можно упростить:
Num+=5;

Слайд 20Список операторов присваивания

Слайд 21Список операторов присваивания

Слайд 22Операции сравнения

== - равенство;
!= - неравенство;
> - больше;
>= -

больше или равно;
< - меньше;

Слайд 23Строковые операции
Набор методов для работы с текстом -объект String.
Элементы текста

Web – страницы, текстовые переменные - экземпляры (объекты) класса string.

К методам класса String можно обращаться напрямую: строковая_переменная.метод(аргументы).

Строковые операцииНабор методов для работы с текстом -объект String.Элементы текста Web – страницы, текстовые переменные - экземпляры

Слайд 24Строковые операции

Все объекты класса String содержат переменную length, в которой

хранится информация о длине строки. Например:
sVal=”Привет!”;
alert(sVal.length);

Строковые операцииВсе объекты класса String содержат переменную length, в которой хранится информация о длине строки. Например:sVal=”Привет!”;alert(sVal.length);

Слайд 25Методы объекта String
сoncat(str2,str3,…) Последовательно конкатенирует строки в списке аргументов

со строкой, к которой был вызван метод, например: str1.concat(str2,str3,str4);

sunstr(позиция, длина) Возвращает подстроку, заданную позицией и длиной. Отсчет позиций начинается с 0

Методы объекта String сoncat(str2,str3,…) Последовательно конкатенирует строки в списке аргументов со строкой, к которой был вызван метод,

Слайд 26Методы объекта String
split(“разделитель”) Разбивает строки на массив подстрок по

позициям заданного символа разделителя. Например:
sVal=”А,Б,В,Г”;sArray=sVal.split(“,”);
document.write(sArray[0]) ; //Выведет букву А
document.write(sArray[1]) ; //Выведет букву

Б document.write(sArray.length) ; //Выведет 4

Методы объекта String split(“разделитель”) Разбивает строки на массив подстрок по позициям заданного символа разделителя. Например:sVal=”А,Б,В,Г”;sArray=sVal.split(“,”);document.write(sArray[0]) ; //Выведет букву

Слайд 27substring(позиция, позиция) Возвращает подстроку, заданную позициями начала и конца подстроки

в строке.
charAt(позиция) Возвратит символ по указанной позиции в строке
indexOf(

“подстрока”) Возвратит позицию первого вхождения подстроки в строку
lastIndexOf( “подстрока”) Возвращает позицию последнего вхождения подстроки в строку

substring(позиция, позиция) Возвращает подстроку, заданную позициями начала и конца подстроки в строке. charAt(позиция) Возвратит символ по указанной

Слайд 28big() Увеличивает размер шрифта на 1
bold() Устанавливает полужирный шрифт
fontcolor(‘цвет’) Устанавливает

цвет строки
fontsize(‘n’)Устанавливает номер размера строки от 1 до 7
italics() Задает

курсив
small()Уменьшает размер шрифта на 1
strike() Перечеркивает текст

big() Увеличивает размер шрифта на 1bold() Устанавливает полужирный шрифтfontcolor(‘цвет’) Устанавливает цвет строкиfontsize(‘n’)Устанавливает номер размера строки от 1

Слайд 29Вопрос 8. Управление ходом выполнения сценария
Оператор if
Синтаксис оператора:
if (логическое выражение)
{код,

выполняемый в случае возвращения логическим выражением значения true}
else
{код, выполняемый в

случае возвращения логическим выражением значения false}

Вопрос 8. Управление ходом выполнения сценарияОператор ifСинтаксис оператора:if (логическое выражение){код, выполняемый в случае возвращения логическим выражением значения

Слайд 30Оператор switch Оператор удобно применять для анализа переменных, которые могут

принимать более двух значений. Синтаксис:
switch (выражение или переменная) {
case значение:
строки

кода
break;
case значение:
строки кода
break;
……
default:
строки кода
break; }

Оператор switch Оператор удобно применять для анализа переменных, которые могут принимать более двух значений. Синтаксис:switch (выражение или

Слайд 31Условный оператор

?... : …

Пример: определим цену билета в зависимости

от возраста покупателя:
price = (age

т.р.”);
Если заменить эту конструкцию на if-else, получится более длинный код:
if (age<18)
price=”5 т.р.”;
else
price=”10 т.р.”;

Слайд 32Организация циклов
Для организации циклов в JS используются два оператора for

и while.

Синтаксис оператора for:
for (счетчик=нач_зн; усл_зав; приращение_сч)
{тело цикла}
Синтаксис while
while (логическое

выражение)
{тело цикла}

$Организация цикловДля организации циклов в JS используются два оператора for и while.Синтаксис оператора for:for (счетчик=нач_зн; усл_зав; приращение_сч){тело$

Слайд 33Контроль за выполнением циклов

break – прерывает цикл в любой точке

тела цикла;
continue – заставляет программу пропускать все следующие строки тела

цикла и начать новый цикл.

Контроль за выполнением цикловbreak – прерывает цикл в любой точке тела цикла;continue – заставляет программу пропускать все

Слайд 34Вопрос 10. Внутренние (встроенные) объекты языка JS
Внутренние объекты не относятся

к браузеру или загруженному в настоящее время HTML-документу. Эти объекты

могут создаваться и обрабатываться в любой JavaScript-программе.
Примеры: Date; Math

Вопрос 10. Внутренние (встроенные) объекты языка JSВнутренние объекты не относятся к браузеру или загруженному в настоящее время

Слайд 35Объект Date
Содержит информацию о дате и времени. Объекты

Date можно создавать и изменять, например путем сложения или вычитания

значений дат получать новую дату. Для создания объекта Date применяется синтаксис:
dateObj = new Date(parameters)
dateObj - переменная, в которую будет записан новый объект Date.

Объект Date Содержит информацию о дате и времени. Объекты Date можно создавать и изменять, например путем

Слайд 36parameters может принимать следующие значения:
пустой параметр, например date() -

дата и время - системные.
строка вида: "месяц, день, год,

время", например "March, 1, 2009, 17:00:00”
значения года, месяца, дня, часа, минут, секунд. Например, строка "09,4,1,12,30,0" означает 1 апреля 2009 года, 12:30.
целочисленные значения только для года, месяца и дня, например “11,5,2" означает 1 мая 2012 года, сразу после полночи, так, как значения времени равны нулю.

parameters может принимать следующие значения: пустой параметр, например date() - дата и время - системные. строка вида:

Слайд 37

Слайд 38

Слайд 39

theTime = new Date();
theHour =

theTime.getHours();
if (theHour < 18)
document.writeln("");
else
document.writeln("");

ПРИМЕР

theTime = new Date(); theHour = theTime.getHours(); if (theHour < 18) document.writeln(

Слайд 40Объект Math
Объект Math является встроенным объектом языка JavaScript и

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

Math включает также некоторые широко применяемые математические константы. Синтаксис:
Math.propertyName
Math.methodName(parameters)

Объект Math Объект Math является встроенным объектом языка JavaScript и содержит свойства и методы, используемые для выполнения

Слайд 41Свойствами объекта Math являются математические константы:

Слайд 42

Слайд 43Методы объекта Math представляют собой математические функции

Слайд 44

Слайд 45

Слайд 46Не забывайте указывать префикс Math перед методом (свойством):
var mpi =

Math.Pi
Или, например,
var myvar = Math.sin(Math.Pi/4)

Слайд 47Вопрос 11. Массивы данных

Слайд 48Массивы – коллекции взаимосвязанных данных.

Встроенные массивы:
document.link[]
document.images[]

Массивы, определяемые пользователем:
a=new Array();

Массивы – коллекции взаимосвязанных данных.Встроенные массивы: document.link[]document.images[]Массивы, определяемые пользователем:a=new Array();

Слайд 49Новый массив создается с помощью ключевого слова new:
array1 = new

Array(#)
где # - размер массива.
a = new Array();
b = new

Array(10);
c = new Array(10,"Это значение");

В JS один массив может содержать данные разных типов.

Новый массив создается с помощью ключевого слова new:array1 = new Array(#)где # - размер массива.a = new

Слайд 50Синтаксис обращения:
элемент = имя_массива[индекс];

Нумерация элементов массива начинается с нуля.

Индекс

может быть задан числом, целочисленной переменной или функцией, возвращающей целочисленное

значение.

Синтаксис обращения:элемент = имя_массива[индекс];Нумерация элементов массива начинается с нуля. Индекс может быть задан числом, целочисленной переменной или

Слайд 51Заполнении элементов массива данными
1 способ
months = new Array (12);
months[0] =

“январь”;
months[1] = “февраль”;

2 способ
months = new Array (“январь”, “февраль”, “март”,

“апрель” ….)

Заполнении элементов массива данными1 способmonths = new Array (12);months[0] = “январь”;months[1] = “февраль”;2 способmonths = new Array

Слайд 52Увеличение размерности массива

array1 = new Array();
array1[9] = “значение последнего элемента”;

Слайд 53Значение размера массива хранится в переменной length, встроенной в объект

массива. В любой момент можно определить текущий размер массива и

использовать это значение, например вывести в окне сообщения:
alert(months.length);

max_index = имя_массива.length – 1;

Значение размера массива хранится в переменной length, встроенной в объект массива. В любой момент можно определить текущий

Слайд 54Объект Array содержит ряд методов, которые позволяют изменять структуру массивов:
concat

(массив2) – объединяет два массива и возвращает новый массив, в

котором элементы массива 2 следуют за элементами исходного;
slice(индекс1, индекс2) – возвращает часть массива от элемента с индексом 1 до элемента с индексом 2, не включая его (чтобы скопировать массив до конца, нужно пропустить второй аргумент);

Объект Array содержит ряд методов, которые позволяют изменять структуру массивов:concat (массив2) – объединяет два массива и возвращает

Слайд 55splice(индекс1, индекс2) – работает так же, как и предыдущий метод,

но извлекаемый подмассив удаляется из исходного массива;
push(значение) – добавляет новый

элемент в конец массива;
pop() – возвращает последний элемент и удаляет его из массива;
shift() – возвращает первый элемент и удаляет его из массива;
unshift (значение) – добавляет новый элемент в начало массива;

splice(индекс1, индекс2) – работает так же, как и предыдущий метод, но извлекаемый подмассив удаляется из исходного массива;push(значение)

Слайд 56reverse () – инвертирует порядок следования элементов массива;
sort() – сортирует

элементы в алфавитном порядке;
join() – позволяет объединить элементы массива в

одну строку.

reverse () – инвертирует порядок следования элементов массива;sort() – сортирует элементы в алфавитном порядке;join() – позволяет объединить

Скачать презентацию

Разделы презентаций

Работа с данными в сценариях

Содержание

Слайды и текст этой презентации

Слайд 1Вопрос 6. Работа с данными в сценариях JavaScript

Слайд 26.1 Создание и использование переменныхОсобенности:автоматическое объявление переменных;динамическое изменение типа переменной.

Слайд 3Ключевое слово var var name=prompt(“Введите ваше имя”); //имя пользователяvar amount=currency.value; //сумма,

взятая из поля “Сумма”var date=new Date(); //объект текущей датыvar rate=5.05; //курс

Слайд 4Правила именования переменных:можно использовать латинские буквы, цифры и подстрочный символ;имя

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

Слайд 5В JS различают следующие типы данных:целое число;число с плавающей запятой;строка

текста;логическая переменная;объект.

Слайд 6Значением целочисленной переменной могут быть положительные и отрицательные целые числа.Например,

число 14 в разных системах счисления:в десятичной – 14;в восьмеричной

Слайд 7//Объявления переменныхvar iVal=14; //Десятичное числоvar hVal=0xE; //Шестнадцатеричное числоvar oVal=016; //Восьмеричное

число//Вывод переменных в окно обозревателяdocument.write("Это десятичное число: "+ iVal+"");document.write("Это шестнадцатеричное

Слайд 8Форматы представления числа с плавающей запятой: 1. Обычный2. ЛогарифмическийЛогарифмический формат

имеет следующий синтаксис: #.##E??Например: 6.02Е-4число>1,0*1020число

Слайд 9Строки текста - последовательность любых символов, в том числе и

цифр, заключенная в кавычки или апострофы.Чтобы ввести в текст двойные

Слайд 10sVal = "В тексте мы может использовать \"кавычки\" ,

заключать слова в \\ или \\косые\\ скобки.";document.write(sVal);

Слайд 11Логические переменные - значения true (истинно) и false (ложно). Этим

переменным можно присваивать целочисленные значения:0 будет соответствовать false, любое другое

Слайд 12В зависимости от области действия различают два вида переменных:Глобальные переменные

–созданные непосредственно в коде сценария в блоке …. Локальные

Слайд 13Изменение типа переменнойКоманда typeof имя_переменной – определяет тип переменной Команда возвращает

текстовое значение, соответствующее типу переменной:Number – целое число или число

Слайд 14Для изменения типа переменной в JS предусмотрен ряд функций.toString() –

преобразовать число в строки текста. Пример:var iVal=5;var sVal=iVal.toString();В результате получим

Слайд 15Для выполнения обратного действия используется функция parseInt() и parseFloat(), например:var

sVal = ‘5’;var iVal = parseInt(sVal);var fVal = parseFloat(sVal);

Слайд 16Вопрос 7.2 Выражения и операцииАрифметические ( + - сложение; -