[웹 스터디 3주차] JavaScript

Об этом предложении

1. 웹브라우저와 자바스크립트 웹 문서 안에 <script> 태그로 자바스크립트 작성 자바스크립트 코드가 짧으면 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드를 작성한다. 다음은 텍스트를 클릭했을 때 글자색을 바꾸는 예제이다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>글자색 바꾸기</title> <style> body { text-align:center; } h1 { color:blue; } </style> </head> <body> <h1 id="heading">자바스크립트</h1> <p id="text">위 텍스트를 클릭해 보세요</p> <script> let heading = document.querySelector('#heading'); heading.onclick = function() { heading.style.color = "red"; } </script> </body> </html> 외부 스크립트 파일로 연결해서 자바스크립트 작성 자바스크립트 코드를 따로 파일로 저장한 후 웹 문서에 연결해서 사용할 수 있다. <script> 태그를 사용하지 않고 확장자는 *.js로 저장한다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>글자색 바꾸기</title> <style> body { text-align:center; } h1 { color:blue; } </style> </head> <body> <h1 id="heading">자바스크립트</h1> <p id="text">위 텍스트를 클릭해 보세요</p> <script src="change-color.js"></script> </body> </html> 2.자바스크립트 용어와 기본 입출력 식과 문 식: 표현식, 연산식, 실제 값, 함수 실행 등 문: 명령, 조건문, 제어문, 끝에 세미콜론(;)을 붙인다. 기본 입출력 1) 알림 창 출력: alert("메세지") 2) 확인 창 출력: confirm("메세지") 3) 프롬프트 창에서 입력받기: prompt("메세지") 4) 웹 브라우저 화면 출력 document.write()문: document.write("메세지") 5) 콘솔 창 출력 console.log()문: console.log("메세지") 3. 변수 변수란? 프로그램에서 자료를 담아두는 공간 변수 선언하기: let 변수명 상수 선언하기: const 상수명 상수는 한번 값을 할당하면 프로그램 안에서 값이 변경되지 않는다. 변수 선언 규칙 1) 변수 이름은 영어,숫자, _만 사용한다. 2) 영어 대소 문자가 구별된다. 3) 예약어는 변수로 사용할 수 없다. (ex. var) 4) 여러 단어로 연결된 변수는 중간에 대문자를 섞어 쓴다. (ex. total area→TotalArea) 5) 변수 이름은 의미 있게 작성한다. 4. 자료형 자료형이란? 숫자, 문자 등 컴퓨터가 처리할 수 있도록 자료형을 알려준다. 1) 숫자형: 정수와 실수로 나누어 구분한다. typeof 숫자 2) 문자열: 작은따옴표(')나 큰따옴표(")로 묶은 데이터 3) 논리형: 참이나 거짓의 값을 표현하는 자료형 4) undefined 유형과 null 유형 undefined: 자료형이 정의되지 않았을 때 데이터 상태 null: 데이터 값이 유효하지 않은 상태 5) 배열: 하나의 변수에 값을 여러 개 저장 배열명["값1", "값2", ...] 인덱스: 배열의 각 요소에 자신만의 방 번호가 할당되는데, 방 번호가 인덱스이다. 0, 1, 2, 3, ... 5. 연산자 산술 연산자: 수학 계산을 할 때 사용, 피연산자는 숫자나 변수가 온다. ex) +(더하기), -(빼기), *(곱하기), /(몫), %(나머지), ++(+1), --(-1) 할당 연산자: 연산자 오른쪽의 실행 결과를 왼쪽 변수에 할당 6. 조건문 if 문: if문 괄호 안의 조건이 True면 명령 실행, False면 아무것도 하지 않는다. if else 문: if 조건이 True가 아닐 때 실행할 명령을 else 문 다음에 추가 다음은 if else 문을 사용하여 사용자가 입력한 변수가 3의 배수인지 확인한다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>조건문</title> </head> <body> <script> let userNumber=parseInt(prompt('숫자를 입력하세요.')); if (userNumber%3==0) alert('3의 배수입니다.'); else alert('3의 배수가 아닙니다.'); </script> </body> </html> swich 문: 처리할 명령이 많을 때 사용, 조건을 체크한 후 case 문을 사용하여 명령을 처리한다. <script> var session = prompt("관심 세션을 선택하세요. 1-마케팅, 2-개발, 3-디자인"); switch (session) { case "1": document.write("마케팅 세션을 선택하셨습니다."); break; case "2": document.write("개발 세션을 선택하셨습니다."); break; case "3": document.write("디자인 세션을 선택하셨습니다."); break; default: document.write("잘못된 선택입니다."); } </script>