본문 바로가기

HTML, CSS, JavaScript/JavaScript

(5)
[ 응용 ] 간이 계산기 - Version.1 간이 계산기 Version.1See the Pen Review by Namu (@Namu-the-sans) on CodePen.간이 계산기 만들기 첫 번째 값 : 두 번째 값 : + - * / % 계산 결과 :
변수와 자료형 변수 선언 위치에 따른 구분[ JavaScript ]( .js 파일)// 변수 선언 위치에 따른 구분var num1 = 10; // 전역 변수(선언된 후 같은 문서 내 어디서든 사용 가능)num2 = 5; // 전역 변수(변수명 앞에 어떤 키워드도 없으면 전역 변수가 됨)var num1 = 20; // JS에서 var 변수는 덮어쓰기가 됨.. / Java에서는 오류 발생console.log("num1 : " + num1); // 윈도우 개발자도구 콘솔창에 num1 : 20 출력console.log("num2 : " + num2); // 윈도우 개발자도구 콘솔창에 num2 : 5 출력function test(){ var num3 = 3; // function 지역 변수 num4 = 4;..
요소 접근 방법 DOM(Document Object Model)- 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것   → 문서 내 특정 요소에 접근하는 방법을 제공DOM을 이용한 HTML 요소 접근하기 (해당 요소객체 가져오기)1) id로 접근하기 : document.getElementById("id속성값");2) name으로 접근하기 : document.get.ElementByName("name속성값");3) class로 접근하기 : document.getElementByClassName("class속성값");4) tag로 접근하기 : document.getElementByTagName("태그명");5) CSS 선택자로 접근하기    5-1) document.querySelector("CSS 선택자");  ..
데이터 입출력 ▶ 자바스크립트에서의 데이터 입/출력※ window : 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체                   브라우저 창 안에 존재하는 모든 요소들의 최상위 객체(생략 가능)  document : 웹 문서마다 하나씩 만들어지는 객체 (html 문서에 대한 정보를 가지고 있음)1. 데이터를 출력하는 구문1)  [window.]alert("알림창에 출력할 문구");2) [window.]console.log("콘솔창에 출력할 문구");3) document.write("화면상에 출력할 문구");4) 선택한요소.innerText = "요소에 출력할 문구";5) 선택한요소.innerHTML = "요소에 출력할 문구";[window.]alert("내용")- ale..
JavaScript 개요 ▶ JS 개요웹의 3요소1) html : 웹 문서의 큰 틀(뼈대)2) css : 스타일(색상, 간격, 디자인, 배치 등)3) javascript  : 웹 문서에서 이벤트가 발생했을 때 실행해야되는 동작 처리스크립트(script) 언어- 기본 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도의 언어- 별도의 소스코드를 컴파일 하지 않고, 인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어서 바로 실행   ※ 인터프리터 방식 : 코드를 한 줄씩 읽어가며 바로 실행하는 방식- 장점  : 컴파일에 소요되는 시간이 없음   / 단점 : 코드의 문법오류가 있으면 실행시점에서 알려줌. 프로그램 실행시간 느림자바스크립트(JS)란?- 웹 브라우저에서 많이 사용되는 인터프리터 방식의 객체 지..