Javascript 1

Программирование Web сайтов. Javascript

Долинин А.А., учитель информатики и ИКТ МБОУ «Уренская СОШ №1»

Javascript

• Скриптовый язык предназначенный для создания интерактивных web страниц

• Не требует компиляции – подключается к HTML странице и выполняется браузером

• Выполняется на стороне клиента – клиентский скрипт

• Не имеет ничего общего с java ( имеет свой стандарт ECMAScript)

Javascript. Для чего

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

• Добавлять динамически HTML тэги на страницу

• В последнее время стала популярна технология AJAX – выполнение запросов к серверу, с помощью Javascript

• И т.д.

Другие средства. Обзор.

• Java – апплеты. Тяжеловесны, применяются там, где требуется сложная логика, сравнимая с десктоп приложением

• Flash – применяется как удобная платформа для создания мультимедийных приложений, с поддержкой аудио и виде. Есть много плюсов, но и минусы – плохо индексируется поисковиками

• VbScript – скрипт от Microsoft , мало применяется для web – программирования в последнее время

• JavaFX ( от разработчиков Java),Silverlight – от Майкрософт

Подключение javascript

Javascript подключается напрямую в HTML-файл.

• Подключение в любом месте• Вынос скриптов в заголовок HEAD• Внешние скрипты

Nortel Networks Confidential

Когда браузер читает HTML-страничку, и видит <script> - он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

<script type="text/javascript"> ... </script>

• script - сообщает браузеру о том, что внутри находится исполняемый скрипт

• type - говорит о том, что это javascript

Подключение в любом месте

<html><body> <h1>Считаем кроликов</h1> <script type="text/javascript"> for(var i=1; i<=3; i++) { alert("Из шляпы достали "+i+" кролика!") } </script> <h1>...Посчитали</h1></body></html>

Подключение в любом месте

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

В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

• input type=“button” – кнопка• onclick - Он используется для указания действий, которые надо

выполнить по клику мышки на элементе.

Вынос скриптов в заголовок HEAD

<html> <head> <script type="text/javascript"> function count_rabbits() { for(var i=1; i<=3; i++) { // оператор + соединяет строки alert("Из шляпы достали "+i+" кролика!") } } </script> </head> <body> <input type="button" onclick="count_rabbits()" value="Считать кролей!"/> </body></html>

Вынос скриптов в заголовок HEAD

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом.

<script src="/my/script.js"></script>

/my/script.js - содержит javascript код

• Один и тот же файл со скриптами можно подключать на разных страницах

• Можно подключить несколько скриптов, используя несколько script тэгов

• При указании атрибута src содержимое тега игнорируется. То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя!

Внешние скрипты.

; - отделяет каждую инструкцию

a = 5; или a = 5

var a = “длинная // Неправильно! строка”

var a = “длинная \ //Правильно строка”

Синтаксис javascript. Разделители.

• var i; - локальная переменная

var a=5, b=6, str = “Строка”

• Блок – фрагмент кода, отделенный фигурными скобками

var i = 0;{ var i=5; alert(i); // 5 }alert(i) // тоже 5

Синтаксис javascript. Переменные и блоки.

• Переменные в javascript слабо типизированы.

При объявлении не нужно указывать тип. Можно присвоить любой переменной любое значение.

var i = 10; var i = "десять";

• Интерпретатор (браузер) всегда знает какого типа значение содержит переменная.

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

Синтаксис javascript. Типы данных.

• Number – числа : 0.3, 1, 12

• Boolean - булевские (логические) переменные : true (истина), false(ложь)

• String –строки : ‘hi’, “Строка”

• null , undefined – ключевые слова : пустое значение и данных нет(при несозданной или необъявленной переменной)

Базовые типы данных.

Работа с числами в javascript похожа на работу с числами в других языках – поддерживаются все стандартные операции работы с числами.

var i = 5;var f = 0.3;var summa = i+f;var razn = i-f;

Числа.

Строки могут быть заключены в двойные или одинарные кавычки, например:

var str1 = “Hello”;var str2 = “World”;var str = str1 + ‘\’ ’ + str2; //В str будет строка “Hello’ World”

• + - конкатенация(сложение или объединение) строк• \‘ , \” - экранирование кавычек

Строки.

• length - длина строки• строка – последовательность символов. • Нумерация символов с 0.• Можно получить определенный символ в строке• Подстрока• Найти индекс первого вхождения символа в строке var str = “Hello World” var l= str.length //В l будет 11 var last_char=str.charAt(s.length-1); // в last_char будет ‘d’ var sub = str.substring(0,4); //в sub будет ‘Hello’ var index=s.indexOf(‘o’); // в index будет 4

Строки.

var n=100;var s = n+ “ dollars”;

var n_as_atr = n + “”;

var str_value=n.toString();var str_value1 = String(n);

Преобразование чисел в строки.

var m = “21” * ”2”; //в m будет 42var n = “21”+”2” // ! операция конкатенации, в n будет “212”

parseInt("3 слепых мышки"); //Вернет 3

parseFloat("3.14 метров"); // Вернет 3.14

parseInt("12.34"); // Вернет 12

parseInt("eleven"); //Вернет NaN

parseFloat("$72.47"); // Вернет NaN

Преобразование строк в числа.

• true – истина• false – ложь var flag = true;

• Используется для сравнения

a == 4результатом этого выражения будет true, если a равно 4 и false, если нет

Логический тип.

• true - 1, false – 0 – числовые операции:• true – “true”, false – “false” – строковые операции

var b = true;var i = 1 + b // в i будет 2var str = “Истина – “ + b; //в str будет “Истина - true”

• true – если число не равно 0 или NaN, если строка не пуста, любой другой объект, не равный null и undefined

• false – 0 и NaN, пустая строка, null и undefined

Преобразование логического типа.

• Функция – это фрагмент исполняемого кода, который определен в JavaScript программе или заранее предопределен в реализации JavaScript.

• Хотя функция определяется только один раз, JavaScript программа может исполнять или вызывать ее сколько угодно.

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

• Функция может возвращать значение, представляющее собой результат этих вычислений.

Функции.

function square(x) // Функция называется square. //Она принимает один аргумент, x.{ // Здесь начинается тело функции. return x*x; // Функция возводит свой аргумент в квадрат и // возвращает полученное значение.} // Здесь функция заканчивается.

Функции.

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

y = Math.sin(x);y = square(x);d = compute_distance(x1, y1, z1, x2, y2, z2);move();

Функции.

• Функции – тип данных• Функции могут хранится в

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

• Придает языку гибкость

function square(x) { return x*x; }var square = function(x) { return x*x; }

Функции.

• Область видимости (scope) переменной – это та часть программы, для которой эта переменная определена.

• Глобальная переменная имеет глобальную область видимости – она определена для всей JavaScript программы.

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

• Параметры функций также считаются локальными переменными, определенными только в теле этой функции.

var i ; // локальная

Область видимости переменных.

a = 1; // глобальная function go() { var a = 6; alert(“Внутри go:”+a); //=> 6}go();alert(“Вне функции go ” + a); // => 1


a = 1; // глобальная function go() { a = 6; alert(“Внутри go:”+a); //=> 6}go();alert(“Вне функции go ” + a); // => 6


Если глобальных переменных с подобными именами нет, то даже если мы не укажем в теле функции var, переменные все равно будут локальными – интерпретатор сам подставит var:

function cmp(a,b) { if (a>b) { res = 1; } else if (a<b) { res = -1; } else { res = 0; } return res;}


локальные

Объект – это коллекция именованных значений, которые обычно называют свойствами (properties) объекта.

Чтобы сослаться на свойство объекта, надо указать имя объекта, затем точку и имя свойства:

image.widthimage.height

Свойства объектов – такие же переменные – они могут содержать любой тип данных, включая массивы, функции и другие объектыdocument.myform.button

Объекты.

• В логическом контексте объект равен true, если он не null и не undefined.

• В строковом контексте c помощью функции toString()

• В числовом контексте valueOf()

Преобразование объектов.

Массив – это коллекция значений, каждое значение имеет индекс (индексация с 0).

Массивы могут содержать любой тип данных JavaScript, в том числе ссылки на другие массивы,на объекты или функции

var a = new Array();a[0] = 1.2;a[1] = "JavaScript";a[2] = true;a[3] = { x:1, y:3 };alert(a[1]); //Выведет “JavaScript”

Массивы.

var a = new Array(1.2, "JavaScript", \ true, { x:1, y:3 });или

• Длина массива - свойство length:arr = new Array("my", "array")alert(arr.length) // 2

• Объекты как ассоциативные массивы. Ассоциативный массив – строковый ключ вместо индекса

obj = { n: 1, str: "Вася"};alert(obj.n); // Выведет 1alert(obj["n"]); //Выведет 1var key=”str”;alert(obj[key]); //Выведет “Вася”key = “name”;alert(obj[key]); //Выведет undefined

Массивы.

Операторы.

Оператор Типы операндов Выполняемая операция

. Объект, идентификатор

Обращение к свойству

[] Массив, целое число Обращение к элементу массива

() Функция, аргументы Вызов функции- Число Смена знака-,+,*, /,% Числа Арифметические

операции с числами++, -- Числовое значение Инкремент(+1) и

декремент (-1)+ Строки Конкатенация строк! Логическое

значениеОтрицание

<, <=, >, >= Числа или строки Сравнение чисел или строк

== Любой Проверка на равенство!= Любой Проверка на неравенство

&& Логические значения Логическое И

|| Логические значения Логическое ИЛИ

= Любое значение Присваивание*=, /=, %=, +=,-= Любое значение Присваивание с

операцией

?: Логическое значение, любое, любое

Условный трехместный оператор

typeof Любое значение Возвращает тип

if (выражение) инструкция

if (username == null) // Если переменная username равна null username = "John Doe"; // определяем ее

Аналогично: если переменная username равна null, undefined, 0, "" или NaN, она преобразуется в false, и эта инструкция присвоит переменной новое значение. if (!username) username = "John Doe";

Условие.if

• Можно объединять два условия в скобках с помощью логических операций.

• Если при истинности выражения надо выполнить несколько инструкций, то они заключаются в блок {}

if (address == null || address == "") { address = "undefined"; alert("Пожалуйста, укажите почтовый адрес.");}

Условие.if

• else – используется вместе с if. Блок else выполняется когда выражение равно false

• else является частью ближайшей к ней if

if (выражение)инструкция1elseинструкция2

Условие.else

if (username != null){ alert("Привет " + username + \"\nДобро пожаловать на мою домашнюю страницу.");}else { username = prompt("Добро пожаловать!\n Как вас зовут?"); alert("Привет " + username);}

Условие.else

if (n == 1) {// Исполняем блок кода 1}else if (n == 2) {// Исполняем блок кода 2}else if (n == 3) {// Исполняем блок кода 3}else {// Если все остальные условия else не выполняются, исполняем блок 4}

Условие.else if

switch(n) { case 1: // Выполняется, если n == 1 // Исполняем блок кода 1. break; // Здесь останавливаемся case 2: // Выполняется, если n == 2 // Исполняем блок кода 2. break; // Здесь останавливаемся case 3: // Выполняется, если n == 3 // Исполняем блок кода 3. break; // Здесь останавливаемся default: // Если все остальное не подходит... // Исполняем блок кода 4. break; // Здесь останавливаемся}

Переключатель.switch

function convert(x) { switch(typeof x) { case 'number': // Число в строку return x.toString(); case 'string': // Возвращаем строку, заключенную в кавычки return '"' + x + '"'; case 'boolean': // Преобразуем в TRUE или FALSE return x.toString().toUpperCase(); default: // Любой другой тип преобразуем обычным способом return x.toString() }}

Переключатель.switch

while (выражение) инструкция

Выполнять инструкцию до тех пор, пока выражение истинно

var count = 0;while (count < 10) { document.write(count + "<br>"); count++;}

Циклы.While

do инструкцияwhile (выражение);

Выполнять инструкцию до тех пор, пока выражение истинно. Инструкция выполняется хотя бы один раз

Циклы.Do/While

function printArray(a) { if (a.length == 0) document.write("Пустой массив"); else { var i = 0; do { document.write(a[i] + "<br>"); } while (++i < a.length); }}

Циклы.Do/While

for(инициализация; проверка; инкремент) инструкция

for(var count = 0; count < 10; count++){ document.write(count + "<br>");}Такой цикл удобно использовать для работы с массивами:var array = [ 2,5,1,-1,3,4];var max = array[0];for(var i=1; i < array.length; i++){ if(max< array[i]){ max = array[i];}}

Циклы.for

Для перебора свойств объекта.

for (переменная in объект) инструкция

for (var prop in my_object) { document.write("имя: " + prop + "; значение: " + my_object[prop], "<br>");}

Циклы.for/in

break - выход из цикла в любое время

for(i = 0; i < a.length; i++) { if (a[i] == target){ alert(a[i]); break; }}

Циклы.break

continue – пропускает итерацию цикла.

for(i = 0; i < data.length; i++) { if (data[i] == null){ continue; } // Продолжение со следующей итерации total += data[i];}

Циклы.continue

Javascript 1

Education

Transcript of Javascript 1