처음부터 차근차근
Javascript 정리 본문
JavaScript란, 웹의 동작을 구현할 때 사용하는 언어이다.
객체 기반의 스크립트 프로그래밍 언어이며, 웹 브라우저 내에서 주로 사용한다.
Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
기본 형태
<script type="text/javascript">
// 내용
</script>
변수, 연산
<script type="text/javascript">
var n = 35; // 변수 정의
var i = n++;
var i = ++n;
document.write("i의 값 : " + i + "<br>"); // 화면에 출력
</script>
날짜 가져오기
<script type="text/javascript">
var today = new Date(); // 날짜 가져오기
</script>
if else문
<script type="text/javascript">
var n = 10;
if (n == 10 && n < 20) {
alert("n은 10입니다."); // 경고창 띄우기
}
else {
alert("n은 10이 아닙니다.");
}
</script>
switch-case문
<script type="text/javascript">
var n = 10;
switch (n) {
case 10:
alert("n은 10");
break;
case 11:
alert("n은 11");
break;
default :
alert("n은 10과 11이 아님");
}
</script>
while, do while문
<script type="text/javascript">
var n = 0;
// while
while (n < 3) {
n++;
document.writeln(n);
}
// do while
n = 0;
do {
n++;
document.writeln(n);
} while (n < 3)
</script>
함수 정의
<script type="text/javascript">
function test(num) {
if (strMsg != null) {
num + 1;
return num;
}
}
test(10);
</script>
이벤트와 이벤트 핸들러
이벤트란, 마우스나 키보드등의 사건이 일어났음을 뜻한다.
이벤트핸들러란, 각각의 이벤트에 대응하는 하는 것이다.
<이벤트와 이벤트 핸들러 종류>
이벤트 : click
이벤트 핸들러 : onClick
마우스 클릭시 실행
이벤트 : load
이벤트 핸들러 : onLoad
문서를 읽은 후 실행
이벤트 : keydown
이벤트 핸들러 : onKeyDown
키를 눌렀을 때 실행
이벤트 : focus
이벤트 핸들러 : onFocus
포커스 시에 실행
예시)
<body onLoad="javascript:SayHello();">
<script type="text/javascript">
function SayHello() {
alert('hello');
}
</script>
</body><body>
<select onchange="javascript:Sayhello();">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<script type="text/javascript">
function SayHello() {
alert('hello');
}
</script>
</body>
뷰포트(viewport)
viewport란, 웹페이지가 사용자에게 보여지는 영역이다.
각 장치의 뷰포트 적용 방식에 따라서 같은 HTML5 문서라도 실행 장치에 따라 다르게 보인다.
viewport에는 두가지 종류가 있다.
- 레이아웃 뷰포트(layout viewport) : 장치의 전체 화면 해상도에 해당하는 영역
- 비주얼 뷰포트(visual viewport) : 전체 페이지 중에서 현재 화면에 보이는 영역
모바일 환경의 viewport
사용자가 모바일로 모바일 버전 디자인이 없는 웹사이트를 들어왔다면, 스마트폰의 작은 화면에 모든 웹 페이지를 한꺼번에 표시해야한다.
이것을 풀 브라우징(full-browsing)이라고 한다.
즉, 풀브라우징이란, 작은 화면에 웹 페이지를 모두 표시하기 위해 배율 조정을 해서 전체적으로 축소하는 것을 말한다.
그래서 이런 상황의 경우 레이아웃 뷰포트와 레이아웃 뷰포트 크기가 항상 같다.
모바일 브라우저는 모바일에 최적화되지 않은 페이지도 모두 보일수 있도록 기본 뷰포트(비주얼 뷰포트)를 크게 설정한다.
하지만 풀 브라우징을 하면 단점이 생기는데, 실제보다 훨씬 큰 크기의 뷰포트를 설정하고 이를 기준으로 글자 크기를 표시하므로 글자 크기가 엄청 작아져서 사용자가 보기 힘들어진다.
이 문제점의 해결 방법으로 <meta>태그를 이용하여 뷰포트 정보를 제공하는 방법이 있다.
header안의 meta 태그 안에 viewport의 정보를 써주면 실제 모바일 장치의 해상도에 맞게 렌더링되어 글자와 UI가 커져서 사용자가 훨씬 보기 편해진다.
meta tag 예시)
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
미디어 유형(media type)
미디어란 사용자가 웹페이지를 보는 장치를 뜻한다.
예를 들어서 스마트폰, PC등이 있다.
미디어 종류에 따라 각기 다른 스타일시트를 적용할 수 있다.
미디어의 종류
- all : 모든 장치
- screen : 컴퓨터 ex) pc, 테블릿, 스마트폰
- print : 인쇄장치 즉, 출력 종이
- handheld : 휴대용 기기, PDA
- tv : 텔레비전
- projection : 프로젝터
예제)
<link rel="stylesheet" media="screen" href="CssCode.css" />
미디어 쿼리(media query)
미디어 유형의 확장된 형태로
복잡한 자바스크립트 코드를 작성하지 않아도 사용 장치 식별이 가능하다.
예시)
@media screen and (max-width: 768px)
{
body {
background-color: lightgreen;
}
}
출처 : 모바일웹구축실무(21-2학기)김용남교수 강의 내용 변형 및 요약
'프로그래밍 > Javascript' 카테고리의 다른 글
| jquery : Event.stopImmediatePropagation() (0) | 2022.02.06 |
|---|---|
| jquery click 이벤트 동적 페이지에 적용하는 법 (0) | 2022.02.05 |
| 별점 구현 (0) | 2022.02.04 |
| Full Calendar (php 사용) (1) | 2021.12.01 |
| jquery datepicker (0) | 2021.11.23 |
