Front-end/JavaScript (12) 썸네일형 리스트형 [JavaScript] document.getElementById('').style.display와 document.getElementsByClassName('').style.display의 차이 button의 onclick 속성을 이용해서 버튼을 누르면 알림창이 닫히고 나오는 연습을 하고 있었다. 먼저 html 코드는 알림창임 닫기 버튼 css 코드는 .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; } JavaScritp 코드는 함수를 이용해서 function display(css) { document.getElementById('alert').style.display = css; } 이런식으로 짜봤더니 잘 실행 되었다. 이번엔 id값을 따로 주지 않고 class값만 주어서 코드를 짜봤다. html 코드는 ID를 입력하세요 버튼1 PASSWORD를 입력하세요 .. [JavaScript] 자바스크립트 Document 1. Document속성 브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조한다. 즉 window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다. window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다. 이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다. 자바스크립트에서 'window.'은 생략할 수 있다. document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공한다. 즉, 다양한 API(Application Programming Interface)를 제공한다. 2. 요소를 선택하기 위해 사용할 수 있.. [JavaScript] 자바스크립트 DOM이란? DOM은 'The Document Object Model'의 약자이며, 이것을 번역하면 '문서 객체 모델이다. 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서에 접근하기 위한 일종의 프로그래밍 *인터페이스(interface)이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. - DOM은 웹문서의 구조와 내용이 담긴 객체를 데이터로 표현하는 방식이다. 인터페이스(interface)는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면이다. 즉, 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템을 의미한다. 컴퓨팅에서는 컴퓨터 시스템끼리 정보를 교환하는 공유 경계면.. [JavaScript] 자바스크립트 for 반복문 연습 (구구단) for (let i = 2; i [JavaScript] i++와 ++i의 차이점 참고 : 자바스크립트 a++와 ++a의 차이점 (yongho-coding.com) i++는 기존의 값을 가진채로 이후에 +1을 한다. ++i는 기존의 값에서 +1을 한 값을 가진다. ex) let a = 1; let b = 1; console.log(a++); // 1 console.log(++b); // 2 document.write() console.log() 와는달리 괄호 안에 들어가 있는 것을 페이지에 "쓰는(출력하는)" 함수 연산자 제로초님의 블로그 글을 정리한 내용입니다. 참고 : (JavaScript) 연산자(operator) - ZeroCho Blog 1. 산술 연산자 1) 덧셈 ex) var a = 1 + 2; // 3 2) 뺄셈 ex) var b = 5 - 3; // 2 3) 곱셈 ex) var c = 2 * 4; // 8 4) 나눗셈 - /는 그냥 나누기) ex) var d = 6 / 4; 1.5 5) 나눗셈 (%는 그냥 나머지, Mod(Modulus)라고도 한다 ex) var e = 8%3; // 2 2. 문자열 연산자 * 특징 + 연산자는 숫자만 더하는 게 아니라 문자열과 다른 데이터도 연결해 준다. 문자열과 더할 때 문자열이 아닌 데이터는 문자열로 바꿔서 연결한다. 즉, 문자열이 먼저다. ex1) var string.. 자바스크립트에서의 데이터의 종류 변수(variable). variable의 앞 3글자를 따서 var. 자바스크립트에서 데이터를 처리하기 위해서는 데이터를 저장하는 공간이 있어야 한다. 이 공간을 변수라고 부른다. var a = ' '; // 문자열 (' ' 대신 " "을 쓸 수도 있다.) - 그냥 var a = ' '; or var a = " " 만 쓰면 띄어쓰기 var b = 0; // 숫자 var c = false; // 불린 var d = null; // 널 var e = undefined; // 언디파인드 var f = []; // 배열 var g = {}; // 객체 var h = function() {}; // 함수 변수를 선언한다는 의미 : 변수에 이름을 붙인다. (ex: var a) 변수를 대입한다는 의미 : var a .. JavaScript 주석 표기법 1. 한 줄 주석 1) // 한 줄 메모 2) /(슬래시)*(애스터리스크) 한 줄 메모 */ 2. 여러 줄 주석 /** * 여러 줄 * 메모1 * 메모2 */ 3) 주석을 표기해줄 수 있는 단축 키 (1) windows : ctrl + / (2) MAC : command + / Zero-base Numbering 0 기반 번호 매기기 자바스크립트는 특수한 경우를 제외하고 0부터 숫자를 시작한다. 이전 1 2 다음
