Javascript를 사용하는 이유
Javascript는 스크립트 언어이다. 스크립트 언어란, Java, Python과 같이 컴파일 후 하나의 응용 프로그램이 되어 독립적으로 작동하는 언어가 아니라, 응용프로그램에 삽입되어 동작하는 언어이다. Javascript는 html문서를 조작하는 기능을 수행한다.
기본적인 front-end 만드는 법칙
- html, css로 미리 UI 디자인을 해두고 평소에 display: none; 으로 숨겨둔다
- 어떤 이벤트가 발생하면 UI를 보여달라고 자바스크립트로 코딩한다.
주의할 점
- JS 코드는 html을 조작하는 언어이기 때문에 가장 밑에 짜야한다.
- 맘대로 동작하지 않을 때, 웹브라우저 개발자도구에서 Console탭에서 에러 확인 가능하다.
JS 기본 문법
document.getElementById('id값').??? = '!!!';웹 문서의 id값에 해당하는 엘리먼트를 찾아 ???를 !!!로 설정. ???만 바꿔주면 html의 모든 것을 변경할 수 있다.
ex)document.getElementById('id값').style.fontSize = '20px'; document.getElementById('id값').src = '이미지 주소';
클래스명으로 element 찾기
getElementsByClassName('클래스명')[인덱스]
함수와 이벤트 리스너
- 함수
function 함수이름(파라미터, 파라미터....) {}
- arrow function : 함수에서 function대신 => 사용(콜백함수에 사용) 다만, 함수 안에서 this를 사용하는 경우 사용하지 말기.
var pants = [28, 30, 32]; pants.forEach(function(a){ //보통 function console.log(a) }); pants.forEach((a) => { //arrow function console.log(a) });
- 이벤트 리스너 : 함수를 호출할 때,을 사용하는 것도 지저분해보인다. 이를 해결
document.getElementById('id값').addEventListener('이벤트', function(){ //실행 코드 });**이벤트리스너 함수 안에 들어가는 function을 콜백함수라 함.
classList
UI를 화면에 보였다 안보였다 하는 것은 style.display를 조작하는 법도 있지만, 단순히 보여주고 가리는것 말고도 여러가지 스타일을 동시에 변경하고 싶은 경우에 classList를 사용하여 클래스를 탈부착한다.
문법)document.getElementById('id값').classList.add('클래스명'); //class 추가 document.getElementById('id값').classList.remove('클래스명'); //class 제거 document.getElementById('id값').classList.toggle('클래스명'); //class 있으면 제거, 없으면 추가
querySelector
getElementBy어쩌구 대신 쓸 수 있는 문법.
ex)document.querySelector('.클래스명') document.querySelector('#id명') document.querySelectorAll('.클래스명')[인덱스]
jQuery
jQuery는 복잡한 JS문법을 간단하게 바꾼 라이브러리이다. jQuery cdn에서 스크립트 코드를 코드에 삽입하고 그 아래에 jQuery를 사용하면 된다.
기본 문법
querySelector == $
.innerHTML == .html
.style.속성 == .css('속성', '값')
클래스 리스트 == .addClass('클래스명'), .removeClass('클래스명'), .toggleClass('클래스명')
이벤트 리스너 == .on('이벤트', function(){});
**jQuery는 셀렉터로 찾은 모든 요소를 한번에 조작한다.
jQuery로 구현하는 간단한 애니메이션
이런게 있지만,, 애니메이션은 최대한 CSS로 구현하는게 맞다
$(.클래스명).hide() $(.클래스명).fadeOut() $(.클래스명).slideUp() $(.클래스명).show() $(.클래스명).fadeIn() $(.클래스명).slideDown() $(.클래스명).fadeToggle()
+애니메이션 만드는 법칙
- one-way animation
- 시작스타일, 최종스타일을 클래스로 만들어놓는다. (visibility : hidden / visible
- 원할 때 최종 스타일로 변하라고 자바스크립트 코드를 짠다.
- transition을 추가한다.
form tag에서 발생하는 event
form에서 input 태그의 type="submit"인 경우에 다음과 같이 submit 이벤트를 활용할 수 있다.
$('form').on('submit', function(){});++ 추가적으로 폼 전송을 막는 방법
$('form').on('submit', function(e){ if(어떤 경우){ e.preventDefault(); //폼 전송을 막는다 } });
input tag에서 발생하는 event
- input 이벤트 : input 칸 안에 값이 변경될 때마다 발생한다.
- change 이벤트 : input 칸 안에 값이 변경되고 포커스가 칸을 벗어나 클릭되면 발생한다.
==> 몇 글자 이상 입력.. 이런 상황에서 사용
비교 연산자
=== : 강한 비교. type까지 비교한다. 예를들어
1 == '1' -----> true
1 === '1' -----> false
변수
- var 변수이름 : type 관계 없이 저장. element도 저장 가능하다.
- let 변수이름 : 재선언이 불가능하다. (변수 이름이 중복되는 것을 원치 않을 때 사용)
let count = 10; let count; //이거 안됨.
- const 변수이름 : 재선언, 재할당이 불가능하다. 상수임. (불변의 값을 저장할 때 사용)
const count = 10; cout = 5; //이거 안됨.++ script 태그 안에 있는 코드는 페이지 새로고침 시 1회 실행되고, 이벤트 리스너 안에 있는 코드는 이벤트 발생 시 1회 실행된다. 따라서 변수를 선언하는 위치가 중요하다.
JS 시간 제어 함수
- setTimeout() : x초 후에 코드 실행
setTimeout(function(){실행코드}, 기다릴 시간(ms));
- setInterval() : x초마다 코드 실행
setInterval(function(){실행코드}, 기다릴 시간(ms));
문자열 검사와 정규식
- '문자열'.includes('찾을 단어'); : 찾는 단어 있으면 true, 없으면 false
- 여러가지 정규식
/abc/.test('abcdef') //true . []안에 있는 문자 중 아무 문자 하나가 있는지 검사 /[a-d]/.test('aefg') //true /[가-다]/.test('다라마바') //true /[a-zA-Z]/.test('반가워요') //false //아무 영어 있는지 /[a-zA-Z]/.test('반가워요a') //true /[ㄱ-ㅎ가-힣ㅏ-ㅣ]/.test('반가워요') //true //아무 한글 있는지 . \는 특수문자 포함 아무문자 1개 /\S/.test('abcde') //true ^는 해당 문자로 시작하는지 $는 해당 문자로 끝나는지 /^a/.test('abcde') //true /e$/.test('abcde') //true (문자|문자)는 둘 중 아무거나 하나 있는지 /(e|f)/.test('abcde') //true
스크롤 이벤트 부터 정리하기
Array와 Object 자료형
- Array : 자료형 상관 없이 저장. 인덱스로 접근
var car = ['소나타', 50000, 'white']; car[0]; //소나타 반환
- Object : Key / Value의 형태로 데이터 저장
var car2 = { name : '소나타', price : 50000 }; car2.name; //소나타 반환++여러 종류의 데이터를 저장할 때는 Object를 사용하는게 좋다. key를 이용하여 접근할 수 있기 때문이다. '몇번째' 보다 '어떤 key'가 더 찾기 직관적이고 쉬움.
++Array는 순서 개념이 있지만, Object는 순서 개념이 없다. 따라서 Array는 sort, slice, push 등의 여러 연산이 가능하다.
- Array와 Object 결합
var products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : 1, price : 50000, title : 'Springfield Shirt' }, { id : 2, price : 60000, title : 'Black Monastery' } ]; products[0].price //70000리턴
문자 사이 변수 삽입
- '문자' + 변수 + '문자'
`문자${변수}문자` //`는 백틱
JS로 html 요소 생성하기
보통 두번째 방법 사용
<script> var a = document.createElement('p'); a.innerHTML = '안녕'; document.querySelector('#test').appendChild(a); </script><script> var a = '<p>안녕</p>'; document.querySelector('#test').insertAdjacentHTML('beforeend', a); </script> //jQuery 버전 <script> var a = '<p>안녕</p>'; $('#test').append(a); </script>
forEach
반복문에서 Array의 길이만큼 반복
var pants = [28, 30, 32]; pants.forEach(function(a, i){ //첫번째 파라미터: 배열의 데이터, 두번째 파라미터: 인덱스 console.log(a) //28 30 32 출력 });```
for in
반복문에서 Object의 자료 개수(key의 개수)만큼 반복
var obj = { name : 'kim', age : 20 } for (var key in obj){ console.log(key) console.log(obj[key]) }
Ajax
- Ajax는 서버와 데이터를 페이지 새로고침 없이 주고받는 방식으로, 서버에 데이터를 요청할 때는 GET방식, 서버로 데이터를 보낼 때는 POST방식을 주로 사용한다.
- GET (jQuery)
$.get('https://codingapple1.github.io/hello.txt') .done(function(data){ //ajax 요청 성공시 console.log(data) }) .fail(function(error){ //ajax 요청 실패시 console.log('실패함') });
- POST (jQuery)
$.post('url~~', {name : 'kim'})
- jQuery 없이 생JS
fetch('https://codingapple1.github.io/price.json') .then(res => res.json()) //json파일 변환 .then(function(data){ console.log(data) }) .catch(function(error){ console.log('실패함') });++ 서버와 데이터를 주고받을 때는 문자만 가능하다. 따라서 모든 자료에 ""가 붙어 문자로 만들어진 JSON파일을 주고받는데, jQuey는 이 JSON자료를 자동으로 array나 object로 변환해주고, 자바스크립트는 변환하지 못해서 res.json() 이 필요하다. 그냥 jQuery 쓰자
Array 정렬(sort함수)
- 문자 정렬(가나다, abc 순) : array.sort()
- 숫자 정렬
var 어레이 = [7,3,5,2,40]; 어레이.sort(function(a, b){ return a - b });sort 내부 함수의 원리는, a, b는 Array 안의 자료들이고 리턴값이 양수이면 a를 오른쪽으로 두고, 음수이면 b를 오른쪽으로 둔다. 예를 들어 7, 3을 비교하면 리턴은 7-3=4이다. 양수이므로 7을 오른쪽으로 옮긴다.
Array에서 자주 쓰는 함수
- filter : return의 조건식에 맞게 배열을 반환한다. 원본을 변형시키지 않는다.
var 어레이 = [7,3,5,2,40]; // var 새어레이 = 어레이.filter(function(a){ return a < 4 });
- map : Array의 자료들을 모두 변형시킨다.
var 어레이 = [7,3,5,2,40]; // var 새어레이 = 어레이.filter(function(a){ return a * 4 });**원본을 변형하는 것은 나중에 오류를 발생시킬 수 있기 때문에 원본을 복사해두고 사용하는 경우 많다.
DOM(Document Object Model)
자바스크립트는 html을 해석하지 못한다. 따라서, 자바스크립트를 위해서 브라우저는 html을 object와 비슷한 형태로 저장한다. 예를 들어,
<div style="color : red">안녕하세요</div>이 코드는
var document = { div1 : { style : {color : 'red'} innerHTML : '안녕하세요' } }이런 느낌으로,,,
브라우저는 html문서를 위에서부터 읽으면서 DOM을 만든다. 따라서, 아래 코드는 에러가 난다.(html 파일) // <script> document.getElementById('test').innerHTML = '안녕' </script> // <p id="test">임시글자</p>이를 해결하기 위해 자바스크립트 실행을 뒤로 미룰 수 있다.
$(document).ready(function(){ 실행할 코드 }) document.addEventListener('DOMContentLoaded', function() { 실행할 코드 })위 둘 중 하나를 실행하면 모든 DOM을 만들었는지 확인한 후, 코드를 실행한다.
요즘에는 body 태크 맨 아래에 자바스크립트 코드가 들어가기 때문에 문제 없지만, 자바스크립트 위치가 불가피하게 다른 위치에 있을 때 사용한다.
- load 이벤트 리스너 : DOM 뿐만 아니라 css, js 파일이 로드됐는지 확인한다.
$(window).on('load', function(){ //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드 }); // window.addEventListener('load', function(){ //document 안의 이미지, js 파일 포함 전부 로드가 되었을 경우 실행할 코드 })
Local Storage
브라우저에는 위와 같은 저장공간이 여러개 있다.
