웹 기초 10강 - JavaScript

이미지 절대주소
/프로젝트명/폴더명/파일.png

웹사이트 만들기 - 10/15 수업시간 전까지

자바스크립트의 용도
이벤트에 반응하는 동작을 구현할 수 있다.
AJAX를 통하여 전체 페이지를 다시 로드하지 않고서도 서버로부터 새로운 페이지 콘텐츠를 받거나 데이터를 제출할 때, 사용한다.
HTML 요소들의 크기나 색상을 동적으로 변경할 수 있다.
게임이나 애니메이션과 같은 상호 대화적인 콘텐츠를 구현할 수 있다.
사용자가 입력한 값들을 검증하는 작업도 자바스크립트를 이용한다.

자바스크립트의 미래
자바스크립트는 본래 클라이언트 웹페이지를 위한 프로그래밍 언어였지만 그 용도는 점점 더 확장되고 있다.
Node.js : 웹서버와 같은 애플리케이션을 작성하기 위해 설계된 서버-사이드(Server-Side) 소프트웨어 시스템

jQuery : 자바스크립트 라이브러리

JSON : 자바스크립트의 객체 표기법(Javascript Object Notation)은 개발 언어 독립적인 데이터 형식으로서 데이터 전송용 XML을 대체하고 있다.
심지어 문서 데이터베이스의 표준 저장 형식으로도 사용된다.

확인버튼 클릭하면 div에 결과를 출력한다
자바스크립트 함수
출력
innerHTML : 출력하고자 하는 내용 속에 HTML 태그가 포함되어 있는 문장
textContent : 출력하고자 하는 내용 속에 HTML 태그없이 문자만 있는 문장
value - input요소일 때 사용

문장
자바스크립트 문장(statement)들은 웹 브라우저에게 내리는 명령

주석문
// - 단일문장 주석
/* */ - 다중 문장 주석

변수
변수(variable)는 데이터를 저장하는 상자
Var, let, const 키워드를 사용하여서 선언(declare)한다.
const - 변하지 않는 값을 저장
let x, const PI = 3.141592

function aa(){
var a = 20

for(int i = 0; i<10;i++){
}

a+=10;
}

prompt() 함수

function calc(){
//입력
x = parseInt(prompt("입력하세요", "정수로"));
y = parseInt(prompt("두번째 정수를 입력하세요"));
//계산

 //출력
 

}

출력할 때
변수명.밑에 3개중에 하나 = 출력할 내용
innerHTML : 출력하고자 하는 내용 속에 HTML 태그가 포함되어 있는 문장
textContent : 출력하고자 하는 내용 속에 HTML 태그없이 문자만 있는 문장
value - input요소일 때 사용

function calc(){
//id가 x, y인 input 요소에 접근, 검색
xvalue = parseInt(document.getElementById('x').value); - getElement는 그냥 'x'
yvalue = parseInt(document.querySelector('#y').value); - querySelector는 '#y'

}