함수

✔️ 내장 함수

정의하지 않아도 되는 함수
ex)

• prompt()
• alert()
• document.write()
• console.log()

✔️ 사용자 함수
= 사용자 정의 함수

• 기본 형태

    <script>
        function hello(){
            document.write("안녕 <br>");
        }

        hello();
    </script>

• return과 변수사용

    <script>
        var book = 26000;
        var sale = 10;
        var deli = 3000;

        function howmuch(b, s, d){
            return book*(1-sale/100)+3000;
        }
        document.write("총 금액은"+howmuch(book, sale, deli)+"원 입니다. ");

    </script>

변수

✔️ 지역 변수
= 사용자 정의 함수 내에서 사용되는 변수

✔️ 전역 변수
= 스크립트 전체에서 사용할 수 있는 변수
= 함수 내에서 var을 사용하지 않고 함수 밖에 있는 변수를 호출

<script>
  	var num = 100;
        num -= 10;
        document.write(num); //num=90;
        document.write("<br>");

        function numTest(){
            var num = 3; //지역 변수
            num += 20; //전역 변수
        }
        numTest();

        document.write(num); // num=110
</script>

객체

=자료형 여러 개를 한 번에 저장하는 것

✔️ 내장 객체 참고 링크

미리 정의된 객체

• 날짜 정보 객체

<script>
  var date = new Date();

  var year = date.getFullYear();
  var month = date.getMonth();
</script>

• 수학 객체

<script>
  var num = 1.2345;

  var roundNum = Math.round(num);
  var floorNum = Math.floor(num);
  var maxNum = Math.max(10, 3, 55);
  var minNum = Math.min(10, 2, 55);
</script>

• 배열 객체
  3가지 방법으로 선언할 수 있음

<script>
  var a = new Array(10, "문자", true);

  var a = [10, "문자", true];

  var a = new Array();
      a[0] = 10;
      a[1] = "문자";
      a[2] = true;
</script>

✔️ 사용자 정의 객체

• 기본 형태

<script>
    var person={
        name:"홍길동",
        age: 25,
        area: "서울"
        };
    document.write("이름: "+person.name+"<br>");
    document.write("나이: "+person.age+"<br>");
    document.write("지역: "+person.area+"<br>");
</script>

• 생성자 함수와 New 연산자
  첫 글자는 대문자로 작성

<script>
    function Book(title, author, pages, price){
          this.title = title;
          this.author = author;
          this.pages = pages;
          this.price = price;
    }

    var book1 = new Book("javascript", "홍길동", 420, 18000);
    document.write(book1.title + "/" + book1.author + "/" + book1.pages + "/" + book1.price);
</script>

• for문 이용
  복사할 객체의 수만큼 반복하여 새로 저장

<script>
    var b1={
        model:"소나타",
        year:"2021",
        company:"현대"
        };
    var a1 = "";
    for(var i in b1){
        a1 += b1[i] + "<br>";
    }
    document.write(a1);
</script>

✔️ 문서 객체 모델(DOM)
= 객체를 사용해서 웹 문서를 관리하는 방식

dom에 접근하는 방법

• id 선택자로 접근하는 함수
  getElementById()
  =>id는 하나만 존재하므로 인덱스 접근 필요 없음

<script>
  	//id를 찾아서 클릭하면 크기를 키줌
	document.getElementById("header").onclick=function(){
            this.style.fontSize="3em";
        }
</script>

• class 값으로 찾아내는 함수
  getElementsByClassName()
  => 2개 이상의 웹 요소에 접근 가능(인덱스 번호를 이용해서 접근)

<script>
      //class가 accent인 것들 중에서 첫번째 밑줄, 두번째 색 변경
      document.getElementsByClassName("accent")[0].style.textDecoration="underLine";
      document.getElementsByClassName("accent")[1].style.color="orange";
</script>

• 태그 이름을 찾아내는 함수
  getElementsByTagName()
  => 2개 이상의 웹 요소에 접근 가능(인덱스 번호를 이용해서 접근)

<script>
  	//h2태그 중 첫번째는 배경색 변경
  	document.getElementsByTagName("h2")[0].style.backgroundColor="skyblue";
  	//p태그 중 첫번째는 글자크기 변경
        document.getElementsByTagName("p")[0].style.fontSize="1em";
</script>

• 다양한 방법으로 찾아내는 함수
  querySelector()
  querySelectorAll()

<script>
      document.querySelector("#header").style.textDecoration="underLine";
      document.querySelectorAll(".accent")[0].style.backgroundColor="gray";
      document.querySelector("#pimg > img").setAttribute("src", "../HTML5&CSS/image/dish3.jpg");
</script>

property

• html 태그 속성을 가져오거나 수정하는 함수
  • getAttribute()
  • setAttribute()

<script>
	var bigPic = document.querySelector("#bimg");
        var smallPic = document.querySelectorAll(".small");
        function showBig(){
            var newPic = this.src;
            bigPic.setAttribute("src", newPic);
        }

        for(var i = 0; i < smallPic.length; i++){
            smallPic[i].onclick = showBig;
        }
</script>

• innerHTML
  = html 내부를 채움

    <div>
        <h1>점수 계산</h1>
        - 국어 : <span id="kor"></span>점<br>
        - 영어 : <span id="eng"></span>점<br>
        - 수학 : <span id="math"></span>점<br>
        - 합계 : <span id="sum"></span>점<br>
        - 평균 : <span id="avg"></span>점<br>
    </div>
    <button onclick="sumAvg(80,90,100)">평균 구하기</button>
    <script>
        function sumAvg(kor, eng, math){
            var sum;
            var avg;

            sum = kor + eng + math;
            avg = sum / 3;

            document.getElementById("kor").innerHTML = kor;
            document.getElementById("eng").innerHTML = eng;
            document.getElementById("math").innerHTML = math;
            document.getElementById("sum").innerHTML = sum;
            document.getElementById("avg").innerHTML = avg;

        }
    </script>