ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [TIL] 엘리스 SW 엔지니어트랙 2기 - Javascript 함수 활용(Week2,Day8)
      IT/엘리스SW 2022. 4. 13. 23:21
      728x90

      엘리스 SW엔지니어 트랙 2기 DAY_8

      📝 목차

      1.  오늘의 잡담
      2.  생활코딩 이고잉님 수업 따라가기
        • html 태그, javascript 복습
        • 반복문 활용하여 a 태그도 낮, 밤 바꿔주기
        • function 함수 배우기
        • function 활용
        • 추가연습
        • innerHTML 활용해서 만들어보기

       

      🎙오늘의 잡담

      오늘은 이고잉님의 수업을 중점으로 정리했다.

      이고잉 님 수업 마지막에 머신러닝을 잠깐 맛보았는데, 저런 기능을 저렇게 손쉽게 활용할 수 있다니,

      나도 언능 잘하고 싶다는 마음 뿜뿜🧑🏻‍💻

       

      이고잉님 수업 후 코치님의 수업에서는 이해도 잘 못한 채 따라쓰기 바빴다.

      각종 자바스크립트 event 들에 무슨 느낌인지만 알고 그냥 이리저리 하다보니 수업끝..

      그래도 지난 css 같은 금세 까먹을만한 것들을 추가 문제처럼 간단히 내주고 복습하듯 해서 좋다.

       

      저녁에는 첫 스터디 모임이 만들어졌다 (!)

      다들 젊구나 

      ^^^^^^...

       

      전공자 분들도 있고 비전공 분들도 있고 , 다음주부터 시작인데 다들 본 수업에 방해가 되지 않는 선에서

      최선의 스터디를 하자는 마음을 가지고 있어서 좋다.

      어떻게 운영할 지는 초안식으로 짜게 됐고, 다음주 1주일을 운영해보면서 더 좋은 방법이 있으면 그 쪽으로 개선해보자 얘기했다.

       

       

      💻  생활코딩 이고잉님 수업 따라가기

       

      html 태그, javascript 복습

      언제나 기본의 시작

      <!DOCTYPE html>
<html>
  <head>
    <title>WEB</title>
  </head>
  <body>
    <h1>
      <a href="index.html">WEB</a>
    </h1>
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">Javascript</a></li>
    </ol>
    <h2>Welcome</h2>
    Hello, WEB!
  </body>
</html>

      버튼 만들기

      <input type="button" value="night" onclick="">

      버튼 눌렀을 때 배경색이 검정색, 글자는 흰색이 되게

          <input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
    ">

      night  버튼을 눌렀을 때 day로 바뀌고, day를 눌렀을때는 night로 바뀌게 + day일때는 배경이 흰색에 글자가 검정으로.

        <input type="button" value="night" onclick="
      if(this.value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        this.value = 'day';
    } else{
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        this.value = 'night';
    }
    ">

      반복문 활용하여 a 태그 낮 밤에 맞춰주기

                          
                    //night일때, 모든 a태그의 컬러를 흰 색으로
                    let as = document.querySelectorAll('a');
                      for(let i=0; i<as.length; i=i+1){
                              as[i].style.color='white';
                              }
                     //day일때, 모든 a태그의 컬러를 검은색으로
                    let as = document.querySelectorAll('a');
                      for(let i=0; i<as.length; i=i+1){
                              as[i].style.color='black';
                          }

      function 함수 배우기

       

      배열은 서로 연관된 데이터를 모아서 그룹핑 한 후에 이름을 붙인것

      함수는 서로 연관된 코드를 그룹핑해서 이름을 붙인것

       

      함수의 return => 출력값

      console.log 로 하면 undefined로 나옴.

      이 차이를 알고 있어야됨

       

      function 활용

      - night과 day 버튼을 눈에 쏙 보이게 만들어보기

      <script>
            function night() {
                document.querySelector('body').style.backgroundColor = 'black';
                    document.querySelector('body').style.color = 'white';
                    let as = document.querySelectorAll('a');
                      for(let i=0; i<as.length; i=i+1){
                              as[i].style.color='white';
                          }
            }

            function day() {
                    // 아니라면 아래 코드가 실행된다. 
                    document.querySelector('body').style.backgroundColor = 'white';
                    document.querySelector('body').style.color = 'black';
                    // 이 버튼의 value값을 night로 변경한다. 
                    let as = document.querySelectorAll('a');
                      for(let i=0; i<as.length; i=i+1){
                              as[i].style.color='black';
                          }
            }
        </script>

      기존에 만들었던 night 과 day의 코드를 각각의 함수로 만든다.

      그리고 기존의 함수는?

              <input type="button" value="night" 
            onclick="
                // 만약에 이 버튼의 value 값이 night라면 아래 코드가 실행되고, 
                if(this.value === 'night'){
                        night();
                    // 이 버튼의 value값을 day로 변경한다. 
                    this.value = 'day';
                } else {
                        day();
                        this.value = 'night';
                }
            "
        >

      night 이면 night() 함수만, day면 day함수만 보이게 해주는, 매우 정리돼 보이는 식으로 짜잔

       

      추가 연습

      ...을 누르면 안의 내용이 나오게 하기

      출처. 엘리스sw 이고잉님 수업중

      다양한 방법들이 있음.

      재사용성이 높은, 좋은 코드를 만드려고 하지말고 일단 되게 하는 게 지금 수준에서는 더 중요하다.

       

      1. ... 과 뒤 문장에 span 태그로 각각 묶어 '두 덩어리'로 나눠주기

      2. 뒤 문장을 css 속성인 display = 'none ' 값을 주어 안보이게 해놓음 + id 값 주기

      3. ... 을 클릭 시 id값을 준 문장을 display = inline 형태로 보여주게 하기

        Javascript is Lorem <span 
    style="
      background-color: rgb(223, 217, 217);
      padding: 0 5px;
      cursor: pointer;
      " 
    onclick="
      document.querySelector('#hidden').style.display='inline';
      this.style.display = 'none';
    ">...</span>
  <span id="hidden" style="display: none;">ipsum dolor sit amet consectetur adipisicing elit. Neque perspiciatis
    temporibus hic ex nisi ipsam sequi voluptate a, rerum voluptas, nihil enim totam amet animi illum eveniet nulla
    blanditiis aspernatur.</span>

       

      innerHTML 사용해서 만들어보기

      innerHTML은 중요함 ! 알아두기

      JavaScript is <span 
            style="
                background-color:rgb(215, 215, 215);
                padding:0 5px;
                cursor:pointer;
            " 
            onclick="
                this.style.display='none';
                document.querySelector('#content').innerHTML = `ipsum dolor sit amet consectetur adipisicing elit. Neque perspiciatis temporibus hic ex nisi ipsam sequi voluptate a, rerum voluptas, nihil enim totam amet animi illum eveniet nulla blanditiis aspernatur.`;
            ">...</span> 
            <span id="content"></span>

       

      'IT > 엘리스SW' 카테고리의 다른 글

      [TIL] 엘리스 SW 엔지니어트랙 2기 - 자기소개 웹페이지 만들기(Week2,Day10)  (0) 2022.04.15
      [TIL] 엘리스 SW 엔지니어트랙 2기 - Javascript DOM(Week2,Day9)  (0) 2022.04.15
      [TIL] 엘리스 SW 엔지니어트랙 2기 - Javascript (Week2,Day7)  (0) 2022.04.12
      [TIL] 엘리스 SW 엔지니어트랙 2기 - Javascript 시작 (Week2,Day6)  (0) 2022.04.11
      [TIL] 엘리스 SW 엔지니어트랙 2기 - git/github (Week1,Day5)  (0) 2022.04.09

      관련글 관련글 더보기

      댓글

    티스토리툴바