JavaScript : String 메소드

2022.12.02.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 56

---

Review

 

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 56

 

 

 

 

 

 

 

 

 

 

---

 

<strings 알아보기>

 

 

- JavaScript 

 

    <script>

      let x = "Hello";
      let a = "world";
      let y = new String("Hello");
      let arr = ["하나", 100, 200, 300];
      let arr1 = new Array("하나", 100, 200, 300);

      console.log(x.length);

      document.write(x.length + "<br>");
      document.write(arr.length + "<br>");
      document.write(x.slice(2, 4) + "<br>");
      document.write(arr.slice(2, 3) + "<br>");
      document.write(arr.slice(-3, -2) + "<br>");
      document.write(x.substring(2, 4) + "<br>");
      //document.write(arr.substring(2, 4) + "<br>");
      //substring()메소드는 문자객체의 시작에서 끝 인덱스 전까지의 문자열을 반환
      document.write(x.substr(2, 3) + "<br>");
      document.write(x.substr(-3, 2) + "<br>");
      //document.write(arr.substr(2, 3) + "<br>");
      //substr()메소드는 문자 객체의 시작에서 몇 개의 문자열을 반환
      document.write(x.replace("He", "he") + "<br>");
      document.write(x.concat(" ", a) + "<br>");
      document.write(x.concat(" good") + "<br>");

      let b = "Microsoft and microsoft and microsoft";
      document.write(b.replace(/microsoft/i, "w3school") + "<br>");
      document.write(b.replace(/microsoft/g, "w3school") + "<br>");
      document.write(b.replace(/Microsoft/g, "w3school") + "<br>");
      document.write(b.replaceAll("microsoft", "w3school") + "<br>");

      let c = b.replaceAll("microsoft", "w3school");
      document.write(c + "<br>");

      let d = c.replaceAll("Microsoft", "w3school");

      document.write(d + "<br>");
      document.write(b.toUpperCase() + "<br>");
      document.write(b.toLowerCase() + "<br>");

      let text = "             hello          ";
      document.write(text.length + "<br>");

      let text2 = text.trim();
      let text3 = text.trimEnd();

      document.write(text3.length + "<br>");
      document.write(x.charAt(2) + "<br>");
      document.write(x.charCodeAt(3) + "<br>");
      document.write(x[2] + "<br>");

      let txt = "nice,to,meet,you";
      let txt2 = txt.split(",");

      for (let i = 0; i <= 3; i++) {
        document.write(txt2[i] + "<br>");
      }

      let txt3 = "hello";
      let txt4 = txt3.split("");

      for (let i = 0; i <= 4; i++) {
        document.write(txt4[i] + "<br>");
      }

      document.write(txt3.search("H") + "<br>");
      document.write(txt3.match("h") + "<br>");

    </script>

 

 

 

---

 

 

<strings 예제>

 

 

- JavaScript 

 

    <script>
      
      let str = "123456-1234567";
      let star = "*";

      document.write("123456-1" + star.repeat(6) + "<br>");
      //let str0 = str.slice(0, 8);

      let str0 = str.substring(0, 8);

      document.write("slice : " + str.slice(0, 8) + "******" + "<br>");
      document.write("substring : " + str.substring(0, 8) + "******" + "<br>");
      document.write("substr : " + str.substr(0, 8) + "******" + "<br>");
      document.write(str.slice(8) + "<br>");

      let str1 = str.slice(8);
      let str2 = str.slice(-6);

      document.write(
        "substring : " + str.replace(str.substring(8), "******") + "<br>"
      );
      document.write(str.replace(str2, "******") + "<br>");
      document.write(
        "substr : " + str.replace(str.substr(8, 6), "******") + "<br>"
      );

    </script>

 

 

 

 

---

 

 

<strings 예제2>

 

 

- JavaScript 

 

    <script>
      
      let name = prompt("당신의 영문이름은?");
      let tel = prompt("당신의 연락처는?");

      document.write(
        name.toUpperCase() +
          "<br>" +
          tel.substring(0, tel.length - 4) +
          "****" +
          "<br>"
      );

      document.write(
        name.toUpperCase() +
          "<br>" +
          tel.replace(tel.slice(-4), "****") +
          "<br>"
      );

    </script>

 

 

0

 

---

 

 

<strings 예제3>

 

 

- JavaScript 

 

    <script>
      
      //   let x = "abcdefff";
      //   document.write(x.search("f") + "<br>" + x.indexOf("f", 7) + "<br>");

      let userEmail = prompt("당신의 이메일 주소는?");
      let arr = [".com", ".co.kr", ".net", ".or.kr", ".go.kr", ".ac.kr"];
      let check1 = false;
      let check2 = false;

      if (userEmail.indexOf("@") > 0) {
        check1 = true;
      }

      let len = arr.length;
      for (let i = 0; i < len; i++) {
        if (userEmail.indexOf(arr[i]) > 0) {
          check2 = true;
        }
      }

      if (check1 == true && check2 == true) {
        document.write(userEmail);
      } else {
        alert("이메일 형식이 잘못 되었습니다");
        location.reload();
      }

    </script>

 

 

0

 

---

 

<함수 function 응용 예제>

 

 

- HTML

 

    <div id="div1" class="on">오늘은 금요일입니다.</div>
    <button onclick="fnc()">서식 바꾸기</button>

 

 

- CSS

 

      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

      * {
        margin: 0;
        padding: 0;
      }

      body,
      button {
        text-align: center;

        background: #eee;

        font: 18px "Montserrat", sans-serif;
        font-weight: 500;

        padding: 10px 20px;
        margin-top: 30px;
        margin-left: 10px;
      }

      .on {
        background: #ccc;
        padding: 10px;
      }

      .active {
        background: #f00;
        padding: 10px;
      }

 

 

- JavaScript 

 

    <script>

      function fnc() {
        let x = document.getElementById("div1");
        if (x.className == "on") {
          //x.className = "active";
          //x.className = x.className.replace("on", "active");
          //x.className = x.className.concat(" active");
          x.className += " active";
          //x.className = x.className + " active";
        } else {
          x.className = "on";
        }
      }
      
    </script>

 

0

 

---

 

<string 응용 예제>

 

 

- HTML

 

    <div class="btn">
      <span onclick="prev()">이전</span>
      <span onclick="next()">다음</span>
    </div>

    <img src="../images/photo1.jpg" alt="photo1" />

 

 

- CSS

 

      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

      * {
        margin: 0;
        padding: 0;
      }

      body {
        text-align: center;

        background: #eee;

        font: 18px "Montserrat", sans-serif;
        font-weight: 500;

        padding: 10px 20px;
        margin-top: 30px;
        margin-left: 10px;
      }

      .btn span {
        cursor: pointer;

        padding-right: 20px;
      }

      img {
        margin-top: 30px;
      }

 

 

- JavaScript 

 

    <script>
      
      let i = 1;

      function prev() {
        i--;
        if (i < 1) i = 6;
        document.getElementsByTagName("img")[0].src =
          "../images/photo" + i + ".jpg";
      }

      function next() {
        i++;
        if (i > 6) i = 1;
        let imgscr = document.getElementsByTagName("img")[0];
        let im = imgscr.getAttribute("src");
        //getAttribute() 메서드는 요소의 속성 값을 반환
        imgscr.setAttribute("src", im.replace(im.slice(-5, -4), i));
        imgscr.setAttribute("src", im.replace(im.substr(-5, 1), i));
        //setAttribute() 메서드는 속성에 새 값을 설정
      }

    </script>

 

 

0

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

* 내용 출처

: 코딩의 시작, TCP School