[인프런] 자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1 실습

이름 입력받기 예제

• !를 작성하고 tab 키를 누르면 자동적으로 html 뼈대가 만들어진다.
• em 단위는 대분자 M을 기준으로 하는 폰트 사이즈를 의미한다. 
• 1em은 16 픽셀이다.
• script는 위에서 아래로 실행되기 때문에 내부 스크립트를 할 경우 script 태그는 맨 아래 작성하는 것이 바람직하다.
• var name은 변수를 의미한다.
• f5를 누르고 새로고침을 하면 화면 단이 바뀐다.

html

result

result

나이 계산 프로그램 - 변수

• calc() 등에서 ()가 나오면 calc는 함수라고 생각한다. ()에는 매개변수, 파라메터, 인자값, arguments가 들어간다. 이 값들이 없을 수도 있다.(빈칸일 수도 있다.)
• querySelector("#result").innerHTML은 #result라는 id 선택자에 넣으라는 의미.
• age 폴더에 대해서 css 폴더, js 폴더, age.html 파일을 만든다 -> css 폴더 아래 age.css 파일을 만든다 (path 연결)
• js 폴더 아래 age.js 파일을 만든다 (path 연결)
• css에서 padding(내부 여백), margin(외부 여백)
• Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element 반환. 일치하는 요소가 없으면 null 반환.
• f12 키를 눌러서 개발자 도구를 켜고 디버깅을 할 수 있다.

 

html

css

html(script 태그 분리)

javascript

css

 

 

result

result

글자색 바꾸기, 시간 표시 예제

• object 타입은 null 값(object에서는 주소 값, 주소 값은 null 값)을 가진다.

html(script 태그 분리)

연산자 입력받기 예제

• 문자열 타입과 정수형 타입 모두 복합 대입 연산자를 통해 값을 누적시키고 출력할 수 있다.

타입 변환 예제

• input의 데이터 타입을 Number로 지정하고 나서 숫자가 아닌 문자를 입력하게 되면 Nan(Not a Number)이 출력된다.

할인 가격 프로그램

• resource 폴더에 sale.png라는 이미지를 따로 저장한다.

html

js

css

결과

switch문으로 여러 조건 값 확인하기 예제

• prompt("~","1"); // "1"의 의미는 입력 창의 기본 값이 빈칸이 아닌 1임을 나타낸다.
• switch 문을 사용할 때는 break 사용에 유의해야 한다.

구구단

• for문 사용