Нека проектираме текстови редактор, в който можете да въвеждате своя текст и да получавате резултат от броя на думите във вашия текст, като използвате HTML, JavaScript и CSS стилизиране.

<!--Code Segment1-->
<!DOCTYPE html>
<html>
<head> 
  <title>Form with String object</title>
</head>

В тази част от кода ние даваме заглавие на нашата уеб страница, което е „Формуляр с обект String“ в тага <title>, който е вграден в тага <head>.

Вътре в атрибута style на тага <body> ние указваме CSS стила от background-color до orange. Това ще зададе цвета на фона на уеб страницата на оранжево.

В този кодов сегмент ние даваме име на <form>, което е wordcount и указваме текстовата област, в която потребителят ще въвежда текста. Името на текстовата област е дадено като wordcount2, което ще бъде полезно за JavaScript за достъп до конкретните елементи на документа. Ние предписваме този специфичен стил на текстовата област:

  1. Брой редове във височина: 12
  2. Брой колони по ширина: 38
  3. Атрибут за обвиване: виртуален (Атрибутът за обвиване указва как текстът в текстова област трябва да бъде обвит, когато е изпратен във формуляр. Wrap когато е зададено на virtual означава, че дългите редове са обвити в textarea, но не са обвити в данните изпратено до скрипта за обработка.)
  4. Цветът на текста е бял, а размерът на шрифта на текста е зададен като 20px.
  5. Цветът на фона е зададен като черен за текстовата област.

Поставен е и бутон със стойност Calculate Words, който при натискане ще покаже резултатите от броя на думите, т.е. извиква функцията Countit(). И се посочва текстова област, която ще показва изхода.

Създадохме функция с име Countit() в тага <script>. В тази функция сме инициирали String обект formcontent, който ще съдържа текста, въведен от потребителя, посочен от имената на елементите на документа. След това извикваме функцията split() на обекта String и съхраняваме резултата в същия обект.

Използване на функцията split(): Разделяне на низ в масив от поднизове

Напр.:var str = „Как си днес?“

var res = str.split(“ “)

Резултат: [„Как“, „си“, „ти“, „правиш“, „днес?“]

След това преброяваме дължината на масива String обект formcontent с помощта на атрибута length на масива и извеждаме резултата в атрибута value на текстовия елемент wordcount3.

Това е краят на кодовия сегмент.

Изход:

####Благодаря, че прочетохте, ####Проверявайте следващите няколко статии от същата серия. ####Следвайте: @subhajit_saha

Първоначално публикувано на



Въведение в поредицата JavaScript - #1 - Формуляр с низов обект
Нека проектираме текстов редактор, в който можете да въвеждате своя текст и да получавате резултат от броя на думите във вашия текст използвайки...dev.to