유니의 코딩공부

동기 : 프로그래밍이 순서대로 진행 됨 특정 부분에서 시간이 오래 걸리는 경우가 있음 이게 비동기 프로그램이다 스레드 : 작업을 시작해서 끝내는 걸 하나의 스레드라고 하는데, 멀티스레드는 스레드를 한꺼번에 여러개 처리 할 수 있음 자바스크립트는 싱글 스레드라서 한번에 하나의 작업만 처리 할 수 있는 언어 A를 처리하고 B가 처리될때 까지 기다리게 되면 뒤에 있는 작업이 밀리게 된다 시간이 오래 걸리는 것은 실행되게 해놓고 그 다음에 있는 작업을 먼저 실행하는데 이것이 비동기 프로그래밍이다 AJAX: 특정 부분 필요한 내용만 가져와서 보여줄 수 있음 서버와 통신하면서 사용하기 때문에 서버와 주고 받을때도 서버에서 처리가 오래걸리는 일이 있는데, 다른 작업을 먼저 하고 응답이 오면 처리해 줌 요청한 시점과 ..

사용자가 어떠한 항목을 선택했는지 인덱스가 알려준다 산업공학과를 선택 후 document.querySelector("#major").options를 입력하면, index값 3이 나옴 [select.options.selectedIndex] 몇 번째 항목이 선택되었는지 나타내는 숫자가 됨 내용을 가져올때 .innerText textFrom : form이름 subject : 폼 안에 들어있는 radio버튼의 name 선택된 부분의 value값을 알아낼 수 있음 value 값 확인 불가 라디오 버튼은 무조건 1개만 선택 가능하지만, 체크 박스인 경우 여러개 선택 가능 querySelectorAll로 접근 input요소에서 name이 mailing인 요소 중에서 선택된 요소들을 불러올때 :checked 입력 ch..

innerText : 내용을 가져오고 싶을때 innerText = " " 내용을 바꾸고 싶을때 innerText는 웹브라우저에 보이는 텍스트만 가져옴 textContent 브라우저에는 보이지 않지만 소스 상에 존재하는 내용을 전부 다 가져와서 보여줌 innerHTML 태그까지 가져와서 보여줌 이미지 부분을 클릭하면 이미지가 바뀜!

setInterval(콜백함수, 시간) : 일정 시간마다 함수를 반복해서 실행하는 함 1초 = 1000밀리 greeting함수를 2초마다 계속 실행해 달라는 의미 clearInterval(): setInterval로 실행하던 것을 멈추는 함수 setTimeOut() : 대기하고 있다가 지정한 시간이 되면 그때가서 함수를 실행 3초 후에 나옴 user가 3개인데 1개의 값만 나옴 이유 : querySelector 값을 1개만 반환하기 때문 여러 개 있을 경우 첫번째 있는 요소만 반환해줌 querySelectorAll () 을 사용하여 여러 값을 저장하는 경우 NodeList 형태로 저장 특정한 요소에 접근 할 수 있음

사용자가 행하는 동작, 웹브라우저가 행하는 동작 이벤트 처리기 : 이벤트가 발생했을 때 실행하는 함수 이벤트가 발생했을 때 처리하는 함수 연결할 함수가 간단할 때 많이 사용 이벤트 처리 방법을 addEventListener로 변경 1) 첫번째 옵션 : click 2) 두번째 옵션 : 클릭이벤트가 발생했을때 실행할 함수를 넣어줌 3) 세번째 옵션 : 이벤트 캡쳐 여부를 넣어주는데 기본값이 false이므로 생략하면 false로 인식 onclick다음 ""가 사용됐기 때문에 ()안에는 ' ' 를 사용해야 함 " "를 또 사용하게되면 alert문이 겹쳐서 끝남 DOM을 이용한 방법 : 태그를 스크립트로 끌어 옴.

익명 함수 : 이름 없는 함수 즉시 실행 함수, 변수 할당 후 실행 가능 - 익명 함수는 변수에 할당 할 수 있음 화살표 함수 1. 매개변수가 없는 경우 매개변수 => 실행하려는 명령어 맨 끝에 ;을 붙여주면 됨 중괄호 안에 실행할 명령이 하나 뿐인 경우 중괄호 생략 가능 2. 매개변수가 있는 경우 중괄호 안에 문장이 하나인 경우 중괄호 생략 가능, 매개변수 안에 매개변수 하나인 경우에도 괄호 생략 가능 3. 매개변수가 2개 이상인 경우 문장이 하나이므로 중괄호 생략 가능, 매개변수 2개이상이므로 괄호 생략 불가 return도 생략 가능 매개변수 a,b가 사용되는 함수이고, a + b값을 반환한 값이 sum에 들어간다는 의미

1) var를 안붙여서 전역변수로 사용하는 경우가 있는데, 함수 밖에서 값을 변경시켜 버리는 경우가 생김 2) 같은 변수 이름이 나왔는데 재사용이 가능하면 문제가 생길 수 있음 호이스팅 : 끌어 올린다 y변수가 선언 되지 않았지만 undefined로 나오는 이유는 앞에 선언 된것처럼 끌어서 인식 함 var 예약어를 사용해서 변수를 사용하는 것보다 let로 사용 추천 let 변수의 특징 scope : block에 국한되어 있음 for문에 있는 i변수는 for문에서만 사용 가능 let sum은 calcSum 함수 내에서만 사용 가능. let를 빼면 sum을 전역 변수로 사용 가능 명확하게 블록 내에서만 사용 할 수 있게 제한 되어있음 var와 차이점: 재선언 불가 let는 호이스팅 안되서 오류 메세지 나타냄

간단한 입출력 방법 결과값을 표시하는 출력 방법 alert() confirm() : 확인 , 취소 버튼이 있음. 사용자의 선택 여부에 따라 결과 값이 달라지게 프로그래밍 할 때 사용 prompt() : 사용자에게 값을 입력할 수 있도록 한 줄짜리 text필드가 표시 됨 사용자가 입력한 값이 변수에 저장 document.write() : 출력 결과를 웹브라우저 화면에 표시 console.log() : 콘솔창에 내용 표시 ctrl + shift + J 자료형 리터럴 템플릿 문자열과 변수를 연결할때 +없이 사용하기 위해 나옴 백틱` 사용

transform : 웹 요소의 위치나 크기를 바꿈으로써 시각적인 효과를 만들어 줌 위치를 옮길경우 : translate 함수 사용 크기 조절할 때 : scale 함수 사용 rotate : 회전시키는 함수 양수 : 시계 방향 음수 : 시계 반대 방향

background-color - 배경색 지정 background-image : url('폴더 경로'); -배경 이미지 지정 옵션을 주지 않으면 웹 화면에 가득하게 표시되는 것이 기본 옵션 background-repeat : 가로로만(repeat-x), 세로로만(repeat-y) 반복하게 하고 싶은 경우 사용하는 옵션 background-position : 배경이미지 위치 변경 background-attachment : 배경 이미지