본문 바로가기

Doit!자바스크립트입문

[10일차] Do it! 자바스크립트 입문 / 10 웹 브라우저를 다루는 방법, 브라우저 객체 모델
Programming/javascript 2021. 12. 16. [10일차] Do it! 자바스크립트 입문 / 10 웹 브라우저를 다루는 방법, 브라우저 객체 모델 전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다. - 문서 객체 모델(DOM) : 웹 '문서'에 삽입된 각 요소를 객체로 인식하고 조작하는 것 - 브라우저 객체 모델(Browser Object Model) : 웹 '브라우저' 전체를 객체로 관리하는 것 * 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 - 브라우저 창이 열리면 ① Window 객체가 생성되고, ② 그 하위에 브라우저 각 요소에 해당하는 객체가 생성됨 이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저의 각 요소에 해당하는 객체이며 각각 또 다른 하위 객체를 갖고 있음 - 최상위에 있는 Window 객체를 시작으로 하는 객체 모델 계층..
[9일차] Do it! 자바스크립트 입문 / 09 폼과 자바스크립트
Programming/javascript 2021. 12. 15. [9일차] Do it! 자바스크립트 입문 / 09 폼과 자바스크립트 - 폼(Form) : 사용자가 정보를 입력할 수 있게 만들어 놓은 웹 요소 - 폼 요소에 접근하는 방법은 id나 class 값을 이용하는 것은 같음 => id 값은 폼 요소 하나에만 접근하고, class 값은 폼의 여러 요소를 가져와 배열 형태로 저장 - id나 class 속성이 없고 name 속성만 있어도 해당 요소에 접근 가능! * 단, 이 방법을 사용하려면 태그에 name 속성이 지정되어 있어야 하고, 태그 안에 포함된 폼 요소에서 name 속성이 있어야 함 // 접근하는 방법 // 첫번째 - 각 name 값을 입력 // ┌ document.ship.shippingName // └ 태그에 포함된 요소 중 // 두번째 - 배열 형태로 접근 // ┌ ..
[7~8일차] Do it! 자바스크립트 입문 / 08 웹 문서를 다루는 방법, 문서 객체 모델(DOM)
Programming/javascript 2021. 12. 13. [7~8일차] Do it! 자바스크립트 입문 / 08 웹 문서를 다루는 방법, 문서 객체 모델(DOM) 전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다. - 문서 객체 모델(DOM) : Document Object Model : 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법 - DOM을 사용하지 않고 상세 설명 가리기 : html 태그 중 가리고 싶은 게 있다면 CSS로 처리 => 관리가 번거롭고 어려움 // html 상세 설명 부분을 가리고 싶다면? 상세 설명 2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리..
[6일차] Do it! 자바스크립트 입문 / 07 배열을 쉽게 다루자! Array 객체
Programming/javascript 2021. 12. 11. [6일차] Do it! 자바스크립트 입문 / 07 배열을 쉽게 다루자! Array 객체 - Array : 배열 * 내장 객체로 만들어져 있음 // 빈 괄호를 사용하면 배열 요소의 개수가 고정되지 않기에 // 얼마든지 많은 자료를 저장할 수 있음! var myArray = new Array();// Array 객체의 인스턴스를 만듦 // 초깃값이 있는 배열 var numbers = ["one", "two", "three"];// 리터럴을 사용한 배열 var numbers = new Array("one", "two", "three");// Array 객체를 사용한 배열 - 배열에서 for문 사용하기 * 인덱스는 0부터 시작한다는 걸 꼭 기억하기! - 배열과 관련된 함수를 사용할 때는 함수의 반환 값이 무엇인지,..
[5일차] Do it! 자바스크립트 입문 / 06 여러 자료를 한꺼번에 담는 객체
Programming/javascript 2021. 12. 10. [5일차] Do it! 자바스크립트 입문 / 06 여러 자료를 한꺼번에 담는 객체 전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다. - 객체(Object) : '복합' 자료형 => 객체 안에 숫자, 문자열 등 여러가지 자료형이 포함되기 때문 => 자바스크립트에서 객체는 자료를 저장하고 처리하는 기본 단위 => 하나의 변수에 다양한 정보를 담기 위해 사용하는 자료형 예) 책(객체) - 제목, 이 책의 분야, 저자, 쪽수, 가격 출간일 등의 정보들이 들어있음 // 책(book) 객체의 예시 var book = { title: "된다! 김OO의 유튜브 영상 만들기",// 제목 author: "김OO",// 저자 pages: 368,// 쪽수 price: 16000// 가격 } - 프로그래밍 언어에서 객체(Object)는 여러 가지 의미로 해석 가능..
[4일차] Do it! 자바스크립트 입문 / 05 함수와 이벤트
Programming/javascript 2021. 12. 6. [4일차] Do it! 자바스크립트 입문 / 05 함수와 이벤트 전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다. 05-1 여러 동작을 묶은 덩어리, 함수 - 함수(Function) : 기능별로 여러 명령을 묶어 놓은 것 - 함수의 장점 * 각 명령의 시작과 끝을 명확하게 구분 가능 * 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수 실행 가능 // ┌ 함수명 function addNumber(a, b) { var sum = a + b; } - 내장 함수 : 자바스크립트에 미리 만들어져 있는 함수 개발자가 필요할 때 가져다 사용할 수 있음 💡 개발자가 함수 내부까지 깊게 알지 못해도 쉽게 가져다 쓸 수 있음 - 함수 선언 : 함수가 어떤 명령을 처리해야 할지 미리 알려주는 것 - 함수 실행 : 선언한 함수를 가져와 사용하는 것 // 함수 ..
[3일차] Do it! 자바스크립트 입문 / 04 흐름을 제어한다! 제어문
Programming/javascript 2021. 12. 5. [3일차] Do it! 자바스크립트 입문 / 04 흐름을 제어한다! 제어문 전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다. 04-1 조건에 따라 흐름 조절하기 - if문, if···else문과 조건 연산자 - if문 : 소괄호 안의 조건이 ture면 중괄호 안의 자바스크립트 소스를 실행, false면 중괄호 안의 자바스크립트 소스를 무시 - if···else문 : 조건이 맞을 때와 안 맞을 때 실행할 명령이 따로 있다면 사용 * 무조건 if문의 조건을 먼저 확인함 - 조건 연산자 ㅡ ?(물음표)와 :(콜론) : 조건이 하나이고 true일 때와 false일 때 실행할 명령도 하나뿐이라면 사용 var score = 75; (score >= 60) ? alert("통과"):alert("실패") // 조건 ? true일 때 : false일 때 - truthy 값과 ..
[서평단] Do it! 자바스크립트 입문 - '입문'이란 단어의 중요성
Programming/javascript 2021. 11. 28. [서평단] Do it! 자바스크립트 입문 - '입문'이란 단어의 중요성 이 책은 이지스 퍼블리싱 서평단에 선정되어 직접 공부 후 작성한 내용입니다. ※ 공부 중 컴퓨터 고장으로 1회 완독 후 연재를 위해 2회 독서중입니다. (21.11.28) - (21.12.16 완독 완료!) 0. 간단 프리뷰 이 책은 정말 '입문'이란 단어에 맞게 자바스크립트를 몰라도 누구나 쉽게 배울 수 있다. 보통 어떤 일에 입문하게 되는 것은 계속 공부하는 것보다 어려운데 계속 공부할 목표가 뚜렷하고 배움의 단계가 나와 맞아야 입문할 수 있다. 하지만 입문할 사람들은 모르는 것 투성이다. 내 실력도 모르고, 어떤 단계가 나와 맞는지도 모르고, 이 책이 어느정도의 입문을 뜻하는지도 모른다. 그런데 이 책은 '자바스크립트 한 번 배워볼까?'하는 사람에게 초점이 맞춰져 있는지 매우 쉽게 설명해서 입문자의..

티스토리툴바