Sanji(상디)의 애니 천국: JavaScript

레이블이 JavaScript인 게시물을 표시합니다. 모든 게시물 표시

자바스크립트 - 객체 생성 방식(리터럴 방식)

안녕하세요

이번에는 자바스크립트에서 객체를 생성하는 두번째 방법을 올려봅니다.


<script type="text/javascript">

//객체 생성 방식 2 => 객체 리터럴 방식

//객체리터럴 방식은 하나의 객체만 만들 수 있게 된다(싱글톤 방식)



function go(){



var tv={

width:150,

height:100,

color:'white',

weight:'20kg',

off:function(){

alert("전원 껐어요");

},

on:function(){

alert('전원 켰어요');

}

}

console.log("색상==>"+tv.color);

tv.on();

tv.off();

</script>



</head>

<body>

<button onclick="go();">객체2</button> // off, on 메소드 실행

</body>

</html>

자바스크립트 객체 생성 예제(객체 생성 첫번째 방법)

안녕하세요

이번 시간에는 자바스크립트에서 객체를 생성하는 예제를 주석과 함께

올려봅니다.



<script type="text/javascript">

var x="전역변수"; // 함수 밖에서 선언



var dataType=function(){

 // 기본자료형:number(정수, 실수), boolean, string, null, undefined

 var b=10;

 var a="지역변수"; // 함수 내에서 선언

 // var 키워드를 생략하면 전역변수

 c="전역변수"



 console.log("a="+a); // 크롬에서 F12 눌렀을 때 console 창에 ㅜㄹ력

 console.log("x="+x);

 console.log("b="+b);

}



var objType=function(){

 // alert("a="+a); a는 지역변수이므로 참조 못함

 // 참조유형 : 객체(Object 유형), 배열

 // 객체 생성 방법1

 var tv = new Object(); // tv 객체 유형

 console.log(typeof tv);

 // 객체는 속성(property,멤버변수)과 행동양식(function,method)을 갖는다.

 // 속성(명사형)

 tv.width=300;

 tv.height=200;

 tv.color="black";

 tv.weigth="30kg";

 // 행동양식=>함수로 구현(동사형)

 tv.off=function(){

  document.write("<h1>TV전원 off 했어요 </h1>");

 }

 tv.on=function(){

  document.write("<h1>TV전원 on 했어요 </h1>");

 }



 //console에 tv의 폭울 출력해보자

 console.log("tv.width="+tv.width);



 //tv의 on()함수와 off()함수를 각각 호출해보자

 tv.on();

 tv.off();

}

</script>

자바스크립트 - 사용자 정의 함수 예제(버튼을 누르면 기능을 수행)

안녕하세요

이번에는 자바스크립트에서 사용자 정의 함수를 정의하고

html 상에서 버튼을 눌렀을 시 동작을 수행하는 예제를

설명과 함께 올려보겠습니다.




<script type="text/javascript">

//함수선언 방법

// 자바스크립트에서 함수는 일종의 객체

//1)명시적 함수 선언

// 매개변수 있는 함수

function hi(name)

{

alert("Hi~"+name);

}

//2)익명 함수 선언(함수 이름은 없고 변수로 함수를 대입)

var hello = function(){

alert("Hello");

hi(); // 다른 함수 호출

}



function go(val)

{

return val*3; // return 반환값;<button>객체1</button>



}



/*plus()함수를 구성하되 익명함수로 구성하세요.

   매개변수 2개를 받아 2개의 매개변수 합을 반환하는 메소드를 구성

 */



var plus = function(val1, val2)

{

//document.write("<h1>"+val1+"+"+val2+"="+(val1+val2)+"</h1>");

// id가 msg인 곳에 수식을 끼워넣으세요.

var obj=document.getElementById('msg');

obj.innerHTML= "<h1>"+val1+"+"+val2+"="+(val1+val2)+"</h1>";

return val1+val2;

}



</script>

</head>

<body>

<button onclick="hi('김영희');">hi</button>

<button onclick="hello();">hello</button>

<button onclick="var a=go(5); alert(a);">반환 타입있는 함수</button>

<button onclick="alert(plus(12,13));">반환 타입있는 함수</button>

<div id="msg"></div>



</body>

</html>

자바스크립트 - if 제어문 사용 예제

안녕하세요

이번 시간에는 자바 스크립트에서 if 제어문 사용 예제에 대해서

글을 올려봅니다.

앞으로는 제가 작성한 코드 문장에 주석으로 해설하는 식으로

글을 쓰겠습니다.





<script type="text/javascript"> 





var s_id1 ="Kim12"; // 변수 s_id1에 "Kim12" 값을 저장


var s_pw1 ="123"; // s_pw1에 "123" 값을 저장





var id1=window.prompt("아이디를 입력하세요"); // 프롬프트 창에 입력한 값을 id1에 저장





if(s_id1!=id1){ // 프롬프트 창에 입력한 키보드 문자열 값이 Kim12가 아니면..


window.alert("그런 아이디는 존재하지 않아요"); // 아이디가 없다는 문장 출력


}





if(s_id1==id1) // 프롬프트 창에 입력한 키보드 문자열 값이 Kim12 이면..


{


var pw1=window.prompt("비밀번호를 입력하세요"); // 비밀번호를 입력하라는 문장 출력





if(s_pw1!=pw1){ // 프롬프트 창에 입력한 비밀번호 값이 123이 아니면..


window.alert("비밀번호가 틀렸습니다."); // 비밀번호가 틀렸다는 문장 출력


}





if(s_pw1==pw1) // 프롬프트 창에 입력한 비밀번호 값이 123 이면..


{


document.write("<h1 style='color:blue'>Kim12님 환영합니다</h1>"); 사용자를 환영하는 문장 출력


}</script>

자바스크립트 대화상자 종류 및 활용 예제

안녕하세요

이번에는 자바스크립트 대화상자 종류를 살펴보고 간단한 활용 예제를 살펴보겠습니다.

한번 보시면 사용하기 쉽습니다~!

자바스크립트에는 주로 많이 사용하는 대화상자가 보통 3개 있습니다.

1. 메시지 대화상자

2. 입력 대화상자

3. 확인 대화상자

실제로 많은 환경에서 사용되는 대화상자 들입니다.

자바스크립트에서는 <script type="text/javascript"> 소스코드 </script>

위처럼 사용하면 됩니다.

==============================

먼저 메시지 대화상자는 아주 단순합니다.

window.alert("안녕하세요?");

==============================

입력 대화상자는

window.prompt("좋아하는 음식은?", "스테이크");
만약 내가 피자를 좋아하고 싶고 이것을 화면에 출력하고 싶으면 아래처럼 사용하면 됩니다.

var str=window.prompt("좋아하는 음식은?", "스테이크");
document.write(str);

==============================

확인 대화상자는

window.confirm("정말 삭제할까요?");

확인 대화상자는 '예', '아니오'에 따라 이벤트 처리를 다르게 해야합니다.
그래서 가령 아래와 같은 식으로 코드를 작성하곤 합니다.

var yn=window.confirm("정말 삭제할까요?"); 라고 먼저 위에서 코드를 작성하고

yn이 true('예'를 눌렀을 경우)에 '삭제했어요' 라는 메시지가 출력하고

아니면 '삭제 안했어요'라는 메시지가 출력됩니다.

하지만 url에 딱히 'true' 값을 지정 안해도 true로 인식합니다.

위의 예제는 '예'를 눌렀을 때 네이버로 이동하는 예제입니다.

'location.href='도 많이 사용됩니다~!

==============================

자바스크립트 내장함수 사용(문자열을 정수형으로)

이번 포스팅에서는 자바스크립트에서 내장함수를 사용하는 예를 보여드리겠습니다.

생각보다 사용하기 쉽네요.

먼저 변수 su에는 '10' 이라는 문자열을, su2에는 5 라는 숫자열을 저장합니다.

document.write 출력문을 이용해 '+'과 '*' 라는 문자열 결합을 하면 재밌는 결과가 나옵니다.

상단 위에 '105', '50'을 봅시다.

'105'는 문자열 결합이 이루어진 su+su2의 결과입니다.

'+' 기호는 뒤의 숫자도 문자열화 시킵니다.

두번째 결과 '50'은 10과 5의 곱이 이루어진 결과입니다.

'x' 기호는 문자열을 숫자화 시킵니다.

자바스크립트 영리하네요.

이번에 알아볼것은 변수 su가 가진 "10"이라는 문자열을 가진 정수화 시키는 것입니다.

parseInt() 함수를 이용한다면 가능합니다.

세 번째 출력값을 보시면 15가 나오는데 이것은 10과 5의 합입니다.

이번에는 "안녕" 이라는 문자열을 정수화 시키는데 이것은 가능할까요?

출력해보면 'NaN(Not a Number)'이 나옵니다. num2가 가진 값은 숫자가 아니기 때문이죠

이번에는 eval() 함수를 이용하여 변수 str이 가진 "3+9"라는 문자열을 덧셈 연산 하여

'12'라는 결과값을 출력해보겠습니다.

첫번째 출력문은 '3 + 9'라는 문장이 그대로 출력됬습니다.

하지만 두번째 출력문은 연산식을 계산해주는 eval 함수를 이용하여

'3 + 9'를 덧셈 처리해서 '12'라는 결과가 출력됬습니다.

사실 이 밖에 내장함수들이 많이 있겠지만, 다음에 좀 더 알고 시간이 되면

언급하도록 하겠습니다.

자바스크립트 - 연산자 응용 문제

이번에는 자바스크립트에서 연산자를 응용하여 문제를 하나 풀어보겠습니다.

===================================================
[문제]
1) prompt()를 이용해 신장과 몸무게를 입력 받는다.
2) 적정 체중을 구한 뒤 사용자가 입력한 몸무게가 적정 몸무게 이상일 경우
는 “과체중”, 적정 몸무게 미만일 경우는 “체중 미달”, 적정 몸무게일 경우는
“몸짱”을 출력하세요.
※ 삼항 연산자 또는 if~ else if 문을 사용해 보세요

적정체중 : 신장에서 100을 뺀 값의 90%
===================================================

오늘 이 문제를 처음 풀었는데, 전에 자바를 배운게 있고

자바스크립트와 자바가 크게 문법 차이가 나는 것이 아니여서 많이 어렵지 않았습니다.

일단 이 문제를 풀기 위해서 반드시 알아야 할 코드를 적겠습니다.

위와 같은 창 화면을 prompt 라고 하는데, 이것을 사용하기 위해서는

window.prompt("당신의 이름은?", 홍길동); <-- 이 문장을 알아야합니다.

prompt 첫번째 매개 변수는 prompt의 사용자가 정의 할 수 있는 문장이고

두번째 매개 변수는 사용자가 입력하는 공란에 기본값입니다.

이 부분은 딱히 정의하지 않아도 됩니다.

문제에서 신장과 몸무게를 입력받는 부분은 아래와 같은 방식으로 구현합니다.

avg_height 라는 변수는 적정 체중으로 자신의 키(height)에서 100을 뺀 값에 0.9를

곱합니다.

이후에 사용자가 입력한 몸무게와 적정 체중을 비교하는 것은

자바에서 if~else if문과 똑같습니다.

변수 weight는 저의 체중이고, avg_weight는 적정 체중입니다.

이 값이 같냐, 더 크냐, 더 작냐로 분류하고 출력하면 됩니다.

자바스크립트에서는 document.write로 출력하고

그 안에 html에서 쓰이는 <h1> 태그 등을 " " 로 묶어서 사용합니다.

위의 그림은 저 위에 길게 나열한 if~else if문을 간결하게 줄인 삼항 연산자입니다.

조건연산자(3항연산자)

- 조건에 따라 두 값 중에 하나를 연산결과로 전달

- 형식 : (조건) ? 변수1 : 변수2

– 조건인 참이면 앞 문장 수행, 거짓이면 뒷 문장 수행

보통 하나의 if문에서 True, false 두 가지 값만 딱 나오는 상황에서 삼항 연산자를 구현 못할거라 생각하지만, 변수2에 조건을 넣는다면 다중 if문으로 충분히 삼항 연산자화 시킬수 있습니다.

- 형식 : (조건) ? 변수1 : 변수2

var str= (weight==avg_height) ? "적정 체중" : (weight>avg_height)? : "과체중" : "체중 미달";

삼항연산자의 결과는 변수 str로 넣고

그 결과는 알람 메시지로 출력합니다.

중요한 소스이니 자기꺼로 소화시켜야합니다~!!

혹시 풀 소스가 필요한 분들은 저에게 댓글을 남겨주시면 보내드리겠씁니다~!

자바스크립트 - 변수 선언 및 초기화

이번에는 자바스크립트에서 변수를 선언 및 초기화 하는 방법에 대해 포스팅 하겠습니다.

자바나 C를 했던 분들은 쉽게 이해하실겁니다.

자바에는 크게 아래와 같은 자료형이 있습니다.

1. 기본자료형
- 숫자형(number) : 정수형, 실수형 => number
- 논리형(boolean) : true, false
- 문자열(string) : 문자열을 " " 또는 ' '로 감싼다
- undefined, null : 비워진 데이터

자바에서는 int, float, double 등 다양한 타입의 형들이 있는데

자바스크립트에서는 숫자면 number로 분류합니다.

2. 참조형
- 객체형
- 배열
- 함수형

크게는 이렇게 분류 되어 있고 정말 위의 정리대로 자료형이 분류되는지

시험해봅시다~!! (TIP : typeof 연산자를 이용하면 자료형을 알 수 있습니다)

위와 같이 코드를 <script> 태그 내에 작성하고 실행 결과를 봅시다.

456.78 소수점은 number로 분류됩니다.

문자열은 string으로 분류됩니다.

(2>3은 false)
true, false는 boolean으로 분류됩니다.

자바스크립트 - 외부파일로 정의

이번 포스팅은 자바스크립트를 외부파일로 분리하여 참조하는 방법입니다.

외부파일로 정의하는 방법이 실무에서 많이 쓰인다고 하네요.

어쨋든 외부파일로 정의하기 위해서는

기존 html 파일과 외부파일 'js' 파일이 필요합니다.
(모두 다 에디트플러스에서 쉽게 할 수 있습니다.)

일단 html 파일에서 <script> 태그에 추가할게 있습니다.

<script type="text/javascript" src="02Alert.js">

위의 빨간색 02Alert.js 파일이 바로 외부 파일이고 저 파일을 외부파일로 참조하겠다고 선언합니다.

<body> 태그 안에 <button> 태그가 있습니다.

잘보면 ' onclick="go(); ' 이 부분이 있는데, 이 녀석의 정체는

02Alert.js 외부 파일에 go 함수를 정의한 것을 실행시키겠다는 의미입니다.

자 그럼 js 파일을 보시죠~!

위의 그림을 보면 go 함수를 정의했습니다.

자 이제 한번 실행해볼까요~!

html에 '누르세요' 버튼을 클릭하면 .js 파일에 정의한 go 함수 내의 소스코드를 실행합니다.

먼저 '안녕하세요?' 라는 alert 메시지가 나오고, '저는 외부파일에 있어요'라는 두번째 alert 메시지가 나옵니다.

자바스크립트 기초 포맷

이번 포스팅은 자바스크립트 기초 포맷에 대한 포스팅을 쓰려고 합니다.

개인적으로 자바, C, php, 안드로이드 이것저것 초급 수준으로 두루두루 배웠는데

자바스크립트 배우는건 처음이여서 내용이 생소하네요.

이클립스에서 html 양식을 처음 생성했을 때 나오는 기본 포맷입니다.

일단 <meta charset="UTF-8"> 태그를 제외한 나머지 부분은 지워도 상관없습니다.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01자바스크립트.html</title>
</head>

<body>
</body>
</html>

그럼 위의 부분이 남는데 <title> 태그 밑에

<script type="text/javascript"> 태그를 추가해서 자바스크립트 포맷이라고 정의합니다.

자바스크립트에서 함수를 선언하는 방법은 두가지가 있습니다.

-첫번째 방법-
function 함수명 (){
}

-두번째 방법- (듣기로는 두번째 방법이 많이 쓰인다고 합니다.
var 함수명 = function(){
}

위의 방법으로 hello 함수와 function 함수를 각각 다른 바법으로 선언했습니다.

var hi = function(){
window.alert("반가워요~~");
}

function hello()
{
//window 내장 객체가 가진 함수 'alert'
window.alert("Bye ~~");
}

그리고 아래에 함수를 호출하는 문장을 기술합니다.

그것은 <body> 태그 안에 씁니다.

'안녕?' 이라는 글자를 클릭 했을 때 위에서 정의한 hi 함수를 호출합니다.

'또 만나요' 라는 글자를 클릭 했을 때 위에서 정의한 hello 함수를 호출합니다.

저 같은 경우는 자바스크립트를 처음 배우는거라 조금 개념이 헷갈리네요

잊어먹기 전에 블로그에 정리를 해야겠네요 ㅜㅜ