ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 2023년 05월17일 수업 내용 정리 (자바스크립트)
      국비 교육 내용 정리 2023. 5. 17. 16:51

      부트스트랩

       

       

      1. 부트스트랩을 이용한 modal 안에 로그인 폼 만들기

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Bootstrap start</title>
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
      </head>
      <body>
         <!-- Button trigger madal -->
         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
          Launch demo modal
        </button>
         
        <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">로그인</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>


              <div class="modal-body">
                 <form action="">
                  <div class="mb-3">
                      <label class="form-label" for="exampleInputEmail">Email address</label>
                      <input class="form-control" id="exampleInputEmail" type="email">
                      <div class="form-text">we'll never share your email with anyone ~</div>
                  </div>

                  <div class="mb-3">
                  <label class="form-label" for="exampleinputpassword">password</label>
                  <input class="form-control" id="exampleinputpassword" type="password">
                  </div>
                 
                  <div class="form-check mb-3">
                      <input class="form-check-input" id="examplecheck" type="checkbox">
                      <label class="form-check-label" for="examplecheck">Check me out</label>
                  </div>
                 

       

       

      2.(1번에 이어서) java-script를 이용한 로그인 폼 안에 수식 넣어주기

      let emailInputEl = document.querySelector('#exampleInputEmail');
      /** document는 전체 html 이라 보면 됨
       * querySelector >> 실무적으로 많이 쓰임 */

      let modalEl =  document.querySelector('#exampleModal');

      modalEl.addEventListener('shown.bs.modal', function(){
          emailInputEl.focus()
      })
      /** addEventListener 하면 왼쪽에 발생할 이벤트 입력 */

       

       

      자바 스크립트

       

      1. 자바스크립트 if else문!!!!!

      // If-Else
      let random = Math.random(); // 0.0 초과 1.0 미만
      console.log(random);

      if (random < 0.5){ // true일 때
         console.log("Your number is less than 0.5!!")
      } else{ //false일 때
         console.log("Your number is greater (or equal) than 0.5!!")
      }


      //If-Else If
      let dayOfweek =prompt("Enter a day").toLocaleLowerCase();
      //.toLocaleLowerCase 는 캐릭터를 모두 소문자로 바꿔줌

      if (dayOfweek === 'monday') {
          console.log("Ughh I hate mondays!");
         
      } else if (dayOfweek === "saturday") {
         console.log("Yay I love saturdays!");
      }

      else if (dayOfweek === "friday") {
          console.log("Fridays are nice, especially after work");
      }

      else {
          console.log("so so");
         
      }


      2.

      // Nested Conditionals (중첩 조건문)


      let password = prompt("please enter a new password");

      //password must be 6+ charaters

      if(password.length >=6){ //true(6글자 이상 됨)
         
         if(password.indexOf(" ") === -1){    // true(공백 문자 x), -1이라는것은 공백문자가 없다라는 뜻
            console.log("Valid password")

         } else{  // false(공백 문자 있는 경우)
           console.log("Password cannot contain spaces!")
         }
       

      }
      else{  // false (6글자 안됨)

            console.log("password Too Short! Must be 6+ characters.")
      }

       

      3. 


      let city = "Tokyo";

      console.log(city.length);//5

      console.log(city[0]); // 'T'
      console.log(city[3]); // 'Y'

      //String methods
      console.log('hello' .toUpperCase()); // 'Hello'
      console.log('LOL' .toLowerCase()); // 'lol'
      console.log('     omg   ' .trim()); // 'omg'

      console.log('spider'.indexOf('i')); //2
      console.log('vivir'.indexOf('i')); //1 (First match index)
      console.log('catch'.indexOf('z')); //-1

      //slice()
      console.log("pancake".slice(3)); // cake
      console.log("pancake".slice(0,3)); //pan

      //replace()
      console.log("pump".replace("p","b")); //bump (First match index)



      4.  배열

      //배열
      //배열의 선언법
      // 1) [] 대괄호 사용 ["1",2,true]

      let fruits = ['apple','banana','orange','pear'];
      console.log(fruits[0]);
      console.log(fruits[3]);

      let nums = [];
      nums[0]= 1;
      nums[1]= 2;
      nums[2]= 3;
      console.log(nums);

      // 2) Array 객체 배열 생성 new Array()
      let a = new Array();
      a[0] = 1;
      a[1] = 2;
      console.log(a);

      let friends = new Array();
      friends[1] = "장나라";
      friends[3] = "유해진";

      console.log(friends[0]);
      console.log(friends[1]);
      console.log(friends[2]);
      console.log(friends[3]);
      console.log(friends);

      console.log(friends.length); // 4

      5. 배열1

      // let[] numbers = {1,2,3,4,5}
      // String[] strs = {"a", "abc"};
      let datas = [1, 2, 3, 'Tom', true]; // 서로 다른 datatype 함께 저장 가능
      console.log(datas);

      // 배열의 주요한 필드(속성)
      // length 속성
      console.log(datas.length) //lengh는 원소의 개수 즉 방의 개수 라 생각하면 됨
      console.log([],length); // 0

      let nums = [1, 2, 3, 4];
      let fruits =['apple','banana','pear']
      //concat(): 두 개의 배열을 병합해 새로운 배열 생성(원본 배열 데이터에는 영향 x)
      nums.concat(nums.concat(fruits));
      console.log(nums);
      console.log(fruits);


      // 아래 메소드들은 원본 수정됨(주의!)
      // push(): 배열 데이터의 가장 뒤쪽에 데이타 삽입
      console.log(nums.push(5));
      console.log(nums); // [1,2,3,4,5]

      //unshigt() : 배열 데이터의 가장 앞쪽에 데이터 삽입
      console.log(nums.unshift(0));
      console.log(nums); [0,1,2,3,4,5]


      //reverse()
      console.log(nums.reverse());
      console.log(fruits.reverse());
      console.log(nums);  //원본도 같이 수정됨 주의!!!
      console.log(fruits); // ""

      //splice():(인덱스,삭제,개수,삽입 아이템)
      console.log(nums.splice(2,2));
      console.log(nums);
      console.log(nums.splice(2,0));
      console.log
      console.log(nums.splice(2,0,999));
      console.log(nums);
      console.log(nums.splice(2,1,3));
      console.log(nums);

      (6) 배열2

      let f1 ="apple";
      let f2 = "banana";
      let f3 = "grape";
      let f4 = "mango";

      let fruits=["banana","apple","grape","mango"];
      console.log(fruits);
      console.log(fruits[1]); //apple

      fruits[0] = "cherry"
      console.log(fruits);

      //pop(): 마지막에 있는 아이템을 뺌
      console.log(fruits.pop());
      console.log(fruits);

      //push: 배열 데이터의 가장 뒤쪽에 데이터 삽입
      console.log(fruits.push("pineapple"));
      console.log(fruits);

      //includes(): 포함하고 잇는지를 확인
      console.log(fruits.includes("apple")); //true
      console.log(fruits.includes("peach")); //false

      //indexof(): 해당 원소의 인덱스 번호를 알려줌
      console.log(fruits.indexOf("apple"));

      //slice(순번): 순번부터 잘린 값들이 반환됨
      //배열의 아이템을 잘라내는 역할

      console.log(fruits.slice(1));

      console.log(fruits.push('kiwii'));
      console.log(fruits);

      // slice(인덱스1,인덱스2): 인덱스1~인덱스2 바로 전까지
      console.log(fruits.slice(1,3));
      console.log(fruits);

      (7) 함수 드가자~

      // 함수 선언
      function helloFunc() {
         console.log("hello");
      }
      // 함수는 꼭 만들고 만든함수() 호출해야함!
      helloFunc();

      function introduce(name) {
         console.log(`제 이름은 ${name} 입니다.`); // 백팁(~ 옆에 있는 `)으로 바꾼다 왜? 보관법 이용해야한다 달라 표시된 변수의 값이 출력이 될수가 있음
      }

      introduce('park');


      function sum(x,y){
          console.log(x + y);
      }

      sum(1,3);
      sum(4,10);


       

       
      // return문(반환값)이 있는 함수

      function returnFunc(){
          return 20000;
      }

      // returnFunc();   console.log 한건만 console 창에 나오는거임..
      // 그러므로 console.log를 넣어줘야함
      console.log(returnFunc());


      function introduce(name){
            return `제 이름은 ${name}입니다.`;
      }

      console.log(introduce(`park`));

      let a = returnFunc();
      console.log(a);
      //1) 매개변수 x, 반환값 x

      function singsong(){
      console.log("DO");
      console.log("RE");
      console.log("MI");

      }

      //2) 매개변수 0, 반환값 x
      function greet(firstname,lastName) {
        console.log(`Hey there, ${firstname} ${lastName[0]}.`);
      }

      singsong();
      greet("junsu", "park");

      function repeat(str, numTimes){
        let result = "";
        for(let i=0; i<numTimes; i++){
          result += str;
        }
        console.log(result);

      }
      repeat("a",10)



      // 매개변수 o, 반환값 o
      function add(x,y){
          if(typeof x !== 'number' || typeof y !== 'number'){
              return false;
          }  // 숫자가 아니면 들어올거야, 근데 숫자가 아니면 retun x+y 가 오겠지요~ 근데 숫자다 그러면 위에 값과 아랫값이 포함이 되면서 실행이됨

          return  x + y;
      }

      console.log(add("r",2)); // 숫자도 입력해보고 r도 입력해보고 해보자!
      console.log(add(1,1));
      console.log(add("문자",2));
      저작자표시

      '국비 교육 내용 정리' 카테고리의 다른 글

      2023년 05월 19일 수업 내용  (1) 2023.05.19
      2023년 05월 18일 수업 내용  (0) 2023.05.18
      2023년 05월 17일 자바스크립트 question(배열,function)  (0) 2023.05.17
      2023년 05월16일 수업 내용 정리  (0) 2023.05.16
      2023년 05월15일 수업 내용 정리  (0) 2023.05.15

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바