[JavaScript] Basic

VScode/JavaScript

[JavaScript] Basic

hvoon 2022. 9. 8. 17:33

-Html5 언어로 마크업하며 만드는 웹페이지의 정적인 기능들을 확장하고 페이지를 조금 더 동적으로 만들기 위해 사용하는 프론트 개발 언어임

-주로 Html5에서 불가능한 사칙연산 및 관계 연산 등을 실행할때 사용하며 기능적인면이나 이벤트(클릭, 더블클릭 등)에 대한 동작을 처리하는데 사용됨

-브라우저 및 화면에 표시될 태그들을 대상으로 하는 객체들이 정의되어 있으며 자바의 객체지향 언어 형식의 프로그램이 작성됨

-브라우저 상에서 일어날 수 있는 사용자 입력, 해당 연산, 이벤트에 의한 출력의 기능을 구현함

*자바 스크립트의 주석문은 자바 주석문과 똑같이 사용됨(여러줄 주석처리: /* */, 한줄 주석처리: //)

Head안의스크립트실행명령들

1. 출력관련명령

-alert명령은 자바스크립트 안에 내장된 window 객체 안의 멤버메서드임

-사용할 때 window를 생략하여 사용할 수 있고 생략하지 않고 사용할 수 도있음

-자바스크립트에서는 화면에 표시되는 윈도우를 window라는 이름으로 정의한 객체로 다루게끔 환경객체를 내장하고 있음

2. 문자 자료형

-자바스크립트에도 자바와 마찬가지로 문자 또는 숫자형의 자료가 존재함. 또한 그들을 저장해두고 사용할 수 있게 변수도 존재함.

-java와 달리 javascript의 문자자료형은 작은따옴표와 큰따옴표를 모두 문자자료로 사용함. (char와string구분없음)

-작은따옴표로 묶어도 문자자료, 큰따옴표로 묶어도 문자자료로 인식함. 다만 그 둘을 혼용하여 사용할 수 는 없음("java script' 잘못된 사용)

-둘을 혼용하여 사용하는 경우 문자열 자료 안에 인용구문을 넣어야할 때 혼용하여사용함('hello"javascript"...'바른사용)

-인용구분의 사용도 작은따옴표와 큰따옴표의 구분없음('hello "javascript"...'바른사용, "hello 'javacsript'..."바른사용)

-큰따옴표나작은따옴표로만인용구문표기를하고싶다면이스케이프문자 \"를 사용함("hello, \"javascript\"...")

-이스케이프 문자들: \n, \', \t, \\

document.write('<h2>hello,javascript...<br/>작은 따옴표</h2>')
document.write("<h2>hello,javascript...<br/>큰 따옴표</h2>")
document.write("<h2>hello,'javascript'...<br/>혼합 사용1</h2>")
document.write('<h2>hello,"javascript"...<br/>혼합 사용2</h2>')
document.write("<h2>hello,\"javascript\"...<br/>이스케이프 문자 사용</h2>")
document.write('<h2>\'hello,javascript...\'<br/>작은 따옴표</h2>');
document.write("<h2>\"hello,javascript...\"<br/>큰 따옴표</h2>");
document.write("<h2>\'hello,javascript...\'<br/>혼합 사용1</h2>");
document.write('<h2>\"hello,javascript...\"<br/>혼합 사용2</h2>');

3. 숫자 자료형

-javasript의 숫자자료는 정수와 실수만 구분하고 이외의 요소들은 구분없이 사용함. 통틀어서 숫자 자료라고 명칭

document.write("<h1>"+273+"</h1>");
document.write("<h1>"+3.14+"</h1>");

4. 산술연산자: +, -, *, /, %

-일반적인 산술연산자는 똑같이 사용됨. 다만 정수와 정수끼리의 나눗셈연산이 정수결과가 나오는 것이 아니라 실수 결과로 출력되는 것만 다름.

document.write("<h1>27+35="+(27+35)+"</h1>");
document.write("<h1>27-35="+(27-35)+"</h1>");
document.write("<h1>27*35="+(27*35)+"</h1>");
document.write("<h1>27/35="+(27/35)+"</h1>"); 
// 연산 결과가 자바와 다른 점
document.write("<h1>27%35="+(27%35)+"</h1>");

5. 비교 연산자: <, >, <=, >=, ==, !=

6. 논리 연산자: &&, ||, !

document.write('<h1>52>135&&45<78=>'+(52>135&&45<78)+'</h2>');
document.write('<h1>52>135||45<78=>'+(52>135||45<78)+'</h2>');
document.write('<h1>!(52>135)=>'+(!(52>135))+'</h2>');*/

7. 변수

-자바스크립트의 변수 선언

var a=10; // a변수 생성 후 10 저장
a='abcd';
// 모든 변수는 var이라는 선언 명령으로 생성함. 변수의 자료형은 현재 저장되어 있는 자료형에 따라 바뀜
// a 변수에 10이라는 값을 저장해서 정수형 변수가 되어 있다가도 이후에 123.123이라는 값은 a 변수에 대입하면 a 변수는 실수형이 됨
a=123.123;
// 변수는 1개지만 자료형을 바꿔가면 재활용이 가능함
var pi=3.14 // 실수
document.write(pi);
document.write(2*pi*radius); // 원 둘레의 길이
var varChar="hello world..." // 문자
var booleanType=true; // boolean
pi="hello world..."; // 실수가 저장되었던 변수에 다시 문자 저장
document.write(pi);
document.write(2*pi*radius); 
// 문자와 숫자 자료의 산술 연산의 결과는 nan
// 자바 스크립트의 함수(자바의 메서드)
function abc(){
 document.write("<h2>자바스크립트의 일반적인 함수임. 자바처럼 호출</h2>");
}
abc();
// 자바 스크립트의 변수는 함수도 저장 가능함
// 자바 스크립트는 평소 사용하는 함수가 자바의 스태틱 함수(메서드)이며 생성 후 자유롭게 호출하여 사용함. 
// 또한 다음과 같이 만들어지는 함수를 변수에 담아서 사용하기도 함.
var fv=function(){
    document.write("함수를 변수에 저장. 그리고 변수이름으로 호출함<br>");
}
// 이름이 없는 함수를 변수에 저장하여 변수 이름을 함수 이름인 것처럼 사용하여 호출함
fv();
// function(){} 이와 같이 정의된 함수를 "익명함수"라고 하며 이 익명함수는 스스로 호출이 되지 않아서 위와 같이 변수에 저장하고 변수이름으로 호출해야만 함

// 변수로 호출이 아니라 변수 내용을 출력하면 함수의 몸체(내용)이 출력됨
document.write('<br><br>'+fv);

8. 복합 대입 연산자: +=, -=, *=, /=

var value=10;
value+=10; // value=value+10;
document.write("<h2>"+value+"</h2>");
value-="world";
document.write("<h2>"+value+"</h2>"

9. 증감 연산자

var value=10;
document.write(++number+5+"<br>"); 
// number 10에서 11로 변경 후 +5 연산실행
document.write(--number+5+"<br>"); 
// number 11에서 10로 변경 후 +5 연산실행
document.write(number++ +5+"<br>"); 
// +5 연산실행 후 number 10에서 11로 변경 
document.write(number-- +5+"<br>");

10. 변수의 특징과 변수들 간의 연산

-변수는 가장 마지막에 대입한 값을 기억함

-문자들 간의 +연산은 이어붙이기 연산

-문자와 숫자간의 + 연산도 이어붙이기 연산이 되어 최종 문자결과가 만들어짐

var cup="Coffee";
cup='Green Tea';
cup='Water';
document.write('Drink '+cup+'<br>');
var number=10;
document.write('숫자 값: '+number);
var num=1234+""; // num 변수에는 숫자 1234가 아닌

11. 자료형 검사

// 문자열
document.write("<h2>'홍길동': "+typeof("홍길동")+"</h2>");

// 숫자
document.write("<h2>1234: "+typeof(1234)+"</h2>");
document.write("<h2>1234.123: "+typeof(1234.123)+"</h2>");

// boolean
document.write("<h2>true: "+typeof(true)+"</h2>");
// 함수
document.write("<h2>function(): "+typeof(function(){})+"</h2>");
// 객체 
// 자바 스크립트에도 객체가 존재함. 
// 하나의 변수 안에 여러 속성(멤버변수)&멤버 메서드들을 생성해놓고 객체지향프로그래밍을 할 수 있음

// 자바 스크립트의 객체 생성
var objectVar={a:10, b:20};
document.write("<h2>{a:10, b:20}: "+typeof({a:10, b:20})+"</h2>");
document.write("<h2>{a:10, b:20}: "+typeof(objectVar)+"</h2>");
// 자바스크립트 변수 특징 두번재 변수의 선언 없이도 변수의 사용이 가능함
number=100;
document.write("<h2>number 변수 값: "+number+"</h2>");

// 다만 값이 초기화 되지 않으면 생성하지 않은 변수의 값은 사용할 수 없으며 자료형은 undefind가 됨
document.write("<h2>number2 변수 값: "+typeof(number2)+"</hr>");

12. 입력

var input=prompt('이름을 입력하세요.','두 글자 이상 입력');
// '이름을 입력하세요': 안내 텍스트
// '두 글자 이상 입력': 입력란에 미리 쓰여있게됨
// prompt로 입력받은 모든 내용은 자료형이 string이기 때문에 숫자를 입력받아서 사용하려면 아래와 같이 형변환이 필요함
var num=Number(input);
document.write("<h2>input: "+typeof(input)+"</h2>");
document.write("<h2>input: "+typeof(num)+"</h2>");

// boolean 입력받을 때 사용하는 함수
var bool=confirm('수락?');
// confirm에서 대답한 버튼 '확인'=true, '취소'=false로 전달
if(bool){document.write('수락함');}
else{document.write('거절함');}
/* 국어 영어 수학점수를 입력받고, 총점 평균을 출력하도록 자바스크립트 명령을 구성
   (입력받은 점수, 총점, 평균 을 세줄에 걸쳐 출력) */
var input = prompt('국어점수를 입력하세요.', '100');   
// 자바스크립트는 변수의 중복선언도 가능. 
// 그렇다고 변수가 두개 생성되는 것은 아니고, 이번 변수는 사라지고 새롭게 같은 이름의 변수가 생성.
var kor = Number(input);   
var input = prompt('영어점수를 입력하세요.', '100');
var eng = Number(input);
var input = prompt('수학점수를 입력하세요.', '100');
var mat = Number(input);
var tot = kor+mat+eng;
var ave = tot/3;
document.write("<h2>입력한 점수 국어:" + kor + ",영어:" + eng + ",수학:" + mat + "</h2>");
document.write("<h2>총점:" + tot + "</h2>");
document.write("<h2>평균:"+ave + "</h2>");

13. 배열

-배열에 저장되는 자료형이 고정되지 않았음. 또한 배열 안에 배열을 넣어서 이차원 배열처럼 사용이 가능함

var array=[273, 'string', true, function(){   }, {a:100, b:200}, 
          [150,170]];
document.write(array[0]+"<br>");
document.write(array[1]+"<br>");
document.write(array[2]+"<br>");
document.write(array[3]+"<br>");
document.write(array[4]+"<br>");
document.write(array[5]+"<br>");
document.write(array[5][0]+"<br>");
document.write(array[5][1]+"<br>");
document.write(array+"<br>");

14. undefined 자료형

// 1. 존재하지 않는 것을 표현하려 했을 때
// documnet.write(variable) -> error 선언되지도 초기화되지도 않은 변수의 사용은 오류 
document.write("<h2>"+typeof(variable)+"</h2>"); // undefined

// 2. 변수를 선언(생성)했지만 초기화하지 않았을 때
var variable2
document.write("<h2>"+variable2+"</h2>"); // undefined
document.write("<h2>"+typeof(variable2)+"</h2>"); // undefined

// 3. undefined가 아닌 경우 -> 변수 생성없이 바로 값을 대입한 경우
variable3=100;
document.write("<h2>"+variable3+"</h2>");
document.write("<h2>"+typeof(variable3)+"</h2>");

15. 숫자와 문자열(아라비아기호)의 특별한 연산과 자료형 변환

1) +연산자: 숫자끼리 연산을 제외한 연산은 모두 이어붙이기

document.write("<h2>52+273="+(52+273)+"</h2>"); // ->325
document.write("<h2>'52'+273="+('52'+273)+"</h2>"); // ->52273
document.write("<h2>52+'273'="+(52+'273')+"</h2>"); // ->52273
document.write("<h2>'52+273'="+('52+273')+"</h2>"); // ->52+273
// 연산의 순서상 '12'+52가 먼저 계산되고 
// 결과 '1252'가 273과 이어 붙이기 되어 결과는 '1252273'
document.write("<h2>'12'+52+273="+('12'+52+273)+"</h2>");
// 12+273 산술연산 후 '12'와 이어붙이기 연산
document.write("<h2>52+273+'12'="+(52+273+'12')+"</h2>"); // ->32512

2) 덧셈을 제외한 사칙 연산: 문자가 숫자로 변환되어 산술연산 실행

document.write("<h2>'52'*2="+('52'*2)+"</hr>"); // ->104
document.write("<h2>'52'-2="+('52'-2)+"</hr>"); // ->50
document.write("<h2>'52'/2="+('52'/2)+"</hr>"); // ->26
document.write("<h2>'52'%2="+('52'%2)+"</hr>"); // ->0
document.write("<h2>'홍길동'-2="+('홍길동'-2)+"</hr>"); // ->NAN

3) 강제 자료형 변환

-다른 자료형 -> 숫자변환: Number() 함수 사용

-다른 자료형 -> 문자열 변환: string() 함수 사용

var input=prompt('숫자를 입력','숫자');
var num=Number(input);
document.write("<h2>typeof(input): "+typeof(input)+' : '+num+" / typeof(num)->"+typeof(num)+"</hr>");
// 숫자가 아닌 값 입력시 - NaN 출력: 자바스크립트로 나타낼 수 없는 숫자 의미
var str=String(12.123);
document.write('<h2>str: Number->String: '+str+' / typeof(str): '+typeof(str)+"</h2>");

4) Boolean() 자료형 변환

document.write('Boolean(0)->'+Boolean(0)+"<br>");
// 0은 boolean으로 변환시 false, 0이 아닌 모든 숫자는 boolean으로 변환시 true
document.write('Boolean(NaN)->'+Boolean(NaN)+"<br>"); 
// false

document.write('Boolean(\'0\')->'+Boolean('0')+"<br>"); 
// true 따옴표 안에 그 어떤 글자라도 존재한다면 true, 비어있거나 null이거나 NaN이거나 undifined라면 false
document.write('Boolean(\'false\')->'+Boolean('false')+"<br>"); 
// true

document.write('Boolean(\'\')->'+Boolean('')+"<br>"); // false
document.write('Boolean(null)->'+Boolean(null)+"<br>"); // false
document.write('Boolean(undefined)->'+Boolean(undefined)+"<br>"); 
// false

16. 일치 연산자

// 양변의 자료형은 틀리지만 자료형을 맞춰서 변환했을 때 변환된 값이 같음
// ==: 일치 true
// !=: 불일치 true
document.write('\'\'==false->'+(''==false)+"<br>"); // true
document.write('\'\'==0->'+(''==0)+"<br>"); // true
document.write('0==false->'+(0==false)+"<br>"); // true
document.write('273==\'273\'->'+(273=='273')+"<br><br>"); // true

// ===: 양변의 자료형과 값이 모두 일치
// !==: 양변의 자료형과 값이 다름
document.write('\'\'===false->'+(''===false)+"<br>"); // false
document.write('\'\'===0->'+(''===0)+"<br>"); // false
document.write('0===false->'+(0===false)+"<br>"); // false
document.write('273===\'273\'->'+(273==='273')+"<br>"); // false
var str="홍길동";
document.write('"홍길동"==="홍길동"->'+(str==="홍길동")+"<br>"); // true

body 태그 안의 스크립트

-주로 head 안의 함수를 호출하거나 직접 실행 명령을 씀.

-함수 및 실행 명령의 실행시점: 페이지 시작 시점 또는 이벤트(마우스 동작) 발행시점

-출력관련 명령

1) window.alert("hello JavaScript");

2) document.write("<h1>hello JavaScript</h1>");

→ 실행 시점을 조절할 수 있는 구문

-자바 스크립트에서는 body 영역을 document라는 객체로 정의하고 제어할 수 있게 환경을 제공

저작자표시 (새창열림)