JAVASCRIPT  함수 기능 (1)

함수 생성 방법 : function 함수명() {}

함수 호출 방법 : 함수명();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log("프로그램 시작!!!");
      function test() {
        console.log("text 함수 실행");
      }
      console.log("함수 지나옴");
      test();
      console.log("프로그램 종료!!!");

      function localVal() {
        let num = 20000;
        if (true) {
          num += 10000;
          console.log("if : " + num);
        }
        console.log("localVal : " + num);
      }
      localVal();

      let num = 1234;
      function localVal01() {
        console.log("localVal01 : " + num);
      }
      function localVal02() {
        console.log("localVal02 : " + num);
      }
      localVal01();
      localVal02();
    </script>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

JAVASCRIPT 함수 기능 (2)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
      sumFunc();
      function sumFunc() {
        const n1 = prompt("수 입력");
        const n2 = prompt("수 입력");
        const sum = Number(n1) + Number(n2);
        document.write(`${n1} + ${n2} = ${sum}<br>`);
      }
      */
      /*
      const n1 = prompt("수 입력");
      const n2 = prompt("수 입력");
      sumFunc(n1, n2);
      function sumFunc(n1, n2) {
        const sum = Number(n1) + Number(n2);
        document.write(`${n1} + ${n2} = ${sum}<br>`);
      }
      */
      const n1 = prompt("수 입력");
      const n2 = prompt("수 입력");
      const sum = op(n1, n2);
      sumFunc(n1, n2, sum);
      function op(n1, n2) {
        const sum = Number(n1) + Number(n2);
        return sum;
      }
      function sumFunc(n1, n2, sum) {
        document.write(`${n1} + ${n2} = ${sum}<br>`);
      }
    </script>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

JAVASCRIPT  함수 기능 (3)

* return으로 여러개 값을 돌려주려면 배열 or object 타입 사용 가능

꺼내오는 방법 : 함수명[인덱스] or 함수명["키 값"] or 함수명.키 값

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function testFunc01() {
        let num = 95;
        let txt = "안녕하세요";
        return num, txt;
      }
      const result = testFunc01();
      document.write(result + "<hr>");

      function testFunc02() {
        let num = 95;
        let txt = "안녕하세요";
        const arr = [num, txt];
        return arr;
      }
      const result2 = testFunc02();
      document.write(result2 + "<br>");
      document.write(result2[0] + "<br>");
      document.write(result2[1] + "<hr>");

      function testFunc03() {
        let num = 95;
        let txt = "안녕하세요";
        const arr = { num: num, txt: txt };
        return arr;
      }
      const result3 = testFunc03();
      console.log(result3);
      document.write(result3["num"] + "<br>");
      document.write(result3.txt + "<hr>");
    </script>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

JAVSCRIPT 함수 기능 (4)

* 함수 이름이 같으면, 인자 개수가 달라도 마지막 함수만 실행

* arguments를 통해 매개변수의 개수 제한없이 받아올 수 있다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function test01(x, y) {
        console.log("첫번째 함수 실행!!!");
      }
      function test01(x) {
        return x;
      }
      document.write("함수 호출 인자 없음 : " + test01() + "<br>");
      document.write("함수 호출 인자 1 : " + test01(10) + "<br>");
      document.write("함수 호출 인자 2 : " + test01(10, 20) + "<br>");

      function test02(x, y, z) {
        document.write(`${x}, ${y}, ${z} <br>`);
        if (z == undefined) {
          sum = x + y;
        } else {
          sum = x + y + z;
        }
        return sum;
      }
      let r1 = test02(10, 20);
      let r2 = test02(10, 20, 30);
      document.write(`매개변수 2개 : ${r1}<br>`);
      document.write(`매개변수 3개 : ${r2}<br>`);

      function test03() {
        console.log(arguments.length);
        let i,
          sum = 0;
        for (i = 0; i < arguments.length; i++) {
          sum = sum + arguments[i];
          document.write(arguments[i]);
        }
        return sum;
      }
      let r3 = test03(10, 20);
      let r4 = test03(10, 20, 30);
      document.write(`매개변수 2개 : ${r3}<br>`);
      document.write(`매개변수 3개 : ${r4}<br>`);
    </script>
  </body>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

JAVASCRIPT 즉시 실행 함수

즉시 실행 함수 표현식 : (function 함수명(){})();

* 즉시 실행 함수에 값을 전달해 줄 때, (값); 방식으로 전달해준다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      (function test() {
        //alert("즉시 실행 함수!!!");
      })();
      let result = (function test1() {
        return "서버로 부터 데이터를 받아와 화면에 보여줌";
      })();
      document.write(result + "<br>");

      let name = "홍길동";
      let result02 = (function test02(n) {
        let db = n + "님의 정보 입니다";
        return db;
      })(name);
      document.write(result02 + "<br>");
    </script>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

JAVASCRIPT 익명 함수

익명 함수 표현식 : let 변수명 = function(){};  또는

                      let 변수명 = () => ;   또는

              let 변수명 = () => {};

* =>표현식을 쓸 때 중괄호를 쓰게 되면 return을 추가해야 한다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function test(x, y) {
        return x + y;
      }
      document.write(test(1, 2) + "<br>");

      let sumFunc = function (x, y) {
        return x + y;
      };
      document.write(sumFunc(10, 20) + "<br>");

      let sumFunc1 = (x, y) => x + y;
      document.write(sumFunc1(100, 200) + "<br>");

      let sumFunc2 = (x, y) => {
        let num = 100;
        return x + y + num;
      };
      document.write(sumFunc2(1000, 2000) + "<br>");

      const result01 = () => {
        10 + 20
      };
      const result02 = () => 10 + 20;
      const result03 = () => (10 + 20);

      document.write("<hr>");
      document.write(result01() + "<br>");
      document.write(result02() + "<br>");
      document.write(result03() + "<br>");
    </script>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

Quiz01

풀이 과정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let input = () => {
        let num1 = Number(prompt("첫번째 수 입력"));
        let num2 = Number(prompt("두번째 수 입력"));
        const arr = { num1: num1, num2: num2 };
        return arr;
      };

      let result01 = (n1, n2) => {
        if (n1 > n2) {
          return n1;
        } else {
          return n2;
        }
      };
      let arr = input();
      document.write("큰 수 : " + result01(arr.num1, arr.num2) + "<hr>");

      let input02 = () => {
        let num1 = Number(prompt("수(홀, 짝) 입력"));
        return num1;
      };

      let result02 = (n) => {
        if (n % 2 == 0) {
          return "짝수 입니다.";
        } else {
          return "홀수 입니다.";
        }
      };

      ////////////////////////////
      let num2 = input02();
      document.write("수는 " + result02(num2) + "<hr>");

      let input03 = () => {
        let num1 = Number(prompt("수(3의 배수) 입력"));
        return num1;
      };

      let result03 = (n) => {
        if (n % 3 == 0) {
          return "3의 배수 입니다.";
        } else {
          return "3의 배수가 아닙니다.";
        }
      };
      num3 = input03();
      document.write("수는 " + result03(num3) + "<hr>");

      let input04 = () => {
        let num1 = Number(prompt("수(소수) 입력"));
        return num1;
      };

      let result04 = (n) => {
        for (i = 2; i <= n; i++) {
          if (n % i == 0) {
            if (i == n) {
              return "소수 입니다";
            } else {
              return "소수가 아닙니다";
            }
          }
        }
      };
      num4 = input04();
      document.write("수는 " + result04(num4) + "<hr>");

      let input05 = () => {
        let num1 = Number(prompt("수(절대값) 입력"));
        return num1;
      };

      let result05 = (n) => {
        return Math.abs(n);
      };
      let num5 = input05();
      document.write("수의 절대값 : " + result05(num5) + "<hr>");
    </script>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

JAVASCRIPT event (1)

onclick="" : 클릭 할 경우 실행

ondblclick="" : 더블클릭 할 경우 실행

onmouseover="" : 마우스를 위에 올렸을 때 실행

document.getElementById(" "); : id값이 일치하는 태그값을 얻어오겠다는 뜻

* 얻어온 태그 활용 법 : id값.기능

document.getElementByClassName(" "); : 클래스명이 일치하는 태그값을 얻어오겠다는 뜻

document.querySelector(" "); : id또는 클래스기 일치하는 태그값을 얻어오겠다는 뜻

window.onload : 페이지가 호출되면 자동으로 실행

메소드.addEventListener("방식", 실행 할 메소드) : 해당 메소드를 어떤 방식을 동작 했을때 선택한 메소드 실행

.innerHTML : html 형식으로 적용

.innerText : text 문자 형식으로 적용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #h3 {
        color: red;
      }
    </style>
  </head>
  <body>
    <script>
      //function clickEvent(){}
      const clickEvent = () => {
        //alert("클릭");
        const name = document.getElementById("name");
        console.log(name);
        /*
        name.value = "안녕하세요";
        name.style.background = "red";
        */
        const name1 = document.querySelector("#name2");
        console.log(name1);
        name1.value = name.value;
        name.value = "";
      };
      window.onload = () => {
        //alert("onload");
        //document.getElementsByClassName("btn");
        const btn = document.querySelector(".btn");
        console.log(btn);
        btn.addEventListener("click", innerTest);
      };
      const innerTest = () => {
        const txt = document.getElementById("text");
        let msg = "<h3 id='h3'>내용바꾸기</h3>";
        txt.innerHTML = msg;
        //txt.innerText = msg;
      };
    </script>
    <input type="text" id="name" placeholder="input name" /><br />
    <input type="text" id="name2" placeholder="input name" /><br />
    <input type="button" onclick="clickEvent()" value="클릭" />
    <input type="button" class="btn" value="클릭2" />
    <br />
    <label id="text">텍스트 값</label>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

JAVASCRIPT event (2)

onmousedown="" : 마우스 클릭했을 때

onmouseup="" : 마우스 클릭 후 땠을 때

onmousemove="" : 마우스가 움직일 때

onmouseover="" : 마우스가 들어왔을 때

onmouseout="" : 마우스가 나갔을 때

* onload() = html 실행 후 실행된다

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      const myMousedown = () => {
        document.getElementById("span").innerHTML = "마우스 DOWN";
      };
      const myMouseup = () => {
        document.getElementById("span").innerHTML = "마우스 UP";
      };
      let cnt = 0;
      const myMousemove = () => {
        cnt++;
        document.getElementById("count1").innerHTML = cnt;
      };
      const myMouseover = () => {
        cnt++;
        document.getElementById("count2").innerHTML = cnt;
      };
      const myMouseout = () => {
        document.getElementById("count2").innerHTML = "마우스 나감";
      };
    </script>
  </head>
  <body>
    <div onmousedown="myMousedown()" onmouseup="myMouseup()">
      <span id="span">이벤트 알아보기</span>
    </div>
    <div
      onmousemove="myMousemove()"
      style="background: gray; width: 100px; height: 100px"
    >
      <span id="count1">0</span>
    </div>
    <div
      onmouseover="myMouseover()"
      onmouseout="myMouseout()"
      style="background: gray; width: 100px; height: 100px"
    >
      <span id="count2">0</span>
    </div>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

 

 

JAVASCRIPT event (3)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 100px;
        height: 200px;
      }
    </style>
    <script>
      onload = () => {
        //alert("execute");
        let img = document.getElementById("myImg");
        img.addEventListener("mouseover", changeFunc01);
        img.addEventListener("mouseout", changeFunc01);
      };
      let num = 0;
      changeFunc01 = () => {
        const arr = ["image.png", "image2.png"];
        let myImg = document.getElementById("myImg");
        let myImg02 = document.getElementById("myImg02");
        myImg.src = arr[num];
        myImg02.src = arr[num];
        //num = num == 0 ? 1 : 0;
        if (num == 0) {
          num = 1;
        } else {
          num = 0;
        }
      };
    </script>
  </head>
  <body>
    <img id="myImg" src="image.png" /><br />
    <img
      id="myImg02"
      src="image.png"
      onmousedown="changeFunc01()"
      onmouseup="changeFunc01()"
    /><br />
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

Quiz02

 

풀이 과정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      footer {
        background-color: pink;
        width: 280px;
        height: 50px;
        padding-left: 120px;
      }
    </style>
    <script>
      let num = 1;
      changeFunc = (n) => {
        let myImg = document.getElementById("myImg");
        if (n == 0) {
          num == 1 ? (num = 8) : num--;
          myImg.src = `최근상품0${num}.jpg`;
        } else {
          num == 8 ? (num = 1) : num++;
          myImg.src = `최근상품0${num}.jpg`;
        }
      };
    </script>
  </head>
  <body>
    <div>
      <img
        id="myImg"
        src="최근상품01.jpg"
        style="width: 400px; height: 400px"
      />
      <footer>
        <button onclick="changeFunc(0)">이전 사진</button>
        <button onclick="changeFunc(1)">다음 사진</button>
      </footer>
    </div>
  </body>
</html>

 

실행 결과

 

 

 

 

 

 

 

 

 

 

 

 

Quiz03

 

풀이 과정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>겔러리</title>
    <style>
      * {
        margin: 0;
      }
      img {
        width: 100px;
        height: 100px;
      }
      .img {
        border: 1px solid gray;
        width: 100px;
        height: 100px;
        position: relative; 
      }
      .flex {
        display: flex;
      }
      span {
        position: absolute;
        background: orange;
        top: 25px;
        left: 25px;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
      }
    </style>
    <script type="text/javascript">
      const images = [
        "resources/images/최근상품01.jpg",
        "resources/images/최근상품02.jpg",
        "resources/images/최근상품03.jpg",
        "resources/images/최근상품04.jpg",
        "resources/images/최근상품05.jpg",
        "resources/images/최근상품06.jpg",
        "resources/images/최근상품07.jpg",
        "resources/images/최근상품08.jpg",
      ];
      window.onload = function init() {
        console.log("init");
        let msg = "<div class='flex'>";
        for (let i = 0; i < images.length; i++) {
          msg += `<div class="img" id="${i}" onMousemove="imgOver(${i})" onMouseout="imgOut(${i})">`;
          msg += `<img src="${images[i]}" >`;
          msg += "</div>";
          if (i + 1 == Number(images.length / 2))
            msg += "</div><div class='flex'>";
        }
        const wrap = document.getElementById("wrap");
        wrap.innerHTML = msg;
      };
      const imgOver = (index) => {
        const span = document.getElementById(index);
        span.innerHTML = `<span onMousemove="imgOver(${index})">선택</span>`;
      };
      const imgOut = (index) => {
        const div = document.getElementById(index);
        div.innerHTML = `<img src="${images[index]}">`;
      };
    </script>
  </head>
  <body>
    <div id="wrap"></div>
  </body>
</html>

 

실행 결과

 

'javaScript' 카테고리의 다른 글

JAVASCRIPT 활용 (3)  (0) 2024.03.27
JAVASCRIPT 활용 (2)  (0) 2024.03.26
JAVASCRIPT 기초  (0) 2024.03.22
개발 필기장이이태태영영 님의 블로그입니다.

+ Recent posts

티스토리툴바