JavaScript (13) 썸네일형 리스트형 노마드 코더 - 바닐라 자바스크립트로 5분만에 모달창 만들기 유튜브 채널 '노마드 코더'의 영상을 이용하여 모달창을 클론코딩했다. 출처: https://www.youtube.com/watch?v=V08wXKHF_Xw 버튼을 누르면 모달창이 뜨고, 모달창에 있는 버튼을 누르면 모달창이 닫히는 기능을 구현했다. 전체 코드이다. Open Modal I'm a modal ❌ CSS태그인 부터 살펴보자. button은 버튼에 대한 정보이다. background-color:blueviolet; //배경 색깔 설정 color:aliceblue; //문자 색깔 설정 padding:5px 20px; //박스 안쪽 여백 설정 border-radius: 5px; //꼭짓점 둥글게 설정 cursor: pointer; //커서 모양 설정 .modal은 화면에 팝업되어 나타나는 모달창에 .. Web UI 개발 - DOM과 querySelector 배운 내용 문서 객체 모델 (Document Object Model) XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. Tree 구조로 DOM을 저장하고 화면에 표시한다. API: Application Programming Interface, 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 다른 종류의 소프트웨어에 서비스를 제공한다. 두 가지 API에 대해 다뤘는데, getElementById와 querySelector이다. Document.getElementById() 메서드 주어진 문자열과 일치하는 Id속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다. Id는 중복되지 않기 때문에 특정 요소를 빠.. Web UI 개발 - window 객체 (setTimeout) 배운 내용 정리 브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있는 객체이다. 인터넷 브라우저 전체를 담당한다. window 객체에는 수많은 메서드들이 있는데, 그 중 setTimeout 메서드에 대해 공부했다. 즉시 실행되는 것이 아닌 일정 시간 후에 특정 코드나 함수를 실행하고 싶을 때 사용하는 콜백 함수이다. 요청과 결과가 동시에 일어나는 동기 함수인 다른 함수들과 달리, 요청과 결과가 동시에 일어나지 않는 함수인 비동기 함수로 작동하기 때문에 설정한 시간동안 동기 함수가 실행된 후 setTimeout 속 함수가 실행된다. function run(){ setTimeout(function(){ var msg="hello codesquad"; console.log(msg) console.lo.. 섹션 10 - 모듈 배운 내용 정리 모듈은 로직들을 재사용할 수 있는 단위로 나눈 것을 말한다. 모듈들을 다른 프로그램의 부품으로 사용하는 것을 모듈화라고 한다. 모듈을 사용하면 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 라이브러리는 자주 사용되는 로직을 재사용하기 편하도록 잘 정리한 코드들의 집합이다. 자바스크립트에서는 jQuery 라이브러리가 자주 사용된다. $('#list li').text('coding everybody') $ 문자를 사용하면 jQuery를 사용할 수 있다. 섹션 9 - 객체 배운 내용 정리 객체는 데이터를 담아내는 컨테이너이다. 배열과 비슷하지만, 배열은 순서가 있고 객체는 없다는 것에서 차이가 있다. 객체의 경우에는 key값과 value값만 가진다. 객체를 표현하는 방식은 다음과 같다. var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; for(key in grades) { document.write("key : "+key + " value : " +grades[key]+" "); } 연관되어 있는 값과 처리를 하나의 그릇 안에 모아서 그룹핑하는 형태로 프로그래밍을 하는 것을 객체 지향 프로그래밍이라고 한다. var grades = { 'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80.. 섹션 8 - 배열 배운내용 정리 배열은 데이터를 담는 그릇이다. 담겨있는 데이터를 원소라고 하고, 원소가 담겨있는 자리의 순서를 한국어로 색인, 영어로 index라고 한다. 배열을 반복문 안에 사용해서 배열을 반복적으로 사용할 수 있다. function get_members(){ return ['egoing', 'k8805', 'sorialgi']; } //배열 get_members 정의 members = get_members(); for(var i=0;i 섹션 7 - 함수 배운내용 정리 함수는 하나의 로직을 재실행할 수 있도록 하는 것으로, 코드의 재사용성을 높이기 위해 사용한다. 그 자리에서만 재사용할 수 있는 반복문과 달리, 함수는 여러가지 맥락에서 재사용할 수 있다. function을 사용해서 함수임을 나타낸다. function get_argument(arg){ //get_argument라는 함수를 만듦 return arg; } alert(get_argument(1)); //arg에 1을 넣고 1 출력 alert(get_argument(2)); //arg에 2를 넣고 2 출력 특정 함수를 일회성으로 쓸 때 함수에 이름을 붙이지 않고 쓸 때가 있는데, 이름이 없고 정의와 출력을 동시에 하는 함수를 익명 함수라고 한다. (function (){ return 1; })().. 섹션 6 - 반복문 배운내용 정리 반복문에는 while과 for이 있다. 특정 조건동안 반복적인 작업을 하도록 작동한다. break는 반복문을 즉시 멈추는 데에 쓴다. continue는 그 순간에만 중지시키고 다음부터는 반복문을 실행하는 데에 쓴다. 특정 조건이 true일 동안 반복문을 실행한다. while(i 이전 1 2 다음
