10강. 하이퍼링크 만들기
웹 사이트는 많은 웹 페이지들로 연결되어 있다.특정 이미지나 텍스트를 클릭하면 새로운 페이지가 열리는 동작을 하이퍼링크 라고 말한다.HTML a태그 가 바로 이 하이퍼링크 기능르 수행한다.
soo0100.tistory.com
HTML과 CSS로 만들어진 웹 사이트는
일반적으로 정보를 기술하고 보여주는 역할만 할 수 있다.
사용자가 특정액션을 취했을때 동작을 하거나 상호 반응을 보이기 위해서는 자바스크립트라는 프로그래밍 언어를 사용해야 한다. 대표적인 것이 게임이다.
자바스크립트를 사용하면 웹 게임 역시 개발이 가능하다.
웹 문서에서 자바스크립트를 사용하기 위해서는
<script> 열림태그 와 </script> 닫힘 태그 사이에 자바스크립트를 코딩해야 한다.
즉, 브라우저에게 script 태그 사이의 콘텐츠 가 "자바스크립트 코드 야" 라고 알려주는 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 기본</title>
</head>
<body>
<script>
var sum;
var value1 = 10;
var value2 = 20;
sum = value1 + value2;
alert(sum);
</script>
</body>
</html>
자바스크립트를 사용하기 위해서는
첫째, script 태그를 사용한다. 위치는 head 나 body에 둘 다 사용 가능하다.
둘째, 변수의 사용
값을 저장하고 그 값을 불러오기 위해서 특정한 공간과 그 공간을 기술할 수 있는 이름이 필요하다.
바로 변수 라고 한다.
변수를 만들기 위해서는 var이라는 키워드를 사용한다.
( * 키워드 : 자바스크립트에서 이미 지정한 고유 이름. 변수 이름으로는 사용 불가)
위 예제에서 sum, value1, value2 이렇게 3개의 변수를 만들었다.
var sum;
자바스크립트 코드의 마지막에는 항상 ;(세미콜론)을 붙인다.
자바스크립트의 규칙(문법)이다. 세미콜론으로 끝나는 한 줄 한줄이 명령어가 된다.
이런 한줄 한줄 을 구문(statement)이라고 표현한다. 구문이 모인 것을 '블록'이라고 말한다.
var value1 = 10;
위 코드는 value1이라는 변수를 만들고 10을 그곳에 저장하라는 뜻이다.
= 기호는 할당연산자(assignment)로 왼쪽의 값을 오른쪽에 할당(입력) 한다는 의미이다.
sum= value1+value2;
결론적으로 sum의 값은 30이 저장된다.
마지막으로 alert(sum);
이라는 구문이 나온다. alert(); 는 자바스크립트에서 지원하는 함수이다.
사용자가 만드는 것이 아닌 이미 지원해 주는 함수를 빌트인 함수라고 한다.
( * 함수 수학용어와 똑같이 어떤 기능을 수행하는 하나의 코드블록이다)
alert() 함수는 팝업창을 보여주는 역할을 한다.
여기서는 () 괄호 안에 sum 값을 화면에 보여준다. 괄호 안의 sum값을 '인수(argument)' 라고 부른다.
변수를 사용해서 계산을 하고
그 결과 값을 팝업창으로 화면에 보여주는 코드를 만들었다.
변수는 숫자(정수,실수) 뿐만 아니라 문자, 불변 값(true,false) 도 담을 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 변수</title>
</head>
<body>
<script>
var text ="Nice to meet you";
alert(text);
</script>
</body>
</html>
위 코드에서는 var text 라는 변수에 Nice to meet you 라는 문자열을 할당했다.
문자열을 "" 혹은 '' 로 감싸서 사용할 수 있다.
12강. 자바스크립트 if 조건문 사용방법
11강. 자바스크립트 블럭 과 변수 사용법HTML과 CSS로 만들어진 웹 사이트는일반적으로 정보를 기술하고 보여주는 역할만 할 수 있다. 사용자가 특정액션을 취했을때 동작을 하거나 상호 반응을
soo0100.tistory.com
'앱 만들기 > JavaScript study' 카테고리의 다른 글
| 13강. 자바스크립트 함수 사용법 (1) | 2024.07.08 |
|---|---|
| 12강. 자바스크립트 if 조건문 사용방법 (0) | 2024.07.06 |
| 자바스크립트 String 데이터 형 (2) | 2023.08.17 |
| 자바스크립트 변수에 대해서 (1) | 2023.08.16 |
| 자바스크립트 이벤트 (0) | 2023.08.15 |
댓글