본문 바로가기

디지털노마드/Javascript 강좌

(6)
웹 문서에 글과 숫자 출력하기 - String, Variable, boolean 1. 웹문서에 글자 출력하기 innerHTML 에 이벤트로 아래와 같이 자바스크립트 문서를 만들고 저장합니다. 그리고 HTML 문서에서 하이퍼 링크 또는 버튼에 id를 넣고 호출해 줍니다. 이때 id로 부터 값을 가져온다는 의미의 document.getElementById 를 적어줍니다. 아래와 같이 HTML 문서에 적어줍니다. 버튼을 누르면 문서에 글자가 나타납니다. 이곳이 바뀝니다. Click Me! 다음과 같이 자바스크립트안에 HTML 태그를 넣어 출력되는 글자의 스타일을 지정해 줄 수도 있습니다. 이곳이 바뀝니다. Click Me!2. 변수를 활용한 텍스트 출력하기 - Variable자바 스크립트 변수는 "var", "let"또는 "const"변수를 사용하여 설정할 수 있습니다. var, let ..
알림창 띄우기- alert window, prompt, confirm 1. HTML 태그안에 바로 넣기 아래와 같이 HTML 태그안에 바로 넣으면 간단하게 경고창을 띄울 수 있습니다. Click Me 2. HTML 태그안에 자바스크립트를 적어넣기 아래와 같이 HTML 태그안에 자바스크립트를 적어 알림창을 띄웁니다. 자바스크립트의 길이가 적은 경우에 사용됩니다. 사이에 적거나 HTML 문서의 맨 아래쪽에 적습니다. const btn = document.getElementById('btn-say-hello'); btn.addEventListener('click', function(){ alert('Hello from JavaScript!'); }); 3. HTML 태그안에 외부 자바스크립트 파일 링크 걸기 아래와 같이 HTML 태그안에 링크를 걸어 알림창을 띄웁니다. 자바스크..
JavaScript 변수(Variables)를 알아보자! 변수(Variables) 란 무엇입니까? • 컴퓨터 프로그래밍의 변수는 정보 (데이터)를 컴퓨터 프로그램에서 참조 (검색) 및 조작할 수 있도록 만들어 줍니다. • 개발자는 설명 변수 이름을 데이터의 레이블(이름표)로 사용하여 더 쉽게 데이터 검색 및 어떤 종류의 데이터인지 이해하는 데 도움 을 줍니다. 변수의 범위 • JavaScript의 변수는 함수 범위 (var) 또는 블록 범위 일 수 있습니다. (const 또는 let) • 다른 언어와 달리 부모에서 선언 된 JavaScript는 변수 하위 기능 내에서 기능 (또는 전역 공간)을 사용할 수 있습니다. 변수 종류 - const, let , var • ES6 이전에는 변수를 선언하는 유일한 올바른 방법은 “var”키워드 이었습니다. • 최근에는 두 ..
자바스크립트- JavaScript Statements와 Comments 아래와 같이 여기서 var x, y, z;은 변수의 이름을 정해주기 위해 적어줍니다.다음 각각의 변수에 값을 적어줍니다. x = 7; y = 3; z = x + y; 그리고 이것을 html의 p id="ex"로 이름을 정해준곳에 값을 출력해주는 document.getElementById("ex").innerHTML ="The value of z is " + z + "."; 를 적어주고 저장후 실행 해봅시다. 간단하게 변수를 만들고 계산 후 출력해주는 화면이 보입니다. 이것을 활용해 계산기 화면을 만들 수 있습니다. 세미콜론(The Semi-Colon) 다른 언어들과 달리 ";" "statement"라고하는 JavaScript 코드 행 끝에있는 문자는 일반적으로 선택 사항입니다. JavaScript 문장의..
경고창(alert window) 와 시간 출력(Date)을 하는 방법 자바 스크립트를 출력하는 다양한 방법 자바 스크립트는 다른 방식으로 데이터를 "표시"할 수 있습니다 : innerHTML을 사용하여 HTML 요소에 쓰기 document.write ()를 사용하여 HTML 출력에 쓰기 window.alert ()를 사용하여 경고 상자에 쓰기 console.log ()를 사용하여 브라우저 콘솔에 쓰기 innerHTML 사용하기 HTML 요소에 액세스하기 위해 JavaScript는 document.getElementById (id) 메소드를 사용할 수 있습니다. id 속성은 HTML 요소를 정의합니다. innerHTML 속성은 HTML 내용을 정의합니다. 경고창 띄우기 - 간단하게 버튼에 적용하기 경고창 띄우기 - 더블 클릭하기 DOCTYPE html> 경고창 열기 경고창을..
Javascript Syntax-자바스크립트 문법을 알아보자! JavaScript 구문은 Java 구문을 기반으로합니다. JavaScript는 Java 구문의 하위 세트로 볼 수 있습니다. 하지만, Java와 JavaScript는 완전히 다른 것입니다. JavaScript를 배우면 변수, 함수, 문장, 연산자, 데이터 형식, 객체 등과 같은 용어에 익숙해집니다. JavaScript는 일반적으로 서버 측 (웹 서버)과 달리 클라이언트 측 (브라우저 측)에서 실행됩니다. 이를 수행하는 것의 한 가지 이점은 성능입니다. 클라이언트 측에서는 JavaScript가 브라우저에 로드되어 호출되는 즉시 실행할 수 있습니다. 클라이언트 쪽에서 실행하지 않으면 스크립트를 실행할 때마다 페이지를 새로 고쳐야합니다. 자바스크립트는 어디에 쓸까? 용도는 뭐지? 다음 위치 중 하나에 스크립..