Презентация на тему "Язык Javascript"

Включить эффекты
1 из 21
Смотреть похожие
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
2.7
3 оценки

Рецензии

Добавить свою рецензию

Аннотация к презентации

Презентация для школьников на тему "Язык Javascript" по информатике. pptCloud.ru — удобный каталог с возможностью скачать powerpoint презентацию бесплатно.

Содержание

  • Язык Javascript
    Слайд 1

    Язык Javascript

    По материалам курса University of Washingtonhttp://www.cs.washington.edu/education/courses/cse190m/07sp/index.shtml

  • Слайд 2

    Краткое введение в Javascript

    Javascriptэто: Интерпретируемый язык. Его интерпретатор обычно встроен в браузер. Основное назначение – определять «динамическое» поведениестраниц при загрузке (формирование страницы перед ее открытием)и при работе пользователя со страницей (UI элементы). Текст на Javascriptможет быть вложен в HTML-страницу непосредственно или находиться в отдельном файле (как CSS). Похож на языки Javaи C#синтаксически, но сильно отличается от нихпо внутреннему содержанию.

  • Слайд 3

    Характеристика Javascript

    Некоторые важнейшие характеристики Javascript: Язык объектно-ориентированного программирования. Объекты в языкеимеют «тип», «атрибуты» и «методы» "John,Jane,Paul,Michael".split(",").length Переменные не имеют заранее заданного типа, то есть в разныемоменты времени могут содержать значения разных типов var number = 25; number = (number < 0); number = "25"; Типы объектов могут быть: number, string, function, object, undefined. Оператор typeofпозволяет «вычислить» тип объекта. typeof 25 == "number" typeof null == "object"

  • Слайд 4

    Основные встроенные типы

    Типы, встроенные в язык, это: Есть набор встроенных «классов», порождающих «объекты», различающиеся набором атрибутов и методов. Программисты могутдинамически изменять поведение этих «классов» и создавать своисобственные. Каждый «класс» является объектом, у которого есть«прототип», определяющий набор атрибутов и методов у всех вновьсоздаваемых объектов этого класса. - Number : 64-х-разрядные числа с плавающей точкой. - String : строки с символами в формате Unicode. - Array : массивы с переменными границами. - Function : Функции. Каждая функция, кроме того, может служить конструктором объекта. - Boolean, Date, Math, RegExp : логические значения, даты,…

  • Слайд 5

    Некоторые сведения о синтаксисе

    Операции такие же, как в Java и C#, но более широко используется преобразование типов Описание переменных: var count = 25, msg = 'Сообщение об ошибке'; var nullVar; // получает начальное значение null + - * / % ++ -- = += -= *= /= %= == != > < >= <= && || ! 2 + '3' == '23', но 2 + 3 == 5 Многие операторы очень похожи на соответствующие операторы Java и C#,но могут иметь некоторые отличия в семантике. for (var i = 0; i < 100; ++i) { ... } if (x * y < 100) { ... } else { ... } try { ... } catch (e) { ... } finally { ... }

  • Слайд 6

    Объекты, встроенные в браузеры

    При программировании можно использовать ряд встроенных объектов.Основные из них это: - window : представляет «глобальный контекст» и позволяет работать с атрибутами и методами окна. - document : загруженная страница со своей структурой элементов. - navigator : объект, представляющий браузер и его свойства. - location : характеристики текущего URL (порт, хост и т.п.). - объекты, представляющие элементы различных типов в HTML-странице, такие как , , и т.п. - события (events), возникающие от действий пользователя, например, нажатие кнопки мыши (click), загрузка новой страницы (load) и т.д.

  • Слайд 7

    Включение Javascript в HTML-страницу

    Фрагменты кода можно включать в заголовок или тело HTML-документа. Кроме того, можно разместить код в отдельном файле, а в HTML-страницеразместить ссылку на этот файл.

    helloworld.html

  • Слайд 9

    Два простых примера(продолжение)

    Во втором примере датчик случайных чисел используется для генерациислучайной ссылки (из заданного набора):

    randomPicture.html

  • Слайд 10

    Тип String

    Строки заключаются либо в апострофы, либо в двойные кавычки var slogan = "Don't be evil!"; var image =''; Операции над строками: + < > == != escape-последовательности: \\ \' \" \t \n "2" + "3" "23" "10" < "5" true 10 < "5" false "a" == "A" false 5 == "5" true 5 === "5" false Атрибут строки: length – длина строки. "abc".length == 3 5 + "5" "55" Преобразования типов: String(n) Number(s) String(10) < "5" == true Number('3.' + '14') == 3.14

  • Слайд 11

    Стандартные методы объектов типа String

    charAt, indexOf, lastIndexOf, replace, split, substr, substring, toLowerCase, toUpperCase Примеры: "Google".charAt(3) "g" "Google".indexOf("o") 1 "Google".lastIndexOf("o") 2 "Google".replace("o", "oo") "Gooogle" "Google".replace(/o/g, "oo") "Goooogle" "Google".split("o") ["G","","gle"] "Google".substr(1,3) "oog" "Google".substring(1,3) "oo" "Google".toLowerCase() "google" "Google".toUpperCase() "GOOGLE"

  • Слайд 12

    Тип Number

    Числа – это 64-х-разрядные двоичные числа с плавающей точкой. Number.MIN_VALUE Number.MAX_VALUE Number.NaNNumber.POSITIVE_INFINITYNumber.NEGATIVE_INFINITY Операции над числами: + - * / % < > == != 3.14 % 2 1.14 parseInt("3.14") 3 Функции преобразования: parseInt, parseFloat, Number, toString 5e-3241.7976931348623157e+308 NaNInfinity -Infinity parseFloat("*3.14") NaN Number("3.xaxa") NaN 3.14.toString() "3.14" isNaN(3.14 / 0) false isNaN(0 / 0) true

  • Слайд 13

    Тип Boolean

    Стандартные логические значения – trueи false. Однако в качестве условий можно использовать любое значение. "Истинные" условия: if (2 < 5) "Ложные" условия: if ('Google могуч и ужасен') if (25) if ("") if (null) if (0) Логические условия используются в условных операторах и операторахциклов. if (x < y) { z = x; } else { z = y; } while (x < 100) { x = x * 2; n++; } do { x = Math.floor(x / 2); n++; } while (x > 0); for (var y = 0, x = 0; x < 100; ++x) { y += x; }

  • Слайд 14

    Тип Date

    Объекты типа Dateсодержат дату в виде числа миллисекунд, прошедших с 1 января 1970 г. Диапазон от -108 до 108 дней от 1 января 1970 г. Конструкторы: var now = new Date(); // сейчас var gagarin = new Date(1961, 3, 12); var january1st1970 = new Date(0); // дата в миллисекундах Методы, применимые для работы с датами: getDate, getMonth, getFullYear, getTime, getTimezoneOffset, setDate, setFullYear,… function DaysToDate(day, month) { var now = new Date(), year = now.getFullYear(); var bd = new Date(year, month-1, day); var fullDay = 24 * 60 * 60 * 1000; var diff = Math.ceil((bd - now) / fullDay); return diff < 0 ? diff + 365 : diff; } var newYear = new Date("January 1, 2009"); todate.html

  • Слайд 15

    Сообщения, выдаваемые в popup-окнах

    Три стандартные функции используются для генерации сообщенийв popup-окнах: alert, confirm, prompt. alert('Вы просрочили платеж!'); confirm('Вы этого хотите?'); var name = prompt('Как Вас зовут?', 'Никак', 'Вопросик...'); Выдает trueили false Выдает введенную строкуили null

  • Слайд 16

    События и реакции на них

    Имеется большое количество событий, которые можно разделить наследующие классы:

    День независимости России 12 июня.

    - события от мыши (click, dblclick, mousedown,…); - события от клавиатуры (keypress, keydown,…); - события от элементов ввода (focus, submit, select,…); - события страницы (load, unload, error,…); Один из способов программирования состоит в определении реакции на события непосредственно в описании элемента, например: holidays.html Недостаток этого способа: javascript-текстопять смешивается с содержанием страницы.

  • Слайд 17

    Тип Array

    Существует несколько способов создания массива: var holidays = ["1 января", "7 января", "23 февраля"]; Атрибут массива: length – длина массива. var myArray = new Array();myArray[2] = new Date(2008,2,23); myArray[5] = new Date(2008,5,9); myArray.length == var holidays = new Array("1 января", "7 января", "23 февраля"); var holidays = new Array(3); holidays[0] = "1 января"; holidays[1] = "7 января"; holidays[2] = "23 февраля"; 6 ?

  • Слайд 18

    Тип Array (продолжение)

    Методы, определенные для работы с массивом:concat, join, pop, push, shift , unshift, slice var names = ["Петя", "Вася"]; names = names.concat(["Сережа", "Наташа"], ["Оля", "Люба"]); names == ["Петя", "Вася", "Сережа", "Наташа", "Оля", "Люба"] var s = names.join(';'); s == "Петя;Вася;Сережа;Наташа;Оля;Люба" var e = names.pop(); e == "Люба" names == ["Петя", "Вася", "Сережа", "Наташа", "Оля"] var l = names.push("Саша"); l == 6 names == ["Петя", "Вася", "Сережа", "Наташа", "Оля", "Саша"] shift иunshift – точно так же, как popи push, но с началом массива. names = names.slice(1, 4); names == ["Вася", "Сережа", "Наташа", "Оля"]

  • Слайд 19

    var names = ["Вася", "Сережа", "Наташа", "Оля"]; names.reverse(); names == ["Оля", "Наташа", "Сережа", "Вася"] names.sort(); var a = [5, 3, 40, 1, 10, 100].sort(); a == [1, 10, 100, 3, 40, 5] names.splice(1, 2, "Саша", "Таня", "Нина"); names == ["Вася", "Саша", "Таня", "Нина", "Сережа"] toString – точно так же, как join(','). Еще методы, определенные для работы с массивом:reverse, sort, splice, toString names == ["Вася", "Наташа", "Оля", "Сережа"] var a = [5, 3, 40, 1, 10, 100].sort(function(a,b){return a-b;}); a == [1, 3, 5, 10, 40, 100] names.toString() == "Вася,Саша,Таня,Нина,Сережа"

  • Слайд 20

    Работа с таймером

    var timer = setTimeout(func, timeinterval); function launchTimer() { setTimeout("alert('Зенит – чемпион!');", 2000);} Можно создать таймер и определить реакцию на событие от таймера. func – это функция или строка с кодом; timeinterval – время в миллисекундах. Таймер срабатывает один раз и запускает функцию. Теперь можно запустить этот таймер, например, по событию click:

    Нажми сюда!

    settimer.html Пока событие еще не случилось, таймер можно остановить: var timer = setTimeout(func, timeinterval); clearTimeout(timer);

  • Слайд 21

    Работа с интервальным таймером

    var timer = setInterval(func, timeinterval); function launchInterval() { timer = setInterval("alert('Зенит – чемпион!');", 2000);} Таймер может срабатывать многократно через равные промежутки времени. Такой таймер создается с помощью функции setIntervalи останавливается с помощью функции clearInterval.

    Нажми сюда,чтобы запустить.

    Нажми сюда, чтобы остановить.

    setinterval.html function stopTimer() { if (timer) clearInterval(timer); timer = null; }

Посмотреть все слайды

Предложить улучшение Сообщить об ошибке