JAVASCRIPT
-
var / let / const 변수 (사칙연산)JAVASCRIPT 2022. 2. 8. 13:45
변수라는 어떤 자료를 저장하기 위한 문법이 있다. 사용법부터 알아보자. var 이름 = "지우"; var 나이 = 27; 이처럼 var 변수의 이름 = "담을 값" 이렇게 사용한다. 여기서 변수의 이름을 만드는 건 선언 이름에 값을 넣는 건 할당이라고 한다. 변수는 이렇게 긴 문자를 담아 놓거나 심지어 셀렉터로 찾은 요소도 저장할 수 있다. var 안내창 = document.getElementById('alert'); var 안내창 = $('#alert'); 이렇게 셀렉터를 담으면 직관적이며 자바스크립트의 동작속도가 빨라진다.(DOM탐색을 한번만 해도 되므로) 변수에는 3가지가 있다. var -- 재선언가능 / 재할당가능 / 범위는 함수 내 (함수 밖에서 만들면 함수 안에서 사용가능) let -- 재선언..
-
if/else 조건문과 and/or 사용JAVASCRIPT 2022. 2. 7. 19:57
특정 조건을 충족시켰을 때만 코드를 실행할 때 if/else문을 사용한다. if ( 1 > 3 ) { console.log('안녕') } else if ( 1 < 2 ) { console.log('반가워') } else { console.log('잘가') } if문의 기본 형태는 위와 같다. if 에 조건을 써서 비교해주고 틀리다면 else if의 조건 틀리다면 외에 나머지 else를 실행하게 된다. if문은 위에서부터 조건을 읽으며 맞는 하나의 식만 출력한다. 그리고 조건을 두개 세개 비교하고 싶을 땐 and 와 or을 사용하면 되는데, and는 && 기호를 사용하며 모두가 true일 때 true로 만들고, or은 ||기호를 사용하며 하나만 true여도 true로 만든다. if문을 자주 사용하는 예시가..
-
jQueryJAVASCRIPT 2022. 2. 7. 19:33
제이쿼리는 기본적으로 자바스크립트와 비슷하다. 하지만 자바스크립트를 좀 더 간편하게 사용할 수 있게 한다. 예를 들면, //자바스크립트 document.getElementById('title').innerHTML = '바보'; //제이쿼리 $('#title').html('바보'); 이렇게 절반정도로 짧게 줄일 수 있다. 제이쿼리에선 셀렉터로 $('무언가')를 사용한다. 클래스는 $('.클래스이름')으로 아이디는 $('#아이디이름')으로 쓴다. 그리고 메소드는 html의 무언가를 바꿀 땐 html('바꿀내용') css의 무언가를 바꿀 땐 css('속성', '값')으로 쓴다. 클래스를 추가하거나 삭제할 땐 addClass, removeClass를 사용할 수 있다. 많은 메소드가 있으므로 찾아서 사용하면 된다..
-
자바스크립트의 functionJAVASCRIPT 2022. 2. 7. 18:01
자바스크립도 함수를 사용할 수 있다. function 함수이름() { document.getElementById('아무거나').style.display = "block" } 이런 식으로, 함수 이름과 내용물을 적어준 후 사용할 때 함수이름() 이렇게 사용하면 된다. 함수에는 변수라고 구멍을 뚫을 수 있다. 변수를 이용하면 재사용률이 올라간다. 예를 들면, 앞에 버튼 열기 닫기와 연결해보면, function 열기닫기함수(변수) { document.getElementById('아무거나').style.display = 변수; } 이런 식으로 변수를 집어넣고, 버튼 하면 닫기이고, 버튼 하면 열기가 된다. 이렇게 함수를 잘 이용하면 긴 코드도 줄여서 여러번 재사용할 수 있다. 변수는 2개 이상 사용할 수 있다...
-
onclick속성과 addEventListener속성JAVASCRIPT 2022. 2. 7. 13:03
UI를 만드는 기본적인 법칙은 1. html css 로 미리 UI디자인을 해놓기 2. UI를 평소엔 안보이게 숨겨놓기 (display: none 또는 visibility: hidden을 많이 준다) 3. 버튼을 누르거나 어떤 행동을 하면 UI를 보여준다 이런 식으로 만든다. onclick은 버튼을 누를 때 어떤 어떤 행동을 하게끔 도와주는 속성이다. 누르면 뭐가 바뀜 이런 식으로 사용하며 onclick="" 안에는 javascript을 이용해서 코드를 작성한다. 누르면 뭐가 바뀜 이렇게 onclick함수 내부에 작성할 수 있다. display를 block으로 바꾸면서 원래 none이여서 안보이던 UI가 버튼을 누르면 보이게 되는 원리이다. 자바스크립트로 개발해서 HTML에 onclick으로 심어넣기는 옛..
-
자바스크립트의 셀렉터JAVASCRIPT 2022. 2. 7. 12:54
자바스크립트는 HTML요소를 변경하기 위해서 사용한다. 회사 가고 싶다 을 집에 가고 싶다 라고 변경하기 위해선 해당 h3셀렉터에 id (클래스, 태그도 가능하지만 어느 하나를 특정하기 위해선 id가 적합하다)를 부여하고 자바스크립트로 코드를 document.getElementById('home').innerHTML = '집에 가고 싶다'; 이런 식으로, 바꿀 수 있다. 해석해보면, document는 웹문서에서 getElementById는 id가 home인 아이를 찾아서 innerHTML은 HTML에 대입하라 이다. 스타일을 바꾸고 싶다면 document.getElementById('home').style.fontSize = * 이런 식으로 style을 뒤에 붙여서 사용하면 된다. 셀렉터 (getElem..