닭발에서 개발까지

Date Types의 종류 Boolean Number String Null Undefined Symbol Object String Type 문자열 변수.toUpperCase : 소문자를 대문자로 변환시켜준다 var a = "hello" a.toUpperCase() 결과=> "HELLO" 문자열 변수.toUpperCase("값") : 값을 넣은 부문의 시작점을 알려준다 var a = "hello world"; a.indexof(o); 결과 => 4 0번째 글자부터 h번째 글자의 위치가 4라는 뜻 문자열 변수.trim : 공백을 없애준다 var a = " hello "; a.tirm() 결과 => "hello" 문자는 " ", ' ' 안에 대입해야 한다

Study/JS 2020. 7. 24. 16:55

DOM, DocuMent Object Model 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것 -tree 형태에 따름: 족보나 가계도와 비슷함 document object javascript에서 document로 접근가능 childen에는 문서의 최상위 엘리먼트인 html이 존재 Element API -자식, 부모 엘리먼트에 접근하는 방법 childen : 해당 object의 자식 노드에 대한 배열 parentNode : 부모 노드 firstElementChild : 첫 자식 엘리먼트 lastElementChild : 마지막 자식 엘리먼트 -같은 레벨의 형제 엘리먼트에 접근하는 방법 nextElementSibling previousElementSibling Document API DOM ..

Study/JS 2020. 7. 24. 15:16

함수(function) 란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성르 높여준다. return 함수 내에서 사용한 return은 return 뒤에 따라오는 값을 함수의 결과로 반환한다. 동시에 함수를 종료시킨다. function get__name1(){ return `홍길동' } function get__name2(){ return `홍길순' } 위 코드를 실행하게 되면 홍길동과 홍길순이 리턴 값을 결과로 반환하고 동시에 함수는 종료된다. 하지만 아래 코드를 실행해보면 function get__name3(){ return `홍깅동`; return `홍깅순`; return `홍깅정`; } 위 코드를 실행하게 되면 홍길동이라는 return 값을 결과로 반환하고 함수가 종료되어 버린다 아..

Study/자바 2020. 7. 23. 11:56

var arr = ["bbb", "ddd", "aaa", "ccc"]; arr.sort(); 일반적인 정렬 방법입니다. 아스키코드 문자 순서로 정렬됩니다. 2. 숫자 정렬 var arr = [1, 111, 4, 222, 10, 3]; arr.sort(); 위 문자 정렬과 동일한 방법으로 정렬하게 되면 아스키코드 순으로 정렬되어 숫자의 크기대로 정렬되지 않습니다. var arr = [1, 111, 4, 222, 10, 3]; arr.sort(function (a,b){ return a-b; }); 오름차순 정렬 방법입니다. var arr = [1, 111, 4, 222, 10, 3]; arr.sort(function (a,b){ return b-a; }); 내림차순 정렬 방법입니다. 3. Object 정렬..

Study/JS 2020. 7. 22. 21:47

이제 forEach 함수에 대해 알아보도록 하겠습니다. forEach의 구문은 아래와 같습니다. 1 array.forEach(callbackFunction(currnetValue, index, array), thisArg); cs 매개변수로는 callbackFunction 과 thisArg 가 있습니다. array의 인자값 만큼 callbackFunction이 반복되고, thisArg 는 거기서의 this 값이 되는것이죠. callbackFunction에는 3개의 매개변수가 있습니다. currentValue : 배열 내 현재 값. index : 배열 내 현재 값의 인덱스. array : 현재 배열 입니다. 그럼 예를 보도록 하죠. 1 2 3 4 5 6 7 8 9 10 (function test(){ va..

Study/JS 2020. 7. 20. 21:41

스토리지(Storage) 자바스크립트 개발을 하다보면 스토리지가 필요할 때가 있다. 스토리지에 대해 알아보자 HTML5에서 추가된 로컬 스톨지는 Window 객체의 하위 객체로 영구 저장인 로컬 스토리지와 브라우저가 실행 중에만 유효한 세션 스토리지라는 두가지 저장 방식을 제공한다. 스토리지 종류 구분 유호기간 localStorage 없음(영구적) sessionStorage 브라우저 탭이 열려있는 동안만 유지됨(종료시 삭제) key와 value 로컬 스토리지의 저장은 키와 값의 형태로 이루어진다. 키는 저정된 값을 식별하고 가져오는데 사용되고 원하는 만큼 로컬스토리지에 키를 저장 할 수 있다. 반대로 키를 가져올 때는 조회하려는 키 값으로 요청한다. 할당된 키의 저장되는 값은 숫자, 문자열, 객체(JSO..

Study/JS 2020. 7. 19. 23:50

preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..

Study/JS 2020. 7. 16. 19:00

삼항 조건 연산자 삼항 조건 연산자는 자바스크립트에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 if문의 단축 형태로 쓰입니다. 기본형 조건식 ? 실행문1 : 실행문2; 조건식의 값이 true면 실행문 1을 실행하고, false면 실행문 2를 실행합니다.

Study/JS 2020. 7. 16. 18:58