24년 09월 03일

오전

삼항연산자 :

(조건) ? value1 : value2

조건이 참인경우 value1 이 실행되고 거짓(false)인경우 value2 가 실행된다.

if문

var score = 96;

if (score >= 90){
	console.log("점수 : A"); // 해당문 실행
}else if (score >= 80){
	console.log("점수 : B");
}else if (score >= 70){
	console.log("점수 : C");
}else if (score >= 60){
	console.log("점수 : D");
}else {
	console.log("점수 : F");
}  //if문 예시. 점수에 따라 등급이 나오게 되어있다.

for문

for(let i = 0; i<10; i++){
	console.log(i);
	}  // 초기값, 종료값(조건), 증감식

        // 행열값은 prompt로 받음
        // 행값과 열값을 받아서 테이블을 생성합니다
        // document.write() 와 for문을 사용합니다(이중 for문)
        const tr = prompt("행값을 입력 : ")
        const td = prompt("열값을 입력 : ")
        document.write("<table>")
        for (i = 1; i <= tr; i++) {
            document.write("<tr>")
            for (a = 1; a <= td; a++) {
                document.write("<td>{1}</td>")
            }
            document.write("</tr>")
        }
        document.write("</table>")

forEach 문은 배열만 사용가능… 한건 ! 아닌데 일반적으로 배열에 많이 사용한다고 한다.

클로저 :

클로저는 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수를 의미함

함수의 종류

       // 01 기본형태
        function f1(n1,n2){

            return n1 + n2
	      } //파라미터 o , 반환값 o
        
        function f2(n1,n2){

        } 파라미터 o , 반환값 x
        
        function f3(){
            return 10+20;
        } //파라미터 x , 반환값 o
        
        function f4()
        {

        } //파라미터 x , 반환값 x

화살표 함수 : 기존 함수 문법을 간결하게 표현한 함수 방식.

const greet = (name) => `Hello, ${name}!`;  //여기서 name은 매개변수

console.log(greet('Charlie')); // "Hello, Charlie!"  //여기서 charlie가 인수

javascript 에서 괄호의 종류,역할

• [ ] (대괄호) : list를 나열할 때 , 인덱스를 지정해 줄 때
• {} (중괄호) : 딕셔너리 , style 태그 정의할 때 , function 안에서 기능에 대해 정의해줄 때 (실행 구문 적을 때)
• () (소괄호) : for,if 문의 특정 조건 적어줄 때

함수 호이스팅 :

스크립트 내에 함수와 변수의 순서가 상관없이 끌어올려진 형태로 실행이 되는것.

콜백함수 : **

   // 콜백함수 (call back)
        // 함수를 호출하는 시점이 바뀌어진 형태의 함수
        // 기존방식 : 사용자 (개발자) 가 함수를 직접정의 => 정의된 함수를 호출(call)하여 결과를 반환받는 방식
        // callback : 콜백함수에 인자로 로직이 담긴 함수를(함수주소)를 전달하여 콜백함수로부터 처리된 결과를
        // 반환받는 방식

---

오후

---

자주 사용하는 document 함수 (내가 헷갈려서 기록하는거임!)

document.querySelector() :

괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환

일치하는 요소가 없다면 null 반환

addEventListener() :

**addEventListener()**는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다.

var cols = document.querySelectorAll("#cols .btn");

for (var i = 0; i < cols.length; i++) {
  cols[i].addEventListener("click", click);
}
cols[1].style.color = "red";

function click(e) {
  window.alert(this.innerHTML);
}
// cols 의 버튼을 클릭할 때 alert 이벤트를 발생시키는 구문

자주 사용하는 이벤트의 종류

• click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
• mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
• mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
• mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
• mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
• mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
• focus – HTML요소에 포커스가 갔을때 발생한다.
• blur – HTML요소가 포커스에서 벗어났을때 발생한다.
• keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
• keydown – 키를 누를 때 발생한다.
• keyup – 키를 눌렀다가 떼는 순간에 발생한다.
• load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
• resize – 브라우저 창의 크기를 조절할때 발생한다.
• scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
• unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
• change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.