소프트웨어 개발 공부 블로그

개발 언어 공부, 기타 공부, 자기 관리를 기록하고 있습니다.

자바스크립트/자바스크립트&Jquery 키포인트

1. join() => 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환한다 특히 join(" ") 안에 큰따옴표의 여백 띄워쓰기를 주의해야한다. 2.reverse() 데이터 순서를 거꾸로 바꾼 후 반환한다 . 3. sort() 데이터를 오름차순으로 정렬한다 . sort()메서드와 compare(a,b) 메서드 리액트에서 사용하는 것 구분해서 생각하기 4.slice(index1, index2) => 데이터 중 원하는 인덱스 구간만큼 자르고 나머지의 배열 객체를 출력한다. 5.concat() 2개의 배열 객체를 한 개로 합친다. 6. pop() 배열에 있는 데이터 중에서 마지막 인덱스 데이터 삭제. 뒤팝! 7.push(new data) 마지막 인덱스에 새 데이터를 삽입한다 . 뒤에서 푸..

2022. 10. 10.

자바스크립트/자바스크립트&Jquery 키포인트

단락회로평가란 논리연산자 즉, and연산자나 or 연산자 boolean 연산자를 사용하여 값을 얻어내는 과정을 말한다. true && true ==> 모두 true여야 값을 반환한다. 즉, 앞의 값이 false이면 뒤의 값에 영향받지 않는다. true || false ==> 둘 중 하나만 true여도 true가 된다. 즉, 앞의 값이 true이면 뒤의 값 상관하지 않는다. !true ==> T면 F , F면 T가 나온다. 또한, true속성을 갖고 있으면 Truthy로 false 속성을 갖고 있으면 Falsy라는 개념으로 처리하는 방법도 있다. const와 let을 사용하여 함수 값을 만들어보자 const getName = (Object) => { const name = Object && Object.n..

2022. 8. 13.

자바스크립트/자바스크립트&Jquery 키포인트

객체리터럴이 자바스크립트의 데이터 방식인데 JSON으로 다른 언어와의 호환데이터를 위해서 문자열로 변환시키기 위해 사용한다. 참고로 객체리터럴의 key는 문자열테이터나 name같은 일반적인 기호로 표현한다. value는 어떤 데이터 타입이든 가능하다 . JSON은 자바스크립트의 객체 표기법인데 자바스크립트 객체를 문자열로 표현하는 방식이다. JSON.stringify() => JSON 문자열 시켜서 다른 프로그래밍 언어나 서버에 보내기 JSON.parse() => 다시 객체로 바꿀 수 있다 해당 코드 수정예정 JOSN에서 문자열로 변환에서의 특징 1. 작은따옴표는 X 2. 후행쉼표 X 3. 후행쉼표 없으면 OK. 4. stringify는 'key':'value 에서 value에 function() 함수가..

2022. 8. 12.

자바스크립트/자바스크립트&Jquery 키포인트

form태그의 경우 하나의 표를 만들어서 입력란을 만드는 경우에 많이 사용한다. 이 경우 label for 구조와 input type id 구조를 갖고 있는데 다른 DOM객체 요소와 마찬가지로 id나 class의 같은 경우 querySelector나 querySelectorAll로 form태그의 DOM요소에 접근할 수 있다. form태그에서는 텍스트 내용들이 많이 들어가기에 value로 속성 값을 갖고 올 때 뒤에 .value를 붙여준다. id나 class값이 아닌 name을 input에 붙여줄 경우 ==> document.form태그의 이름.input태그의 이름.value로 속성 값을 불러 올 수 있다. id나 class name이 아닌 form자체로도 폼 요소에 접근할 수 있다. 이때는 HTMLCol..

2022. 8. 8.

자바스크립트/자바스크립트&Jquery 키포인트

DOM 트리라는 말을 들어봤을 것이다 요소와 가지로 이루어진 DOM 트리에 요소,속성에 해당하는 것이 노드이다 이 노드를 추가하고 삭제할 수 있는데 사용하는 함수를 알아보자. createElement() => 새로운 노드를 만드는 것이다. createTextNode() => 텍스트가 있을 경우 텍스트 노드를 만든다. 요소 노드를 만든 후에 설명하는 텍스트를 만들 때 사용한다. appendChild() => 텍스트 노드를 요소노드의 자식으로 append 추가한다. 자식노드에 연결해야하기에 사용하는 것이다. 예를 들어보면 var obj = document.createElement("p") var Text = document.createTextNode("정보 입력"); obj.appendChild(Text);..

2022. 8. 7.

자바스크립트/자바스크립트&Jquery 키포인트

각각 하나의 요소에 하나의 이벤트만 처리할 때는 on+이벤트함수로 표시할 수 있다. 예를 들어서 onclick = function(){} 또는 onclick= 함수명(){}이다. 하지만 여러개의 이벤트를 작동시키고 싶을 때는 어떤 함수를 사용할까? 이때는 addEventListerner()함수를 사용하여 이벤트 동작을 여러 개 추가할 수 있다. addEventListener()의 매개변수 괄호 안에는 1. 이벤트가 동작하는 유형 (mouseover, mouseout 등..) 2. 함수 그리고 (함수를 선언하거나 함수를 갖고 와서 사용할 수 있다) 3. 캡처링 여부가 있다 (여기서 캡처링 여부는 부모노드에서 자식노드로 이벤트 동작이 전달되는 것을 말하는데 기본값은 자주 사용하지 않아서 false값으로 알아..

2022. 8. 7.

자바스크립트/자바스크립트&Jquery 키포인트

DOM이란 자바스크립트를 이용해서 웹 문서의 요소들을 객체를 사용해 웹 문서에 접근 하는 방법을 뜻한다. 문서 객체 모델이라는 말로도 말하는데 웹 문서에서 중요한 객체에 대한 접근과 변수를 생성하는 것에 익숙해져야한다 . DOM으로 웹 문서를 제어하면 편리한 이유는 수정해야할 HTML문서에 하나하나 접근하지 않아도 요소를 불러내어 수정이 가능하다는 점이다. 리액트에서도 많이 쓰는 document.querySelector()나 document.getElementById()도 대표적인 예이다. DOM의 트리를 보면 모든 태그는 요소노드로 표현이 가능하다. 태그가 갖고 있는 텍스트는 텍스트노드로 표현하며, 태그의 속성은 부모노드와 연결지어서 자식노드의 속성노드로 값을 갖고 올 수 있고 설정할 수도 있다. 웹 ..

2022. 8. 7.

자바스크립트/자바스크립트&Jquery 키포인트

어떤 목록을 추가할 때 필수적으로 추가버튼이 있을 것이고 추가가 완료된 후에 글을 입력하는 입력란이 초기화되는 것이 사용자가 접근하기 편할 것이다. 자주 사용하는 click이번트에서의 addEventListener()함수와 querySelector를 이용한 내용의 초기화와 자동으로 마우스와 초점이 맞춰져있는 focus함수에 대해서 기억해두자. 추가 버튼을 만들 때는 Html문서에서 선택자를 갖고와서 변수에 넣고 해당 변수를 addEventLister()함수를 사용해서 이벤트(동작)을 함수를 사용해서 클릭과 addList()함수를 실행하면된다. var addbtn = document.querySelector("#add"); addbtn.addEventListener("click", addList)를 사용하..

2022. 8. 7.

자바스크립트/자바스크립트&Jquery 키포인트

객체란 하나의 변수에 여러 자료형 즉, 정보를 담기 위해 사용하는 것이다. 그래서 리액트나 자바스크립트에서는 변수 객체 안에 key:"value"로 여러 정보들을 넣을 수 있다. 기본적으로 내장객체가 있지만 문서 객체, 브라우저 객체, 그리고 사용자가 직접 정의할 수 있는 객체도 있다. 여기서 문서 객체의 DOM이라는 용어가 있는데 리액트에서 DOM에서 쓰는 Use명령어가 있기 때문에 단어에 익숙해지기. 그리고 사용자 정의 객체는 말그대로 객체를 만들 때 사용자가 직접 만들어서 쓰는 것이다. 객체 안에 정보를 담는 것이 속성이고 객체에 어떤 동작을 취할 것인지 함수를 사용하는 것이 메서드이다. 객체.속성 객체.메서드()로 표현한다. 내장객체 자바스크립트 안에 내장되어있어서 그대로 사용하면 된다. new ..

2022. 8. 7.