본문 바로가기

실행력이 모든걸 결정한다

Frontend/JavaScript7

var, let, const의 차이점 정리 이번 포스팅에서는 javascript의 변수 선언 방식인 var, let, const의 차이점에 대해 다룰 것이다. 1. 변수 or 상수? var : 변수 let : 변수 const : 상수 2. 재선언이 가능한가? var : O let : X const : X 3. 선언 이전에 참조할 수 있는가? (블록 내) var : O (단, undefined가 출력된다) let : X const : X ※ 선언 이전에 참조하는 것을 Hoisting이라고 한다. 4. IE 지원 버전 var : 모든 버전 지원 let : IE11~ const : IE11~ 차이점은 이정도로만 정리해보기로 하고, 자바스크립트에서는 var보단 let을 사용하는걸 권장하는 이유를 알아보자. 전역 변수는 가급적 사용을 자제하라는 말이 많은.. 2021. 3. 13.

Ajax(2) - jQuery로 사용하기 1. $.ajax() 메소드 jQuery로 Ajax를 사용하기 위해 $.ajax() 메소드를 사용한다. 여기서 $는 jQuery 객체를 의미하는데, jQuery에서 ajax() 메소드를 제공한다고 해석할 수 있다. ajax 메소드의 인자로 url주소와 추가 옵션들을 정할 수 있다. 사용 예시 $(function() { $("선택자").on("click", function() { //해당 요소를 [클릭]시 호출 $.ajax({ url: "/path.php", //요청을 보낼 서버의 URL주소 data: { name: "jooyeok", age: "24"}, //서버로 보낼 데이터 type: "GET", // 요청 방식 dataType: "json" // 서버에서 보내줄 데이터 타입 }) .done(func.. 2021. 2. 26.

Ajax(1) - 기본 개념 소개와 동작 원리 1. Ajax란? Ajax(Asynchronous Javascript and xml) 자바스크립트의 라이브러리중 하나이며, 비동기식 자바스크립트와 xml을 뜻한다. Ajax를 사용하면 페이지 새로고침 없이 페이지 일부의 데이터를 바꿀 수 있게 된다. 데이터 로드를 위해 XMLHttpRequest 객체를 이용하는 것이 특징이다. 2. Ajax의 동작 원리 사용자에 의해 이벤트가 발생하면 핸들러에 의해 바로 자바스크립트를 불러온다. 그 후 자바스크립트에서는 XmlHttpRequest 객체를 이용하여 서버로 요청을 보내는데, 그동안 웹 브라우저는 응답을 기다릴 필요 없이 다른 작업을 수행할 수 있다(비동기 방식). 서버측에서 처리를 마치고 XmlHttpRequest 객체를 전달 받으면 이를 토대로 Ajax요청.. 2021. 2. 25.

JSON의 정의와 그 사용법 1. JSON이란? JSON은 웹과 컴퓨터 프로그램에서 용량이 적은 데이터를 교환하기 위해 데이터 객체를 속성-값의 쌍 형태로 표현하는 형식으로, 이 형식은 사람과 기계에게 모두 쓰기 용이하다. JSON은 자바스크립트를 토대로 개발되었지만 언어로부터 독립적이며, C, C++, Java, Python, PHP 등 에서 JSON 형식으로 데이터를 주고 받는다. 단, 표기법은 자바스크립트 객체 표기법을 따른다. 특히 서버와 통신을 해야하는 작업에 매우 유용하다. 2. JSON의 구조 {"데이터 이름" : 값} 쌍으로 구성되어 있는 구조이다. 데이터 이름은 반드시 문자열 형식이어야 하며, 큰 따옴표를 사용해야 한다. 값으로는 숫자, 문자열, 불리언(boolean), 객체, 배열, null가 올 수 있다. 이미지.. 2020. 9. 19.

JavaScript와 php와의 통신 php와 통신할 XMLHttpRequest 객체 생성 및 동작 설정 var xhr = new XMLHttpRequest(); xhr.open('GET', 'uri'); xhr.onreadystatechange = function(){ //상태의 변화가 나타났을 시 함수 실행 if(xhr.readyState === 4 && xhr.status === 200){ //4=연결완료, 200=요청한 문서가 서버에 존재 // 동작 console.log(xhr.responseText); //php파일에서 php코드영역()의 echo값과 php코드영역 외의 내용을 반환 } }; xhr.send(); //GET 방식은 인자가 없다. 요청 방식별 send 함수의 형식 Get 방식 : send() 함수에는 인자가 들어가지 .. 2020. 9. 18.

id를 이용하여 속성 적용 제외하기 w3school 이라는 사이트에서 jQuery의 css함수에 대해 조사해보았다. css함수는 선택된 모든 대상을 지정된 속성대로 모두 바꿔주는 편리한 함수이다. 그런데 특정 대상을 제외하려면 어떻게 해야할까 궁금증이 몰려와서 임의로 소스코드를 바꾼뒤 여러번 테스트 해봤다. 가장 가독성 좋고, 간단하게 구현할 수 있는 방법은 id인 것같다. 3,5번째 paragraph에는 dont include라는 이름의 id를 설정해주고 아래에 밑줄 친 내용처럼 해당 객체의 id가 dont include가 아니라면 지정된 속성을 적용해주는 것이다. this는 p객체들 중 현재 순회중인 p객체를 의미한다. 여기서 css의 인자는 속성, 속성 값인데 속성 값의 경우에는 정수값을 리턴하는 함수로 대체 한 것이다. 속성 값으로.. 2020. 9. 3.

[jQuery] index를 이용한 객체 선택 완벽설명 p는 ,paragraph 태그 $($('p')[1]).css("border-width", "25"); (O) 올바른 예 $($('p[1]')).css("border-width", "25"); (X) 아래부터는 잘못된 예로, 동작하지 않음 $($(p[1])).css("border-width", "25"); (X) $('p')[1].css("border-width", "25"); (X) $('p[1]').css("border-width", "25"); (X) $(p[1]).css("border-width", "25"); (X) $(p)[1].css("border-width", "25"); (X) 구조를 설명 하자면, 선택자에 따옴표를 포함하여 jQuery함수의 인자로 넣고, (작은 따옴표(' '), 큰 따옴.. 2020. 9. 3.

이전 1 다음

티스토리툴바