Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Как сделать первую букву заглавной с использованием языка javascript

Доброго времени суток, дорогие подписчики и гости моего блога. Сегодня я решил написать небольшую, но интересную и полезную статейку, которая поведает вам, как создается первая буква заглавная JavaScript. Я заметил, что новички программирования на языке скриптов задают этот вопрос достаточно часто.

А ведь все программируется очень просто! Поэтому сейчас вы узнаете те простые инструменты JS, которые помогут вам вытащить нужные строковые значения и отредактировать их первые символы. Я приведу несколько примеров для разных ситуаций и добавлю к каждому пояснение. Ну что ж, давайте приступать!

Знакомство с основными инструментами

Для начала я покажу вам самый простой пример смены строчной первой буквы на заглавную.

var s = «я – студент!»;

s = s[0].toUpperCase () + s.substr (1).toLowerCase ();

alert (s); //в результате будет написано «Я – студент!»

toUpperCase () изменяет все маленькие буквы на большие. В примере же я выбираю первую букву строковой переменной s[0], а после редактирую ее.

toLowerCase () действует в обратном направлении. Он переводит все буквы с верхнего регистра в нижний.

Двигаемся дальше.

Метод substr (start [,length]) возвращает подстроку из заданной строки, начиная с позиции, которая задается в качестве первого параметра – start. Вторым параметром – length – определяется длина подстроки. Если она не указана, то берутся все символы от старта до конца строковой переменной. В презентованном случае берутся все символы, начиная с первого.


Помимо этого метода, можно также использовать slice (start [,end]). Он позволяет выбирать указанные элементы из массива или же подстроки от начальной позиции до конечной, если она указана.

Однако передавать значения через alert () не практично. Интереснее изменять контент страницы сервиса. Поэтому чтобы далее не возникала целая туча вопросов, в данной главе я также познакомлю вас с основными командами языка, которые помогут с решением поставленной задачи.

Для начала стоит вспомнить, что при загрузке страницы в браузере создается объектная модель документа (Document Object Model) более известная под названием DOM. Благодаря html DOM, JavaScript может получать и изменять все элементы веб-страницы. При чем отыскивает он их пятью способами:

  • По идентификатору (id) – document.getElementById («someId»);
  • По названию тега – document.getElementsByTagName («article»);
  • По названию имени класса – document.getElementsByClassName («someClass»);
  • По селектору каскадных таблиц стилей css – document.querySelectorAll («article.new»);
  • И по объектам или коллекциям документа html – document.title, document.body, document.forms, document.links и т.д.

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

Поэтому после указания команды поиска стоит через точку прописывать свойство innerHTML. Оно позволит получить и в последствии изменить (перезаписать) текстовое содержимое элементов.

Вот теперь можно перейти к полноценной программной реализации.

Решение задачи найдено!

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
    color: blue;
    text-decoration: overline;
    text-align: center;
}
p {
 text-align: center;
}
.first {
 background: #FDF5E6;
 padding: 13px;
}
.second {
 background: #FFDEAD;
  padding: 13px;
}
 
</style>
</head>
<body>
<div class ="first">
<h3>Абзац всегда будет начинаться с прописной буквы</h3>
<p id="chapter">в этом предложении первая буква изменится на заглавную!</p>
</div>
 
<div class ="second">
<h3>Каждое слово внутри параграфа будет начинаться с прописной буквы</h3>
 
<p id="word">а тут каждое слово c большой буквы</p>
</div>
 
<script>
 
    function GetBigLetter() {
      var text = document.getElementById("chapter").innerHTML;
      return text[0].toUpperCase() + text.slice(1);
    }
     function GetAllBigLetter() {
      var text = document.getElementById("word").innerHTML;
      //переменная для хранения слова
      var array=""; 
      //строка для хранения результата
      var res = "";
      for(var i =0; i< text.length; i++) {
           //записываю посимвольно слова
      	   array += text[i];  
          // если найден пробельный символ или индекс строки дошел до конца
           if(text[i] == " " || i == text.length-1){    
              /* то записываем (добавляем) в результирующую переменную слово с измененной первой буковкой*/
              res += array[0].toUpperCase() + array.slice(1);
              array="";
           }
        }
        return res;
    }
document.getElementById("chapter").innerHTML = GetBigLetter();
document.getElementById("word").innerHTML = GetAllBigLetter();
</script>
 
</body>
</html>

Надеюсь, вам понравилось и было полезным предложенное мной решение. Обязательно подписывайтесь на обновления блога, если хотите быть в курсе всех новых публикаций. Буду благодарен за репосты статей. До скорой встречи! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 31 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: