🗊Презентация Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12)

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №1Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №2Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №3Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №4Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №5Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №6Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №7Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №8Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №9Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №10Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №11Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №12Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №13Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №14Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №15Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №16Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №17Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №18Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №19Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №20Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №21Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №22Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №23Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №24Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №25Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №26Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №27Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №28Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №29Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №30Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №31Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №32Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №33Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №34Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №35Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №36Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №37Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №38Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №39Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №40Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №41Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №42Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №43Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №44Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №45Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №46Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12), слайд №47
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Условный и циклический оператор в JavaScript. Регулярные выражения. (Тема 12). Доклад-сообщение содержит 47 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1


Tema 12. Условный и циклический оператор в JavaScript. Регулярные выражения
Описание слайда:
Tema 12. Условный и циклический оператор в JavaScript. Регулярные выражения

Слайд 2


СОДЕРЖАНИЕ Логические операторы и операторы сравнения в JS Условные операторы в JS Циклические операторы в JS Регулярные выражения Примеры
Описание слайда:
СОДЕРЖАНИЕ Логические операторы и операторы сравнения в JS Условные операторы в JS Циклические операторы в JS Регулярные выражения Примеры

Слайд 3


ЛОГИЧЕСКИЕ ОПЕРАТОРЫ И ОПЕРАТОРЫ СРАВНЕНИЯ В JS Логические операторы и операторы сравнения в JS возвращают одно из двух следующих значений: „true” или „false” Логические операторы используются для определения логики между переменными или значениями переменных && - and (и) || - or (или) ! – not (отрицание) Операторы сравнения используются для определения равенства или различий между переменными или значениями переменных == - равно === - равны и значение и тип != - не равно !== - не равно ни значение ни тип > - больше чем < - меньше чем >= - больше или равно чем <= - меньше или равно чем
Описание слайда:
ЛОГИЧЕСКИЕ ОПЕРАТОРЫ И ОПЕРАТОРЫ СРАВНЕНИЯ В JS Логические операторы и операторы сравнения в JS возвращают одно из двух следующих значений: „true” или „false” Логические операторы используются для определения логики между переменными или значениями переменных && - and (и) || - or (или) ! – not (отрицание) Операторы сравнения используются для определения равенства или различий между переменными или значениями переменных == - равно === - равны и значение и тип != - не равно !== - не равно ни значение ни тип > - больше чем < - меньше чем >= - больше или равно чем <= - меньше или равно чем

Слайд 4


ПРИМЕР ИСПОЛЬЗОВАНИЯ ОПЕРАТОРА „===” <!DOCTYPE html> <html> <body> <p>Нажмите кнопку для визуализации равенства двух значений - 5 равно с "5" как значение и как тип?</p> <button onclick="Comparatie()">Click</button> <p id="et"></p> <script> function Comparatie() { var x = 5; document.getElementById("et").innerHTML = (x === "5"); } </script></body> </html>
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ ОПЕРАТОРА „===” <!DOCTYPE html> <html> <body> <p>Нажмите кнопку для визуализации равенства двух значений - 5 равно с "5" как значение и как тип?</p> <button onclick="Comparatie()">Click</button> <p id="et"></p> <script> function Comparatie() { var x = 5; document.getElementById("et").innerHTML = (x === "5"); } </script></body> </html>

Слайд 5


УСЛОВНЫЙ ОПЕРАТОР В JS JavaScript содержит, условный оператор который присваивает значение переменной, в зависимости от выполнения или не выполнения определенного условия Синтаксис: названиеПеременной = (условие) ? значение1:значение2 
Описание слайда:
УСЛОВНЫЙ ОПЕРАТОР В JS JavaScript содержит, условный оператор который присваивает значение переменной, в зависимости от выполнения или не выполнения определенного условия Синтаксис: названиеПеременной = (условие) ? значение1:значение2 

Слайд 6


ПРИМЕР ИСПОЛЬЗОВАНИЯ УСЛОВНОГО ОПЕРАТОРА JS …<p>Выберите опцию определяющую ваш пол:</p> <select id="aleg"> <option value="barbat">Мужской</option> <option value="femeie">Женский</option> </select> <button onclick="Verificare()">Click</button> <p id="et2"></p><script> function Verificare() { var alegere,sex; alegere = document.getElementById("aleg").value; sex = (alegere == "barbat") ? " господин!!!":" госпожа!!!"; document.getElementById("et2").innerHTML = "Хорошего вам дня" + sex;} </script>…
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ УСЛОВНОГО ОПЕРАТОРА JS …<p>Выберите опцию определяющую ваш пол:</p> <select id="aleg"> <option value="barbat">Мужской</option> <option value="femeie">Женский</option> </select> <button onclick="Verificare()">Click</button> <p id="et2"></p><script> function Verificare() { var alegere,sex; alegere = document.getElementById("aleg").value; sex = (alegere == "barbat") ? " господин!!!":" госпожа!!!"; document.getElementById("et2").innerHTML = "Хорошего вам дня" + sex;} </script>…

Слайд 7


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 8


ДРУГИЕ УСЛОВНЫЕ ОПЕРАТОРЫ Используются, обычно, для выполнения разных действий, на основе разных условий В JavaScript существует возможность использования следующих условных операторов: if - используются когда необходимо выполнить блок JS-кодов, тогда когда заданное условие является верным (true) else - используются когда необходимо выполнить блок JS-кодов, тогда когда заданное условие является неверным (false) else if  - используются для определения нового условия, в случае когда первое условие неверное switch – используются для определения нескольких альтернативных блоков JS-кодов, которые могли бы выполнится при выполнении соответствующего условия
Описание слайда:
ДРУГИЕ УСЛОВНЫЕ ОПЕРАТОРЫ Используются, обычно, для выполнения разных действий, на основе разных условий В JavaScript существует возможность использования следующих условных операторов: if - используются когда необходимо выполнить блок JS-кодов, тогда когда заданное условие является верным (true) else - используются когда необходимо выполнить блок JS-кодов, тогда когда заданное условие является неверным (false) else if  - используются для определения нового условия, в случае когда первое условие неверное switch – используются для определения нескольких альтернативных блоков JS-кодов, которые могли бы выполнится при выполнении соответствующего условия

Слайд 9


ОПЕРАТОР „IF” Оператор „IF”, форма условного оператора, и используется тогда когда необходимо выполнить блок JS-кодов, при верным заданном условие Основная форма: if (условие) { блок JS-кодов необходимый выполнить при выполнении условия } Задача: Утро считается тогда когда время не превышает 10 часов дня.
Описание слайда:
ОПЕРАТОР „IF” Оператор „IF”, форма условного оператора, и используется тогда когда необходимо выполнить блок JS-кодов, при верным заданном условие Основная форма: if (условие) { блок JS-кодов необходимый выполнить при выполнении условия } Задача: Утро считается тогда когда время не превышает 10 часов дня.

Слайд 10


ОБЬЕКТ „DATE()” Используется когда необходимо работать с датой и временем Объекты типа „дата” создаются new Date() Некоторые методы объекта „Date”:
Описание слайда:
ОБЬЕКТ „DATE()” Используется когда необходимо работать с датой и временем Объекты типа „дата” создаются new Date() Некоторые методы объекта „Date”:

Слайд 11


ПРИМЕР ИСПОЛЬЗОВАНИЯ ОПЕРАТОРА „IF” … <p>Выберите опцию определяющую ваш пол:</p> <select id="aleg"> <option value="barbat">Мужской</option> <option value="femeie">Женский</option> </select> <button onclick="Verificare()">Click</button> <p id="et2"></p><p id="etZi"></p> <script> function Verificare() { var alegere,sex; alegere = document.getElementById("aleg").value; sex = (alegere == "barbat") ? " господин!!!":" госпожа!!!"; var timp = new Date().getHours(); if (timp < 10) { document.getElementById("et2").innerHTML = "Хорошего вам утра " + sex;} }…
Описание слайда:
ПРИМЕР ИСПОЛЬЗОВАНИЯ ОПЕРАТОРА „IF” … <p>Выберите опцию определяющую ваш пол:</p> <select id="aleg"> <option value="barbat">Мужской</option> <option value="femeie">Женский</option> </select> <button onclick="Verificare()">Click</button> <p id="et2"></p><p id="etZi"></p> <script> function Verificare() { var alegere,sex; alegere = document.getElementById("aleg").value; sex = (alegere == "barbat") ? " господин!!!":" госпожа!!!"; var timp = new Date().getHours(); if (timp < 10) { document.getElementById("et2").innerHTML = "Хорошего вам утра " + sex;} }…

Слайд 12


ФОРМА „IF…ELSE” ОПЕРАТОРА „IF” „Else” используется когда необходимо выполнение блока JS-кодов в случае когда условие не выполняется … if (timp < 10) { document.getElementById("et2").innerHTML = "Хорошего вам утра " + sex; } else if (timp < 17) { document.getElementById("et2").innerHTML = "Хорошего вам дня " + sex; }
Описание слайда:
ФОРМА „IF…ELSE” ОПЕРАТОРА „IF” „Else” используется когда необходимо выполнение блока JS-кодов в случае когда условие не выполняется … if (timp < 10) { document.getElementById("et2").innerHTML = "Хорошего вам утра " + sex; } else if (timp < 17) { document.getElementById("et2").innerHTML = "Хорошего вам дня " + sex; }

Слайд 13


ФОРМА „IF…ELSE IF” ОПЕРАТОРА IF Используется для установки нового условия, в случае когда первое условие не верное … var timp = new Date().getHours(); if (timp < 10) { document.getElementById("et2").innerHTML = "Хорошего вам утра " + sex; } else if (timp < 17) { document.getElementById("et2").innerHTML = "Хорошего вам дня " + sex; } else {document.getElementById("et2").innerHTML = "Хорошего вам вечера " + sex;} …
Описание слайда:
ФОРМА „IF…ELSE IF” ОПЕРАТОРА IF Используется для установки нового условия, в случае когда первое условие не верное … var timp = new Date().getHours(); if (timp < 10) { document.getElementById("et2").innerHTML = "Хорошего вам утра " + sex; } else if (timp < 17) { document.getElementById("et2").innerHTML = "Хорошего вам дня " + sex; } else {document.getElementById("et2").innerHTML = "Хорошего вам вечера " + sex;} …

Слайд 14


ОПЕРАТОР „SWITCH” Используется для выполнения разных действий в зависимости от выполнения определенных условий Основная форма: switch(выражение) {     case n1:         блок с кодами;         break;     case n2:         блок с кодами;         break; …     default:         блок с кодами (по умолчанию); }
Описание слайда:
ОПЕРАТОР „SWITCH” Используется для выполнения разных действий в зависимости от выполнения определенных условий Основная форма: switch(выражение) {     case n1:         блок с кодами;         break;     case n2:         блок с кодами;         break; …     default:         блок с кодами (по умолчанию); }

Слайд 15


ПРИМЕР SWITCH <!DOCTYPE html> <html> <body> <p>Выберите опцию определяющую ваш пол:</p> <select id="aleg"> <option value="barbat">Мужской</option> <option value="femeie">Женский</option> </select> <button onclick="Verificare()">Click</button> <p id="et2"></p> <p id="etZi"></p>
Описание слайда:
ПРИМЕР SWITCH <!DOCTYPE html> <html> <body> <p>Выберите опцию определяющую ваш пол:</p> <select id="aleg"> <option value="barbat">Мужской</option> <option value="femeie">Женский</option> </select> <button onclick="Verificare()">Click</button> <p id="et2"></p> <p id="etZi"></p>

Слайд 16


ПРИМЕР SWITCH, продолжение <script> function Verificare() { var alegere,sex; alegere = document.getElementById("aleg").value; sex = (alegere == "barbat") ? " господин!!!":" госпожа!!!"; var timp = new Date().getHours(); if (timp < 10) { document.getElementById("et2").innerHTML = "Хорошего вам утра " + sex; } else if (timp < 17) { document.getElementById("et2").innerHTML = "Хорошего вам дня " + sex; } else {document.getElementById("et2").innerHTML = "Хорошего вам вечера " + sex; }
Описание слайда:
ПРИМЕР SWITCH, продолжение <script> function Verificare() { var alegere,sex; alegere = document.getElementById("aleg").value; sex = (alegere == "barbat") ? " господин!!!":" госпожа!!!"; var timp = new Date().getHours(); if (timp < 10) { document.getElementById("et2").innerHTML = "Хорошего вам утра " + sex; } else if (timp < 17) { document.getElementById("et2").innerHTML = "Хорошего вам дня " + sex; } else {document.getElementById("et2").innerHTML = "Хорошего вам вечера " + sex; }

Слайд 17


ПРИМЕР SWITCH, продолжение var zi; switch (new Date().getDay()) { case 0: zi = "Воскресенье"; break; case 1: zi = "Понедельник"; break; case 2: zi = "Вторник"; break; case 3: zi = "Среда"; break; case 4: zi = "Четверг"; break; case 5: zi = "Пятница"; break; case 6: zi = "Субота"; break; }
Описание слайда:
ПРИМЕР SWITCH, продолжение var zi; switch (new Date().getDay()) { case 0: zi = "Воскресенье"; break; case 1: zi = "Понедельник"; break; case 2: zi = "Вторник"; break; case 3: zi = "Среда"; break; case 4: zi = "Четверг"; break; case 5: zi = "Пятница"; break; case 6: zi = "Субота"; break; }

Слайд 18


Вывод времени с обновлением Fişierul .html …<head> <script src="ora.js"> </script> </head> <body onload="afisare()"> <p id="etZi"></p>… </body> Fişierul ora.js setInterval(function() {afisare()},30000); function afisare() { var zi;
Описание слайда:
Вывод времени с обновлением Fişierul .html …<head> <script src="ora.js"> </script> </head> <body onload="afisare()"> <p id="etZi"></p>… </body> Fişierul ora.js setInterval(function() {afisare()},30000); function afisare() { var zi;

Слайд 19


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 20


ЦИКЛИЧЕСКИЙ ОПЕРАТОР Циклический оператор используется для повторного выполнения, блока JS-кодов JavaScript имеет несколько циклических операторов: for - повторяет блок кодов несколько раз for/in - повторяет действия относящиеся к свойствам определенного объекта while - повторяет блок кодов, до тех пор пока удовлетворяется условие do/while - повторяет блок кодов в то время как условие удовлетворяется
Описание слайда:
ЦИКЛИЧЕСКИЙ ОПЕРАТОР Циклический оператор используется для повторного выполнения, блока JS-кодов JavaScript имеет несколько циклических операторов: for - повторяет блок кодов несколько раз for/in - повторяет действия относящиеся к свойствам определенного объекта while - повторяет блок кодов, до тех пор пока удовлетворяется условие do/while - повторяет блок кодов в то время как условие удовлетворяется

Слайд 21


ОПЕРАТОР „FOR” Используется тогда когда необходимо повторное выполнение блока кодов Основная форма: for (выр 1; выр 2; выр 3) {     блок кодов необходимых для выполнения; } где выр 1 – определяет начальное значение индикатора цикла; выр 2 – условие выполнения цикла; выр 3 – выполняется после выполнения блока кодов цикла (шаг, инкремент) Прим: Оператор „+=„ используется для конкатенации строк
Описание слайда:
ОПЕРАТОР „FOR” Используется тогда когда необходимо повторное выполнение блока кодов Основная форма: for (выр 1; выр 2; выр 3) {     блок кодов необходимых для выполнения; } где выр 1 – определяет начальное значение индикатора цикла; выр 2 – условие выполнения цикла; выр 3 – выполняется после выполнения блока кодов цикла (шаг, инкремент) Прим: Оператор „+=„ используется для конкатенации строк

Слайд 22


ПРИМЕР С ОПЕРАТОРОМ „FOR” <!DOCTYPE html> <html> <body> <p>Нажмите кнопку чтобы увидеть эффект оператора <b>for</b></p> <button onclick="functieFor()">Click</button> <p id="etCiclu"></p><script> <script> function functieFor() { var text = ""; var i; for (i = 0; i <= 3; i++) { text += "Выводится " + i + "-е число <br />"; } document.getElementById("etCiclu").innerHTML = text;} </script></body></html
Описание слайда:
ПРИМЕР С ОПЕРАТОРОМ „FOR” <!DOCTYPE html> <html> <body> <p>Нажмите кнопку чтобы увидеть эффект оператора <b>for</b></p> <button onclick="functieFor()">Click</button> <p id="etCiclu"></p><script> <script> function functieFor() { var text = ""; var i; for (i = 0; i <= 3; i++) { text += "Выводится " + i + "-е число <br />"; } document.getElementById("etCiclu").innerHTML = text;} </script></body></html

Слайд 23


ПРИМЕР „FOR..IN” Данная форма используется для прохождения по свойствам определенного объекта Пример: …<p>Нажмите кнопку чтобы увидеть эффект оператора <b>for..in</b></p> <button onclick="functieForIn()">Click</button> <p id="etCicluIn"></p> <script> function functieForIn() { var txt = ""; var persoana = {nume:"Иванов", prenume:"Иван", varsta:22}; var x; for (x in persoana) { txt += persoana[x] + " "; } document.getElementById("etCicluIn").innerHTML = txt;} </script>
Описание слайда:
ПРИМЕР „FOR..IN” Данная форма используется для прохождения по свойствам определенного объекта Пример: …<p>Нажмите кнопку чтобы увидеть эффект оператора <b>for..in</b></p> <button onclick="functieForIn()">Click</button> <p id="etCicluIn"></p> <script> function functieForIn() { var txt = ""; var persoana = {nume:"Иванов", prenume:"Иван", varsta:22}; var x; for (x in persoana) { txt += persoana[x] + " "; } document.getElementById("etCicluIn").innerHTML = txt;} </script>

Слайд 24


РЕЗУЛЬТАТ ПРИМЕРА „FOR..IN”
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА „FOR..IN”

Слайд 25


ОПЕРАТОР „WHILE” Выполняет блок кодов, до тех пор пока удовлетворяется условие Основная форма: while (условие) {     блок кодов необходимых для выполнения; }
Описание слайда:
ОПЕРАТОР „WHILE” Выполняет блок кодов, до тех пор пока удовлетворяется условие Основная форма: while (условие) {     блок кодов необходимых для выполнения; }

Слайд 26


ПРИМЕР „WHILE”
Описание слайда:
ПРИМЕР „WHILE”

Слайд 27


ЦИКЛ „DO..WHILE” Этот цикл похож на „while”, отличие в том что коды необходимые повторить выполняются минимум один раз, до того как проверится условие Выполнение блока осуществится повторно до тех пор пока условие верное Основная форма: do {     блок кодов необходимых для выполнения; } while (условие);
Описание слайда:
ЦИКЛ „DO..WHILE” Этот цикл похож на „while”, отличие в том что коды необходимые повторить выполняются минимум один раз, до того как проверится условие Выполнение блока осуществится повторно до тех пор пока условие верное Основная форма: do {     блок кодов необходимых для выполнения; } while (условие);

Слайд 28


ПРИМЕР „DO..WHILE” <script> function functieWhile() { var text = ""; var i = 0; do { text += "Выводится " + i + "-е число <br />"; i++; } while (i <= 3); document.getElementById("etCiclu").innerHTML = text; } </script>…
Описание слайда:
ПРИМЕР „DO..WHILE” <script> function functieWhile() { var text = ""; var i = 0; do { text += "Выводится " + i + "-е число <br />"; i++; } while (i <= 3); document.getElementById("etCiclu").innerHTML = text; } </script>…

Слайд 29


РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ В JS Регулярное выражение представляет собой набор символов, которые определяют шаблон поиска Оно используется для Поиска текста удовлетворяющего шаблон Замены найденного теста другим текстом Регулярное выражение может быть сформировано из одного или более символов Основная форма: /pattern/модификаторы; Mодификаторы: i – реализует case-независимый поиск g – реализует глобальный поиск (производится поиск всех совпадений) Пример: /покрывало/i где покрывало - шаблон, а i - модификатор, указывающий чтобы поиск производился вне зависимости от регистра
Описание слайда:
РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ В JS Регулярное выражение представляет собой набор символов, которые определяют шаблон поиска Оно используется для Поиска текста удовлетворяющего шаблон Замены найденного теста другим текстом Регулярное выражение может быть сформировано из одного или более символов Основная форма: /pattern/модификаторы; Mодификаторы: i – реализует case-независимый поиск g – реализует глобальный поиск (производится поиск всех совпадений) Пример: /покрывало/i где покрывало - шаблон, а i - модификатор, указывающий чтобы поиск производился вне зависимости от регистра

Слайд 30


ШАБЛОНЫ В РЕГУЛЯРНЫХ ВЫРАЖЕНИЯХ
Описание слайда:
ШАБЛОНЫ В РЕГУЛЯРНЫХ ВЫРАЖЕНИЯХ

Слайд 31


ШАБЛОНЫ В РЕГУЛЯРНЫХ ВЫРАЖЕНИЯХ. МЕТАСИМВОЛЫ
Описание слайда:
ШАБЛОНЫ В РЕГУЛЯРНЫХ ВЫРАЖЕНИЯХ. МЕТАСИМВОЛЫ

Слайд 32


КВАНТИФИКАТОРЫ В ШАБЛОНАХ
Описание слайда:
КВАНТИФИКАТОРЫ В ШАБЛОНАХ

Слайд 33


JS-МЕТОДЫ ИСПОЛЬЗУЕМЫЕ С РЕГУЛЯРНЫМИ ВЫРАЖЕНИЯМИ В JS регулярные выражения используют несколько методов для работы с символьной строкой: search() – использует регулярное выражение для поиска подстроки, и возвращает позицию найденной подстроки replace() – возвращает измененную строку применив заданный шаблон match() – ищет последовательность совпадений, используя регулярное выражение и возвращает совпадения в виде вектора со значениями
Описание слайда:
JS-МЕТОДЫ ИСПОЛЬЗУЕМЫЕ С РЕГУЛЯРНЫМИ ВЫРАЖЕНИЯМИ В JS регулярные выражения используют несколько методов для работы с символьной строкой: search() – использует регулярное выражение для поиска подстроки, и возвращает позицию найденной подстроки replace() – возвращает измененную строку применив заданный шаблон match() – ищет последовательность совпадений, используя регулярное выражение и возвращает совпадения в виде вектора со значениями

Слайд 34


ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ <!DOCTYPE html> <head> <!--meta charset="utf-8" / --> <title>Проверка полей</title> <link rel="stylesheet" type="text/css" href="regExp.css" /> </head> <html> <body> <form onsubmit="return Verificare()" name = "datePers"> <fieldset><legend>Контактные данные</legend> <p>Введите вашу фамилию: </p> <input id="nume" type="text" name="nume" /> <span id="err_nume" class="err"></span> <p class="standard">Фамилия должна содержать минимум 2 буквы - первая большая!!!</p><br /> <p>Введите ваше имя: </p><input id="prenume" type="text" name="prenume" /> <span id="err_prenume" class="err"></span> <p class="standard">Имя должно содержать минимум 2 буквы - первая большая!!!</p><br />
Описание слайда:
ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ <!DOCTYPE html> <head> <!--meta charset="utf-8" / --> <title>Проверка полей</title> <link rel="stylesheet" type="text/css" href="regExp.css" /> </head> <html> <body> <form onsubmit="return Verificare()" name = "datePers"> <fieldset><legend>Контактные данные</legend> <p>Введите вашу фамилию: </p> <input id="nume" type="text" name="nume" /> <span id="err_nume" class="err"></span> <p class="standard">Фамилия должна содержать минимум 2 буквы - первая большая!!!</p><br /> <p>Введите ваше имя: </p><input id="prenume" type="text" name="prenume" /> <span id="err_prenume" class="err"></span> <p class="standard">Имя должно содержать минимум 2 буквы - первая большая!!!</p><br />

Слайд 35


ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ. Продолжение <p>Введите ваш номер телефона: </p> <input id="telefon" type="text" name="telefon" /> <span id="err_tel" class="err"></span> <p class="standard">Номер телефона начинается с '+' и потом следуют 11 цифр (+xxxxxxxxxxx)!!!</p><br /> <br /> <input type="reset" value="Обновить" /> <input type="submit" value="Сохранить" /> </fieldset> </form> <script> function Verificare() { var necazuri=0; var numeC, prenumeC, telefonC; var numeSablon, prenumeSablon, telefonSablon;
Описание слайда:
ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ. Продолжение <p>Введите ваш номер телефона: </p> <input id="telefon" type="text" name="telefon" /> <span id="err_tel" class="err"></span> <p class="standard">Номер телефона начинается с '+' и потом следуют 11 цифр (+xxxxxxxxxxx)!!!</p><br /> <br /> <input type="reset" value="Обновить" /> <input type="submit" value="Сохранить" /> </fieldset> </form> <script> function Verificare() { var necazuri=0; var numeC, prenumeC, telefonC; var numeSablon, prenumeSablon, telefonSablon;

Слайд 36


ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ. Продолжение document.getElementById("err_nume").innerHTML =""; numeC = document.getElementById("nume").value; numeSablon = /^[A-Z][a-z]+$/; if (!(numeC.match(numeSablon))) { document.getElementById("err_nume").innerHTML = "Фамилия должна содержать минимум 2 буквы - первая большая!!!"; necazuri++; } document.getElementById("err_prenume").innerHTML =""; prenumeC = document.getElementById("prenume").value; prenumeSablon = /^[A-Z][a-z]+$/; if (!(prenumeC.match(prenumeSablon))) { document.getElementById("err_prenume").innerHTML = "Имя должно содержать минимум 2 буквы - первая большая!!!"; necazuri++; }
Описание слайда:
ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ. Продолжение document.getElementById("err_nume").innerHTML =""; numeC = document.getElementById("nume").value; numeSablon = /^[A-Z][a-z]+$/; if (!(numeC.match(numeSablon))) { document.getElementById("err_nume").innerHTML = "Фамилия должна содержать минимум 2 буквы - первая большая!!!"; necazuri++; } document.getElementById("err_prenume").innerHTML =""; prenumeC = document.getElementById("prenume").value; prenumeSablon = /^[A-Z][a-z]+$/; if (!(prenumeC.match(prenumeSablon))) { document.getElementById("err_prenume").innerHTML = "Имя должно содержать минимум 2 буквы - первая большая!!!"; necazuri++; }

Слайд 37


ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ. Продолжение document.getElementById("err_tel").innerHTML =""; telefonC = document.getElementById("telefon").value; telefonSablon = /^\+\d{11}$/ if (!(telefonC.match(telefonSablon))) { document.getElementById("err_tel").innerHTML = "Номер телефона начинается с '+' и потом следуют 11 цифр (+xxxxxxxxxxx)!!!"; necazuri++; } return (necazuri==0); } </script> </body> </html>
Описание слайда:
ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ. Продолжение document.getElementById("err_tel").innerHTML =""; telefonC = document.getElementById("telefon").value; telefonSablon = /^\+\d{11}$/ if (!(telefonC.match(telefonSablon))) { document.getElementById("err_tel").innerHTML = "Номер телефона начинается с '+' и потом следуют 11 цифр (+xxxxxxxxxxx)!!!"; necazuri++; } return (necazuri==0); } </script> </body> </html>

Слайд 38


ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ. Стили body{background-color: #404040;} .err{color: orange; font-size: 12px; } .corp{ width:600px; height:400px; } label, legend, p{ font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:12px; color: #ffffcc; font-weight:bold; letter-spacing: 3px;} .standard { font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:10px; color: #ffffcc; } input[type="submit"], input[type="reset"] { background-color: #ffffcc; border: 2px solid #ffffcc; color: #404040; padding: 10px 30px; font-weight: bold; }
Описание слайда:
ПРИМЕР ОПРЕДЕЛЕНИЯ И ИСПОЛЬЗОВАНИЯ РЕГУЛЯРНЫХ ВЫРАЖЕНИЙ. Стили body{background-color: #404040;} .err{color: orange; font-size: 12px; } .corp{ width:600px; height:400px; } label, legend, p{ font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:12px; color: #ffffcc; font-weight:bold; letter-spacing: 3px;} .standard { font-family: Arial, Helvetica, sans-serif; text-align:left; font-size:10px; color: #ffffcc; } input[type="submit"], input[type="reset"] { background-color: #ffffcc; border: 2px solid #ffffcc; color: #404040; padding: 10px 30px; font-weight: bold; }

Слайд 39


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 40


РЕЗУЛЬТАТ ПРИМЕРА с ошибками
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА с ошибками

Слайд 41


РЕЗУЛЬТАТ ПРИМЕРА. Ошибки частично удалены
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА. Ошибки частично удалены

Слайд 42


РЕЗУЛЬТАТ ПРИМЕРА
Описание слайда:
РЕЗУЛЬТАТ ПРИМЕРА

Слайд 43


JAVASCRIPT DEBUGGING В случае если появляются трудности в нахождении ошибок в скрипте используйте JS debugger Для активации debugger-а в браузере используйте клавишу быстрого доступа F12
Описание слайда:
JAVASCRIPT DEBUGGING В случае если появляются трудности в нахождении ошибок в скрипте используйте JS debugger Для активации debugger-а в браузере используйте клавишу быстрого доступа F12

Слайд 44


JS-МЕТОДЫ ИСПОЛЬЗУЕМЫЕ ДЛЯ СОЗДАНИЯ ЭФФЕКТОВ http://www.w3schools.com/jquery/jquery_ref_effects.asp http://api.jquery.com/category/effects/ http://w.ict.nsc.ru/books/InetTechn/lab05/lab5-t.htm УСПЕХОВ В СОЗДАНИИ ГРАФИЧЕСКИХ ЭФФЕКТОВ!!!
Описание слайда:
JS-МЕТОДЫ ИСПОЛЬЗУЕМЫЕ ДЛЯ СОЗДАНИЯ ЭФФЕКТОВ http://www.w3schools.com/jquery/jquery_ref_effects.asp http://api.jquery.com/category/effects/ http://w.ict.nsc.ru/books/InetTechn/lab05/lab5-t.htm УСПЕХОВ В СОЗДАНИИ ГРАФИЧЕСКИХ ЭФФЕКТОВ!!!

Слайд 45


ДОПОЛНИТЕЛЬГЫЕ РЕКОММЕНДАЦИИ Для красивого и успешного создания front-end-а рекомендуется использовать: Bootstrap JSON Backbone.js (http://backbonejs.ru/)
Описание слайда:
ДОПОЛНИТЕЛЬГЫЕ РЕКОММЕНДАЦИИ Для красивого и успешного создания front-end-а рекомендуется использовать: Bootstrap JSON Backbone.js (http://backbonejs.ru/)

Слайд 46


!!! Знания Что мы учили за последние 3 пары? Способности/Навыки Что мы можем сделать с полученными знаниями? Отношения / Поведение Что мы можем применить, как, где и для чего можно применить знания и навыки полученные за последние 3 урока?
Описание слайда:
!!! Знания Что мы учили за последние 3 пары? Способности/Навыки Что мы можем сделать с полученными знаниями? Отношения / Поведение Что мы можем применить, как, где и для чего можно применить знания и навыки полученные за последние 3 урока?

Слайд 47


!!! На следующей неделе, 06.05.2015, пишем 2-ю аттестацию Работа будет состоять из задач решение которых демонстрирует ваши знания, навыки и отношения из области CSS и JavaScript Не забудьте повторить темы 7-12, в том числе примеры с лабораторных работ!!!
Описание слайда:
!!! На следующей неделе, 06.05.2015, пишем 2-ю аттестацию Работа будет состоять из задач решение которых демонстрирует ваши знания, навыки и отношения из области CSS и JavaScript Не забудьте повторить темы 7-12, в том числе примеры с лабораторных работ!!!

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию