A Практичне завдання №1
Створіть функцію, яка перераховуватиме елементи масиву у вигляді, звичному людині. Тобто, якщо у нас є масив на один елемент, вона поверне тільки його. Якщо елементів в масиві два, то вони будуть зв'язані союзом «і». Якщо елементів три, то після нульового буде поставлена кома, а останні два будуть виведені через союз «і». Якщо елементів більше, то перші будуть перераховані через кому, а останні два — через союз «і».
Іншими словами, після виконання приведеного нижче коду будуть виведено три діалогові вікна.
function showArrayContent(arrayToShow){
// Тут йде код функції.
}
var а = new Array('Текст'); // Визначуваний масиви.
var b = new Array('день', 'ніч');
var c = new Array('зима', 'весна', 'літа', 'осінь');
alert(showArrayContent(a)); // Виводиться вміст масивів, використовуючи створену вище функцію.
alert(showArrayContent(b));
alert(showArrayContent(c));
Вікна виглядатимуть так:
Отже, Ваше завдання визначити функцію, яка перераховує елементи масиву залежно від його розміру. Для цього варто скористатися оператором умовного переходу і властивістю «масив.length».
Практичне завдання №2
Реалізуйте мигання тексту в рядку стану. Тобто, є якийсь текст. Через секунду він пропадає. Ще через секунду з'являється знову. І знову пропадає. Тепер пропадає. З'являється. Пропадає. І так далі.
Метод document.Write().
Метод «document.write()» дозволяє дописувати XHTML-розмітку на Веб-сторінку.
Метод «document.Write()»
Метод «document.write()» дописує на Веб-сторінку відразу після закриваючого тега «</script>» переданий аргумент. Тобто, після виконання коду нижче на сторінку буде дописаний результат обчислень.
var a=10*20/30+40-50;//Зберігаємо число в змінній.
document.write(a);//Дописуємо це число на Веб-сторінку.
Точно також як і текст, на сторінку можна дописувати яку-небудь розмітку XHTML. При цьому слід стежити за тим, щоб на сторінці не виникли синтаксичні помилки, тобто щоб всім відкриваючими тегам відповідали закриваючі.
document.write('<strong>Виділення<\/strong>');//Вивід елементу ‹strong›.
Зверніть увагу на закриваючий тег «</strong>». Перед дробом в ньому з'явилася зворотна коса. Це пов'язано з тим, що просто так послідовність «</>» усередині елементу ‹script› записати не можна. Сценарій уривається як тільки зустрічається ця послідовність, тому її завжди необхідно розділяти. Простий варіант — додавання зворотною косою між цими двома символами.
Об’єкти String.
Рядки – це фундаментальне поняття будь-якої мови програмування. Рядок, що представляє собою набір алфавітно-цифрових символів, може бути або текстовим (літеральним) рядком, або рядковою змінною. JavaScript тому не виключення, але тільки замість змінних, для зберігання рядків використаються об'єкти. Працювати із цими об'єктами можна як зі звичайними змінними. При присвоєнні змінній рядкового змісту ця змінна автоматично стає об'єктом зі своїми методами й властивостями. Цей спосіб створення об'єктів рядкового типу є неявним. Також є можливість створення рядкового об'єкта явно, за допомогою оператора new. Спосіб створення об'єктів ніяк не впливає на їхнє подальше використання. Щоб послідовність символів була рядком її потрібно укласти в одинарні ('') або подвійні ("") лапки. І одинарні й подвійні лапки мають рівні пріоритети й уведені для можливості використовувати вкладені рядки. Кожний новий вкладений рядок повинен мати інший тип лапок. Кілька рядків можна з’єднати в один за допомогою операції конкатенації (+) рядків.
Приклади створення й використання рядків.
//Створення та об’єднання рядків
s1 = "Odessa";
var s2 = new String();
s2 = "Kyiv";
s3 = s1 + " та " + s2;
s4 = "Odessa та Kyiv";
if (s3 == s4){
alert ('Це міста України');// Виведеться вікно з повідомленням тому що
// об’єкти s3 та s4 містять однакові рядки.
}
document.write("<p style="text-align:center">Odessa</p>");//Зразок помилкового запису
document.write("<p style='text-align:center'>Odessa</p>");//Зразок правильного запису
Враховуючи те, що в JavaScript рядки застосовуються найчастіше, розберемо всі властивості й методи на прикладах . Існують методи, дію яких можна побачити тільки після виводу перетвореного рядка на екран методом write об'єкта document. Ці методи міняють тільки форматування тексту розташованого в рядку. Але є також методи, що змінюють значення рядка або повертають результат обробки декількох рядків. Розглянемо по черзі й ті й інших.
anchor( ) |
Створює екземпляр дескриптора <a> з атрибутом name, що приймає значення рядка переданого методу. |
link( ) |
Створює екземпляр дескриптора <a> з атрибутом href, що приймає значення рядка переданого методу. |
Приклад реалізації в JavaScript посилання та відповідної йому закладки.
MyLink = "Посилання";
document.write(MyLink.link("#zakladka"));
.........
z = "Закладка";
document.write(z.anchor("zakladka"));
В HTML цей приклад виглядає наступним чином:
<a href="#zakladka">Посилання</a>
.........
<a name="zakladka">Закладка</a>
big( ) |
Перетворить рядок в екземпляр дескриптора <big> |
blink( ) |
Перетворить рядок в екземпляр дескриптора <blink> |
bold( ) |
Перетворить рядок в екземпляр дескриптора <bold> |
fixed( ) |
Перетворить рядок в екземпляр дескриптора <tt> |
fontcolor( ) |
Створює екземпляр дескриптора <font> з атрибутом color, який приймає значення рядка, що передається методу. |
fontsize( ) |
Створює екземпляр дескриптора <font> з атрибутом size, який приймає значення рядка, що передається методу. |
italics( ) |
Перетворює рядок в екземпляр дескриптора <i> |
small |
Перетворює рядок в екземпляр дескриптора <small> |
strike( ) |
Перетворює рядок в екземпляр дескриптора <strike> |
sub( ) |
Перетворює рядок в екземпляр дескриптора <sub> |
sup( ) |
Перетворює рядок в екземпляр дескриптора <sup> |
toLowerCase( ) |
Перетворює символи вихідного рядка в нижній регістр |
toUpperCase( ) |
Перетворює символи вихідного рядка в верхній регістр |
Приклад використання наведених вище методів:
str = "Цей рядок змінює форматування,";
document.write(str.big()+" а цей ні<br />");
document.write(str.bold()+" а цей ні<br />");
document.write(str.fixed()+" а цей ні<br />");
document.write(str.fontcolor('green')+" а цей ні<br />");
document.write(str.fontsize('5')+" а цей ні<br />");
document.write(str.italics()+" а цей ні<br />");
document.write(str.small()+" а цей ні<br />");
document.write(str.strike()+" а цей ні<br />");
document.write(str.sub()+" а цей ні<br />");
document.write(str.sup()+" а цей ні<br />");
document.write(str.toLowerCase()+" а цей ні<br />");
document.write(str.toUpperCase()+" а цей ні<br />");
Цей рядок змінює форматування, а цей
ні
Цей рядок змінює форматування,
а цей ні
Цей
рядок змінює форматування, а
цей ні
Цей рядок змінює
форматування, а цей ні
Цей
рядок змінює форматування, а цей ні
Цей рядок змінює форматування, а
цей ні
Цей рядок змінює форматування,
а цей ні
Цей рядок змінює
форматування, а цей ні
Цей
рядок змінює форматування, а цей
ні
Цей рядок змінює форматування,
а цей ні
цей рядок змінює
форматування, а цей ні
ЦЕЙ РЯДОК
ЗМІНЮЄ ФОРМАТУВАНЯ, а цей ні
Нижче в таблиці перераховані методи, що дозволяють перетворювати рядок властивим йому способом. У багатьох методах використовується параметр index – як правило це ціле додатне число.
charAt(index) |
Повертає символ, розташований на вказаному місці рядка (з індексом рівним index). Нумерація символів рядка починається з нуля. |
charCodeAt(index) |
Повертає код символу (Unicode), розташованого на вказаному місці (з індексом рівним index) в рядку. Якщо в рядку не існує символу з вказаним індексом повертається значення NaN. |
concat(string2) |
Повертає рядок, який є результатом об’єднання двох рядків |
indexOf(substring, startindex) |
Повертає ціле число – позицію першого входження підрядка substring в рядок, починаючи з позиції startindex. Якщо такого рядка не знайдено, повертає -1. |
lastindexOf(substring, startindex) |
Повертає ціле число – позицію останнього входження підрядка substring в рядок, з позиції startindex. Якщо такого підрядка не знайдено, повертає значення -1. |
match(regularExpression) |
Повертає масив, який складається з символів, що відповідають регулярному виразу regularExpression |
replace(regularExpression, replacementString) |
Повертає рядок, в якому фрагменти вихідного рядка, які відповідають образу регулярного виразу regularExpression, замінені на рядок replacementString |
search(regularExpression) |
Повертає позицію першого підрядка, що відповідає регулярному виразу. Якщо такий рядок не знайдено, то повертається значення -1. |
slice(start[,end]) |
Повертає частину рядка, починаючи з позиції start та закінчуючи позицією end. Якщо аргумент end відсутній, то повертається рядок від start до самого кінця |
split(separator) |
Повертає масив рядків, створений з рядка, з допомогою дільника separator. Дільник також може бути регулярним виразом. |
substr(start[, lenght]) |
Повертає частину рядка, починаючи з позиції start та має певну вказану довжину length. Якщо довжина не вказана, то повертається весь рядок починаючи з позиції start. |
substring(start, end) |
Повертає частину рядка, починаючи з позиції start та закінчуючи позицією end. Найменше з двох заданих значень використовується в якості початкової позиції виділеного рядка. |
Також у рядкового об’єкта існує властивість length, яка розрахована тільки для зчитування та зберігає кількість символів у рядку.
В прикладах показано як правильно використовувати всі перераховані вище методи властивості:
str = "This is simple text";
str1 = str.charAt(10);
document.write(str1 + "<br />");
str2 = str.charCodeAt(4);
document.write(str2 + "<br />");
str3 = str.concat(" !!!!!!!!!!!!");
document.write(str3 + "<br />");
str4 = str.indexOf("is",4);
document.write(str4 + "<br />");
str5 = str.lastIndexOf("is",15);
document.write(str5 + "<br />");
str6 = str.match("si");
for (i=0; i<str6.length; i++){
document.write(str6[i] + " * "); }
document.write("<br />");
str7 = str.replace("is s","is not s");
document.write(str7 + "<br />");
str8 = str.search("text");
document.write(str8 + "<br />");
str9 = str.slice(8);
document.write(str9 + "<br />");
str10 = str.split(" ");
for (i=0; i<str10.length; i++){
document.write(str10[i] + " * ");}
document.write("<br />");
str11 = str.substr(8,6);
document.write(str11 + "<br />");
str12 = str.substring(8,14);
document.write(str12 + "<br />");
str13 = str.length;
document.write(str13 + "<br />");
Результати роботи приклада:
m 32 This is simple text !!!!!!!!!!!! 5 5 si * This is not simple text 15 simple text This * is * simple * text * simple simple 19
Ще один приклад, що допоможе при виконанні домашнього завдання:
Є багаторядкове текстове поле та кнопка. При натисканні на кнопку, треба вивести в діалогове вікно кількість символів в полі та кількість слів (під словом приймається послідовність символів розділених пробілами).
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE="javascript">
<!--
function getInfo(){
colSymbol = 0; // Змінна, що зберігає кількість символів
colWord = 0; // Змінна, що зберігає кількість слів
temp = document.getElementById("textarea1").getAttribute("value"); // Назначимо
// значення поля допоміжної змінної
colSymbol = temp.length; // Повертаємо довжину рядка в символах
wordArray = temp.split(" "); // Розбиваємо рядок пробілами на окремі слова
for (i=0; i<wordArray.length; i++){ // Перевіряємо, якщо
if (wordArray[i]!=''){ // в отриманому масиві якийсь
colWord++; // елемент зберігає пустий рядок, то його
// не враховуємо
}
}
alert("Текст містить:\n" + colSymbol + " символів;\n" + colWord + " слів.");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TEXTAREA rows="5" cols="40" id="textarea1" name="textarea1"></TEXTAREA><br />
<INPUT type="button" value="Click" id="button1" name="button1" onclick="getInfo()" />
</BODY>
</HTML>
Можете спробувати наведений приклад на практиці. Тільки треба врахувати, що в даному випадку скрипт буде працювати коректно якщо Ви при введені тексту не будете натискати кнопку ENTER, а перехід на новий рядок текстове поле буде робити автоматично при переповнені рядка.