💻 Programming/Javascript (25)

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #5 - IF, IF-ELSE, IF-ELSE IF-ELSE 문

오늘은 자바스크립트의 if문에 대해서 알아보도록 하겠습니다.

다른 프로그래밍 언어와 마찬가지로 자바도 if문, if-else문, 그리고 if-else if-..-..-else문을 지원합니다.

하나씩 차례대로 배워보죠.

if 문

if문의 문법은 아래와 같습니다.

if (조건){
   조건이 참일때 실행되어야 할 문장
}

조건의 결과가 참인 경우에만 안쪽에 있는 문장을 실행시킵니다.

예제를 한번 보실까요??

<script type="text/javascript">
<!--
var age = 20;
if( age > 18 ){
   document.write("<b>Qualifies for driving</b>");
}
//-->
</script>

위 코드는 아래와 같은 결과를 보여주겠죠??

Qualifies for driving

다음은 if-else문을 한번 보겠습니다.

if...else 문

if문에서 else만 추가된 거죠. 문법은 아래와 같습니다.

if (조건){
   조건이 참이면 실행될 문장
}else{
   조건이 거짓이면 실행될 문장
}

조건이 참이면 if내의 문장을 실행하고 거짓이면 else내의 문장을 실행합니다.

예제를 보도록 하겠습니다.

<script type="text/javascript">
<!--
var age = 15;
if( age > 18 ){
   document.write("<b>Qualifies for driving</b>");
}else{
   document.write("<b>Does not qualify for driving</b>");
}
//-->
</script>

아래처럼 결과가 나오는게 맞나요?? 맞습니다~

Does not qualify for driving

if...else if... 문

이것도 어렵지 않습니다. 그저 else를 여러개 붙여 놓은 거라고 보시면 됩니다. 문법부터 한번 보시죠.

if (조건 1){
   조건 1이 참이면 실행되야 할 문장 - A
}else if (조건 2){
   조건 1이 거짓이고 2가 참이면 실행되야 할 문장 - B
}else if (조건 3){
   조건 1, 2가 모두 거짓이고 3이 참이면 실행되야 할 문장 - C
}else{
   조건 1, 2, 3이 모두 거짓이면 실행되야 할 문장 - D
}

위 문법을 말로 풀어쓰면 이렇게 되는겁니다.

만약 조건1이 참이면 A를 진행하고 B, C, D는 실행하지 마세요.

만약 조건1이 거짓이고 조건2가 참이면 B만 실행하세요.

만약 조건 1과 2가 모두 거짓이고 조건3이 참이라면 C만 실행하세요.

만약 조건1, 2, 3 모두가 거짓이면 D를 실행하면 됩니다.

예제를 한번 보시죠.

<script type="text/javascript">
<!--
var book = "maths";
if( book == "history" ){
   document.write("<b>History Book</b>");
}else if( book == "maths" ){
   document.write("<b>Maths Book</b>");
}else if( book == "economics" ){
   document.write("<b>Economics Book</b>");
}else{
  document.write("<b>Unknown Book</b>");
}
//-->
</script>

결과가 아래처럼 나오는게 맞는건지 여러분이 판단해 보세요.

Maths Book

Reference : http://www.tutorialspoint.com/javascript/javascript_ifelse.htm

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #7 - while loop ( while 루프 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #6 - Switch - Case 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #4 - DataType ( 데이타 타입, 변수 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #3 - 스크립트 코드의 위치 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #2 - 자바스크립트 미지원 브라우저에 경고하기 (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #4 - DataType ( 데이타 타입, 변수 )

JavaScript 데이타 타입

JavaScript에는 세가지 primitive 데이타 타입이 존재합니다. 숫자, 스트링, 그리고 참, 거짓을 나타내는 boolean이 바로 그 데이타 타입입니다. 자바스크립트에는 또한 null 과 undefined 라는 데이타 타입이 있습니다. 좀 특수한 녀석들이죠.

그리고 마지막으로, 자바스크립트도 자바와 마찬가지로 객체타입을 지원합니다.

JavaScript에서 숫자는 소수점 형태의 값으로 표현됩니다. IEEE 754 표준에 정의된 64-bit 소수점 형태로 말이죠.

JavaScript 변수

자바스크립트에서 변수를 선언할 때는 var키워드를 사용합니다.

<script type="text/javascript">
<!--
var money;
var name;
//-->
</script>

여러개의 변수를 선언할 때 꼭 var를 앞에 붙여야 하나요? 아닙니다. 아래처럼 한줄에 var키워드를 한번만 써서 변수 두개를 선언할 수도 있습니다.

<script type="text/javascript">
<!--
var money, name;
//-->
</script>

이렇게 선언된 변수에 값을 넣는것을 변수 초기화라고 합니다. 변수 초기화는 변수를 선언할 때 할 수도 있지만 나중에 할 수도 있습니다.아래 예제를 한번 볼까요?

<script type="text/javascript">
<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>

위 예제에서 name이라는 변수는 변수 선언과 동시에 초기화를 해주었습니다. 그런데 money변수는 선언을 하고 난 뒤에 나중에 변수를 초기화했죠.

여타의 프로그래밍 언어와는 다르게 자바스크립트는 변수의 타입을 지정해주지 않습니다. 변수에 들어갈 값이 스트링인지 숫자인지 관계가 없다는 말이죠. 이건 자바스크립트가 알아서 자동으로 케어해주니 신경쓰지 않으셔도 됩니다.

JavaScript 변수의 범위

변수에는 크게 전역 변수와 로컬 변수가 있습니다. 전역 변수는 global 변수로 어디서나 접근이 가능한 변수이고 로컬변수는 그 변수가 정의된 함수 내에서만 사용될 수 있는 변수를 말합니다.

동일한 이름의 변수를 선언하게 된다면 로컬에서는 전역변수보다 로컬변수가 우선순위가 높기 때문에 로컬변수를 사용하게 됩니다.

아래 예제를 한번 보시죠.

<script type="text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
   var myVar = "local";  // Declare a local variable
   document.write(myVar);
}
//-->
</script>

myVar라는 이름을 갖는 변수가 두 번 선언되었습니다. 하나는 전역변수이고 하나는 로컬 변수죠.

위 스크립트의 실행 결과가 어떻게 나와야 맞는 걸까요??

추측해보시고 결과는 스크립트를 실행시켜서 확인해보세요 ^__^

JavaScript 변수명 규칙

자바스크립트에서 변수이름을 정할때는 아래와 같은 규칙을 지키셔야 합니다.

JavaScript 예약어 사용 금지
숫자로 시작할 수 없다. 문자나 밑줄로 시작해야 한다.
대소문자를 구분한다.

JavaScript 예약어 목록

abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double

else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in

instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super

switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with

Reference : http://www.tutorialspoint.com/javascript/javascript_variables.htm

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #6 - Switch - Case 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #5 - IF, IF-ELSE, IF-ELSE IF-ELSE 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #3 - 스크립트 코드의 위치 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #2 - 자바스크립트 미지원 브라우저에 경고하기 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #1 - Syntax ( 기본 문법 ) (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #3 - 스크립트 코드의 위치

안녕하세요~~ 케이치입니다~

오늘은 자바스크립트를 삽입하는 방법

자바스크립트 코드는 헤드, 바디 태그 안에 들어갈 수도 있고 두 태그 모두에 들어갈 수도 있고, 외부파일로 정의해서 include할 수도 있습니다. 각각 어떻게 하는지 한번 알아보죠.

<head> 태그 내의 JavaScript

사용자가 발생시키는 특정 이벤트에 대해서 자바스크립트가 동작을 해야한다면 헤드태그 안쪽에 코드를 삽입합니다.

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

<body> 태그 내의 JavaScript

웹페이지가 로드될 때 자바스크립트 코드에 의해서 어떤 내용물이 화면에 출력되어야 한다면 바디 태그 안에 스크립트를 넣어주세요. 이 경우에는 자바스크립트 코드로 정의된 함수는 가질 수 없습니다.

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

결과는 아래처럼 보이겠죠?

Hello World
This is web page body

<body> 와 <head>에 동시에 쓰이는 JavaScript

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

외부 파일로 정의된 JavaScript

JavaScript를 좀더 확장해서 쓰려면 외부파일로 정의해서 쓰는 방법이 있습니다. 기능별로 파일을 분리해서 정리하면 관리하기가 편해지겠죠. 이건 뭐 어떻게 관리하느냐에 따라 달렸지만요 ㅋ 여러 페이지에서 동일한 스크립트를 사용해야 한다면 분리해서 사용하시는 것이 편리할겁니다.

자바스크립트 코드를 외부파일로 저장하려면 .js확장자를 사용합니다. 그리고 이 파일을 include하는 방법은 src속성을 이용해서 파일경로를 지정해주면 됩니다.

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

filename.js

function sayHello() {
   alert("Hello World")
}

한번씩 다 해보시고 안된다 하시는게 있으시면 댓글로 질문 남겨주세요~ ^-^

이상 케이치였습니다~

즐프하세요~~ ^-^

Reference : http://www.tutorialspoint.com/javascript/javascript_placement.htm

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #6 - Switch - Case 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #5 - IF, IF-ELSE, IF-ELSE IF-ELSE 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #4 - DataType ( 데이타 타입, 변수 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #2 - 자바스크립트 미지원 브라우저에 경고하기 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #1 - Syntax ( 기본 문법 ) (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #2 - 자바스크립트 미지원 브라우저에 경고하기

안녕하세요 케이치입니다.

오늘은 혹시나 있을지 모르는 자바스크립트 미지원 브라우저에 메시지를 띄워주는 것을 할겁니다.

자바스크립트 미지원 브라우저에 경고메시지 보내기

아래처럼 간단하게 <noscript> 태그를 사용하면 됩니다.

<html>
<body>

<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>

<noscript>
  Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>

자바스크립트를 미지원하는 브라우저나 설정에서 막아놓은 경우에는 <noscript> 태그 내에 있는 메시지가 출력됩니다.

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #6 - Switch - Case 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #5 - IF, IF-ELSE, IF-ELSE IF-ELSE 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #4 - DataType ( 데이타 타입, 변수 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #3 - 스크립트 코드의 위치 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #1 - Syntax ( 기본 문법 ) (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #1 - Syntax ( 기본 문법 )

안녕하세요 케이치입니다.

자바스크립트를 공부해볼까요?

자바스크립트는 기본적으로 <script>... </script> 태그를 사용합니다.

자바스크립트 태그는 웹페이지 어디에다가 넣어도 큰 상관은 없지만 일반적으로는 <head> 태그내에서 사용됩니다.

<script ...>
  JavaScript code
</script>

script 태그는 두가지 중요한 속성을 가집니다.

language: 스크립팅 언어가 뭔지를 지정해주는거죠. 우리는 자바스크립트를 배우니까 javascript 라고하면 됩니다. 최신 버전의 HTML이나 XHTML에서는 사용하지 않게될거라고 하네요. 저도 이제 막 자스 공부를 시작해서 확실치는 않습니다 ㅋㅋ
type: 타입은 "text/javascript" 이 되어야 합니다.

그래서 아래처럼 기본틀이 잡혀있어야 하는 거죠.

<script language="javascript" type="text/javascript">
  JavaScript code
</script>

나의 첫 자바스크립트

모든 프로그래밍 언어에서 "Hello World"는 기본이죠. 자스(자바스크립트를 줄임)를 이용해서 "안녕 세상아"를 출력해보도록 하겠습니다.

<html>
<body>
<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>
</body>
</html>

자 위 소스를 보시면 자스코드를 넣어야 할 부분에 주석처리하는 태그를 추가로 넣었습니다. 이건 왜 넣었냐 하면말이죠. 브라우저가 자바스크립트를 지원하지 않을 경우에는 실행하지 말라는 의미입니다. 지원하지 않는 브라우저가 실행하려면 오류가 날테니 말이죠. "//-->"에서 "//" 는 Javascript에서 쓰는 주석문법입니다.

document.write 가 하는 역할은 HTML문서에 스트링을 쓰는 것입니다. 이 함수는 text나 HTML또는 둘 다를 쓰기위해서 사용될 수 있습니다. 어쨌든 결과는 아래처럼 나와야겠죠?

Hello World!

이제 자바스크립트의 특징을 알아보도록 하겠습니다.

빈칸, 탭, 그리고 라인 브레이커는 무시합니다.

JavaScript 는 코드내에 존재하는 스페이스나 탭, 그리고 new lines 를 무시합니다.

따라서 원하는 대로 깔끔하게 코드를 정리할 수가 있겠죠??

세미콜론은 옵션입니다.

일반적으로 라인의 끝을 알려주는게 세미콜론이죠. C, Java 등등에서 모두 그렇게 쓰입니다. 하지만 자스에서는 아래처럼 써도 상관없습니다.

<script language="javascript" type="text/javascript">
<!--
  var1 = 10
  var2 = 20
//-->
</script>

하지만 세미콜론을 쓰지 않는 경우에는 한줄에 하나의 statement만 올 수 있습니다. 따라서 두 가지 일을 하는 statement를 한줄에 쓰려면 세미콜론은 필수입니다. 뭐 그냥 세미콜론을 쓰는게 낫겠죠?

<script language="javascript" type="text/javascript">
<!--
  var1 = 10; var2 = 20;
//-->
</script>

대소문자를 구분합니다.

자바의 주석처리방식도 지원합니다.

JavaScript 는 C-style 과 C++-style 의 주석처리방식을 지원합니다.

<script language="javascript" type="text/javascript">
<!--

// This is a comment. It is similar to comments in C++

/*
 * This is a multiline comment in JavaScript
 * It is very similar to comments in C Programming
 */
//-->
</script>

자, 지금까지 자바스크립트의 기본적인 문법 및 특징에 대해서 알아보았습니다.

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #6 - Switch - Case 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #5 - IF, IF-ELSE, IF-ELSE IF-ELSE 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #4 - DataType ( 데이타 타입, 변수 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #3 - 스크립트 코드의 위치 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #2 - 자바스크립트 미지원 브라우저에 경고하기 (0)	2015.08.05

[ 1 ] [ 2 ]

💻 Programming/Javascript (25)

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #5 - IF, IF-ELSE, IF-ELSE IF-ELSE 문

if 문

if...else 문

if...else if... 문

'💻 Programming > Javascript' 카테고리의 다른 글

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #4 - DataType ( 데이타 타입, 변수 )

JavaScript 데이타 타입

JavaScript 변수

JavaScript 변수의 범위

JavaScript 변수명 규칙

JavaScript 예약어 목록

'💻 Programming > Javascript' 카테고리의 다른 글

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #3 - 스크립트 코드의 위치

<head> 태그 내의 JavaScript

<body> 태그 내의 JavaScript

<body> 와 <head>에 동시에 쓰이는 JavaScript

외부 파일로 정의된 JavaScript

'💻 Programming > Javascript' 카테고리의 다른 글

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #2 - 자바스크립트 미지원 브라우저에 경고하기

'💻 Programming > Javascript' 카테고리의 다른 글

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #1 - Syntax ( 기본 문법 )

나의 첫 자바스크립트

빈칸, 탭, 그리고 라인 브레이커는 무시합니다.

세미콜론은 옵션입니다.

대소문자를 구분합니다.

자바의 주석처리방식도 지원합니다.

'💻 Programming > Javascript' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바