코딩/바닐라 자바스크립트 (5) 썸네일형 리스트형 자바스크립트의 클로저를 간단한 예제로 알아보기 클로저...자바스크립트를 공부하다보면 만나게 되는 어려운 개념들 중 하나입니다. 클로저를 잘 이해하기 위해서는 버그를 줄일 수 있는 변수 정의 방법에 대해 알아야 합니다. 변수를 사용할 때에는 변수를 정의하고, 데이터를 할당해야 합니다. var 변수; // 변수 정의 변수 = 10; // 데이터 할당 자바스크립트에서 var 키워드를 사용해서 변수를 정의하면 재정의와 재할당이 모두 가능합니다. var 변수; 변수 = 10; var 변수 = 20; // 재정의 변수 = 30; // 재할당 재정의는 이미 정의된 변수를 다시 정의하는 것이고, 재할당은 이미 데이터를 할당한 변수에 새로운 데이터를 할당하는 것을 의미합니다. 자 그럼 변수를 재정의하고 재할당 할 수 있게되면 어떤 문제가 발생할까요? var 간식; .. 모던 자바스크립트 딥다이브 - 표현식과 문 우리는 코드를 작성하는 과정에서 값을 다룬다. 값을 생성하기 위해서는 표현식을 평가해야 한다. 표현식을 평가한다는 것은, 표현식을 해석해서 값을 생성하거나 참조한다는 뜻이다. var age = 20 + 10; 위 예제에서 20 + 10은 숫자 타입 값 30을 생성하는 표현식이다. 그러므로 변수 age에는 20 + 10이 날 것 그대로 할당되지 않고, 20 + 10이 평가된 숫자 타입 값 30이 할당된다. 그렇다면 단순한 숫자 20도 표현식일까? 20; 위 예제에서 숫자 20은 리터럴이라고 부른다. 좀 더 정확히 말하자면 숫자 리터럴이다. 100; // 정수 리터럴 100.5; // 부동 소수점 리터럴 null; // null 리터럴 등등 리터럴은 약속된 기호나 문자를 사용해서 값을 생성하는 표기법을 의미.. 모던 자바스크립트 딥다이브 - 변수 모던 자바스크립트 딥다이브 스터디를 시작했다. 1~3장까지는 기본적인 자바스크립트 소개와 환경 셋팅에 대한 내용이라 4장부터 스터디를 시작하기로 했다. 4장의 내용은 변수에 대한 것. 가장 먼저 변수란 무엇인가? 프로그래밍을 할 때 가장 많이 사용하는 개념 중 하나가 변수라고 생각한다. 이 변수에 대해 이해하기 위해서는 컴퓨터가 데이터를 저장하고 불러오는 원리를 이해해야 한다. 컴퓨터는 메모리에 데이터를 저장한다. 그리고 메모리의 최소 단위는 메모리 셀이며 8비트 크기를 가진다. 이 메모리 셀에 데이터를 저장하고 메모리 셀의 주소를 통해 데이터를 참조할 수 있음. (여기서 참조란 메모리에 저장된 데이터를 읽어들이는 것을 의미한다.) 사설이 길었지만 다시 변수란 무엇인가에 대해 이야기해보자면 변수는 데이터.. 자바스크립트로 버튼 효과 만들기 웹페이지에서 버튼 눌렀을때 뭐가 튀어나오게 하거나 텍스트를 바꿔준다거나 그런 다양한 기능들을 구현하기 위해서는 자바스크립트를 써야 함. 물론 버튼 디자인은 HTML과 CSS로 한다. 오늘 포스팅 내용은 버튼 디자인은 모르겠고 버튼을 눌렀을때 기능을 부여하는 것이 핵심. 바로 예제 코드 들어감 뿅 버튼 div 태그에 스타일을 넣어서 display: none 옵션을 넣으면 기본적으로 div 태그의 내용이 웹페이지에 표현되지 않음. 근데 버튼을 만들어서 div 태그의 스타일 옵션을 display: block 으로 바꿔주면 div 태그의 내용이 웹페이지에 표현됨 이렇게 된다는 이야기임. 자 여기서 버튼 태그에 onclick이라는 옵션이 들어가있는데 말그대로 저 태그를 클릭했을때 특정 코드를 실행시켜준다. onc.. 자바스크립트로 HTML에서 특정 id의 텍스트 바꾸기 자바스크립트는 HTML을 조작할 수 있는 프로그래밍 언어임 바로 예제 갈길게여 안녕? 위 예제를 돌리면 우리는 insa라는 id를 가진 태그의 내용물을 '안녕하세요?'라는 텍스트로 바꿀 수 있음 이게 가능한 이유가 저기 이렇게 글자 색도 바꿔줄 수 있음. style 옵션 뒤에 color도 넣을 수 있고, background-color, font-size 등 CSS 옵션을 넣을 수 있다. 아주 간단함. 이전 1 다음
