티스토리 뷰

코딩/JavaScript

[7주 3일차] JavaScript

ehzim 2023. 11. 22. 21:43

 

 

 

 

3.1 긱본형식 및 적용방법

 

적용 방법 위치 태그 설명 및 특징
문서 내부 <head> <script></script>
문서 내부 <body> <script></script>
문서 외부 <head> <script scr="abc.js"></script>

 

 

기본명령어  
입력 prompt('입력제목', '입력내용');         (=Scanner과 같은 역할)
출력 document.write('출력내용');         (html 파일 실행해서 출력확인(HTML body에 출력))
alert('출력내용');         (팝업창)
console.log('출력내용');         (F12로 콘솔창에서 확인)
확인 cofirm('확인내용');         (true , false 반환)

 

 

* javescript는 보통 body 끝나고 많이 작성한다. body보다 앞에 있으면 HTML을 읽지않기 때문에 이럴 경우 window.onload를 사용한다.

 

 

 

 

ex) document.wirte 예제

 

html에 작성되어 있던 기존 글은 지워지고 document.write를 사용하여 입력한 문자가 출력된다.

 

 

 

 

 

 

ex) alert 예제

 

alert를 사용하면 팝업창과 같이 입력된 문자가 출력된다.

 

 

 

 

 

 

 

 

 

 

3.2 변수와 상수

 

 

변수 선언 변수 설명
var 중복해서 변수 선언 가능
let 중복해서 변수 선언 불가능
const 고정된 값을 할당한다.     (=final과 같은 역할)

 

 

 

 

데이터 타입 데이터 타입설명
숫자 데이터 정수, 실수, 지수 등을 표현 ex) 10, 10.5, 1e+2
문자 데이터 ', " " 등과 같이 표현하며 보통의 경우 작은 따옴표를 많이 사용한다.
boolean 데이터 true, false
undefinde 데이터 값이 지정되지 않은 변수이다. (변수만 선언하면 값이 없다 이렇게되면 undefined로 출력된다.)
null 데이터 undefined와 유사하지만 변수를 빈 상태로 만들거나 값이 존재하지 않게 만든다.

 

 

 

* a의 형태로 넣으면 변수로 취급

* " " or ' ' 형태로 넣으면 문자 취급

* 9의 형태로 넣으면 숫자 취급한다. (숫자는 따옴표를 하지 않아도 변수로 취급하지 않는다.)

 

 

 

 

 

JavaScript는 대부분 java와 유사한 형태의 명령어를 사용한다.

하지만 비교 연산자에 다른 연산자가 존재한다.

 

=== A가 B와 데이터 혹은 타입이 같다. a===b가 참이면 true, 거짓이면 false를 반환한다.
(캐스팅 X)
!== A가 B와 데이터 혹은 타입이 같지않다. a!==b 가 참이면  true, 거짓이면 false를 반환한다.

 

 

== A가 B와 같다. a==b 가 참이면 true, 거짓이면 false를 반환한다.

이때 자바와 다르게 자동으로 캐스팅된다.
!= A가 B와 같지않다. a!=b 가 참이면 true, 거짓이면 false를 반환한다.

 

 

 

ex) ==와 === 차이점 예제

 

 

 

 

 

 

 

 

 

 

3.5 함수

 

 

분류 종류 설명
사용자 정의 함수 선언적 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수
(이름이 없다)
익명 함수
내장 함수 인코딩, 디코딩 함수 프로그램 개발에서 자주 사용되는 기능을 내부적으로 제공해주는 함수
숫자 판별 함수
유한 무한 값 판별 함수
숫자 변환 함수
문자 변환 함수
잡자스크립트 코드 변경 함수

 

 

 

 

 

선언적 함수 설명 및 특징
선언 function 함수이름() {내용}
호출 함수이름();

 

 

ex) 선언적 함수 예제

 

함수이름은 존재해야 호출하여 사용할 수 있다. (다회성)

function compute()
{
    var s= 10;
    var y = 100;
    var result = z/y;
    console.log(result)
}
compute();

 

 

 

 

 

익명 함수 설명 및 특징
선언 var 변수 = function() {내용};
호출 변수이름();

.

 

익명 함수는 1회성으로 사용을 많이 한다.

변수에 그것을 담으면 다회성으로 사용한다.

 

 

 ex)  익명 함수 예제

var compute = function()
{
    var s= 10;
    var y = 100;
    var result = z/y;
    console.log(result)
};
compute();

 

 

* JS는 변수에 함수를 담을 수 있다.

 

 

 

 

 

 

 

인코딩, 디코딩 함수 설명 및 특징
encodeURIComponent() 영문, 숫자와 ()-_.~*! 를 제외한 한글과 같은 유니코드 문자를 인코딩한다.
(상태 보존)
decodeURICoponent() 원상태로 디코딩한다.
(원래 상태로 복구)

 

 

 

숫자, 유/무한 값 판별 함수 설명 및 특징
isNaN() 숫자인지 아닌지 판별하며 숫자이면 false 아니면 true 반환
isFinite() 유한 값이면 true 무한 값이면 false를 반환

 

 

 

숫자, 문자 변환 함수 설명 및 특징
Number() 숫자로 변환해 주는 함수
parseInt() 숫자와 문자가 포함되어 있을 경우 정수 부분만 숫자로 변환해주는 함수
parseFloat() 숫자와 문자르 포함되어 있을 경우 소수 부분까지 숫자로 변환해주는 함수
String() 문자로 바꿔주는 함수

 

 

JS 코드 변경 함수 설명 및 특징
eval() 문자를 자바스크립트 코드로 변경해주는 함수

 

 

 

 

ex) 인코딩 디코딩 예제

 

 

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내장함수</title>
    <script src="k.js"></script>
</head>
<body>
    <script>
        test();
    </script>
</body>
</html>

 

 

JavaScript

function test(){
    var encodeStr='자바스크립트';
    console.log(encodeURIComponent(encodeStr));  //인코딩한걸 콘솔에 출력
    var decodeStr=encodeURIComponent(encodeStr);  //인코딩한것을 변수에 담음
    console.log(decodeURIComponent(decodeStr));  
    //변수에 담긴 인코딩된 데이터를 디코딩을 사용하여 원상태로 복구해 콘솔 출력

    var num1='숫자';
    if (!isNaN(num1)){
        console.log('숫자');
    }
    else{
        console.log('숫자아님');
    }
    var num2=1/0;
    if(isFinite(num2)){
        console.log('유한값');
    }
    else{
        console.log('무한값');
    }
    var num3='10';
    console.log(Number(num3)); //숫자로 변환

    var num4='100px';
    console.log(parseInt(num4)); //숫자+문자일 경우 숫자만 숫자로 변환

    var num5='33.3%';
    console.log(parseFloat(num5)); //숫자+문자일 경우 소수 부분까지 숫자로 변환

    var num6=10;
    console.log(typeof num6);
    console.log(typeof String(num6));

    var str1='var num7 = 10';
    var str2 = 'var num8 = 20';
    eval(str1);  //문자를 자바스크립트 코드로 변경 num7=10 num8=20입력됨
    eval(str2);
    console.log(num7+num8);
}

 

 

 

 

 

 

 

3.6  객체

 

 

- 사용자 정의 객체

 

객체 : 객체의 데이터는 이름:값의 쌍으로 이루어져 있으며 이것을 속성이라고 한다. (마치, 자바에서 map과 비슷)

           ex) key:value

 

객체의 속성 : 프로퍼티

변수와 같으며 값을 저장한다.

 

객체의 속성 : 메서드

함수와 같으며 기능을 정의한다.

 

 

 

ex) 

var 변수 = {name:'홍길동', age:20, printout:function() {함수의 기능내용;}}  (key:value)

 

var circle = {
	color:'yellow',
    diameter:100,
    radius:function()
    {
    	return this.diameter/2;
    }
};

console.log(circle.color);  //yellow 출력
console.log(circle.diameter);  //100
console.log(circle.radius());   //radius()함수 호출

 

 

* JS는 변수에 함수가 들어갈 수 있다.

* new를 사용하면 자바와 같이 객체를 생성한다.

 

 

 

 

 

- 객체정보접근 (중요!!!)

 

객체정보접근 설명 및 특징
for...in 순차적으로 객체의 속성에 접근할 수 있다.

 

 

 

var info={
	subject:'javascript',
    credit:3,
    days:20,
    tuition:10000
};
for(var i in info){
	console.log(i+' : '+info[i]);
}

 

 

 

 

 

 

 

- Array 객체

 

Array  객체 설명 및 특징
객체생성 var subject = new Array(10,20,'javascript');
객체생성 var subject = [10,20,'javascript'];

 

 

 

 

 

 

- 배열 요소 접근

 

배열 요소 접근 설명 및 특징
for...of 순차적으로 배열의 값에 접근할 수 있다.

 

 

ex) for..in 과 for...of 예제

 

var city=['서울', '부산', '창원', '대구];
for (var i in city){
	console.log(i);
}

var city=['서울', '부산', '창원', '대구];
for (var i of city){
	console.log(i);
}

 

 

위와 같은 예제를 통해 in과 of의 차이를 알 수 있다.

for...in은 index 값을 가지고 for...of는 배열 안의 요소 즉, value 값을 가진다.

 

 

 

 

 

- 배열 요소 접근 (중요!!!!!)

배열 요소 접근 설명 및 특징
forEach() 배열의 요소에 순차적으로 접근하여 필요한 값을 생성할 수 있다.

 

 

 

ex) forEach() 사용 예제

 

var num = [1,2,3];
sum=0;
num.forEach(function(value,index,array) //함수를 3번 반복한다.
{
	console.log(value);  //1 2 3 배열의 요소 값
    console.log(index);  // 0 1 2 배열의 인덱스 값
    console.log(array);  // [1,2,3] 배열 자신
});

num.forEach(function(value){
	return sum+=value
});
console.log(sum);

 

 

 

 

 

 

 

3.7 이벤트

 

 

마우스 이벤트 설명 및 특징
click 마우스를 클릭했을 떄 이벤트가 발생
dbclick 마우스를 더블클릭했을 때 이벤트가 발생
mouseover 마우스를 오버했을 때 이벤트가 발생 (=hover)
mouseout 마우스를 아웃했을 때 이벤트가 발생
mousedown 마우스를 눌렀을 때 이벤트가 발생
mouseup 마우스를 떼었을 때 이벤트가 발생
mousemove 마우스를 움직였을 때 이벤트가 발생

 

 

 

 

키 이벤트 설명 및 특징
keydown 키를 눌렀을 때 이벤트가 발생
keyup 키를 떼었을 때 이벤트가 발생
keypress 키를 누른 상태에서 이벤트가 발생

 

 

 

 

폼 이벤트 설명 및 특징
focus 포커스가 이동되었을 때 이벤트가 발생
blur 포커스가 벗어났을 떄 이벤트가 발생
change 값이 변경되었을 때 이벤트가 발생 (사용 多)
submit submit 버튼을 눌렀을 때 이벤트가 발생
reset reset 버튼을 눌렀을 때 이벤트가 발생
select  input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 떄 이벤트가 발생

 

 

 

 

 

로드, 기타 이벤트 설명 및 특징
load 로딩이 완료되었을 때 이벤트가 발생
abort 이미지의ㅣ 로딩이 중단되었을 때 이벤트가 발생
resize 사이즈가 변경되었을 때 이벤트가 발생
scroll 스크롤바를 움직였을 때 이벤트가 발생

 

 

 

 

 

 

- 인라인 이벤트 연결

 

이벤트 연결 설명 및 특징
인라인 이벤트 연결 html요소에 직접 이벤트를 연결하는 방식

 

 

ex) 인라인 이벤트 연결

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-wdith">
    <script>
        function sum(n){
        alert(n);
        }
    </script>
</head>
<body>
	<button onclick='sum(10);'>클릭</button>
</body>
</html>

 

 

 

 

 

 

- 기본 이벤트 연결

 

이벤트 연결 설명 및 특징
기본 이벤트 연결 html요소를 취득한 후 이벤트를 '객체의 메서드' 형식(객체.메서드=function(){내용})으로 연결

 

 

 

ex) 기본 이벤트 연결 예제

<body>
	<button onclick='sum(10);'>클릭</button>
    <script>
    var bt=document.getElementById('bt');
    bt.onclick=function() {
    	console.log('ok');
      };
    </script>
</body>

 

 

 

취득한 요소가 요소 취득 명령어 이후에 오면 반드시 load를 적용해야한다.

아니면 제대로 작동하지 않음.

 

<!doctype html>
<html>
<head>
    <script>
        window.onload=function(){
            var bt=document.getElementById('bt');
            bt.onclick=function() {
                console.log('ok');
              };
        };    
    </script>
</head>    
<body>
	<button id="bt">클릭</button>
</body>
</head>

 

위의 코드를 보면 <script>가 <body>보다 위에 위치한다.

이렇게 위치하면 script를 먼저 실행하여 html 이 제대로 작동 안된다.

그렇기 때문에 widow.onload를 사용하여 html이 읽을 때 동안 load 상태로 기다린 후 실행된다.

 

 

 

 

 

 

 

- 표준 이벤트 연결

 

이벤트 연결 설명 및 특징
표준 이벤트 연결 객체.addEventListener('이벤트',함수)의 방식으로 이벤트를 연결

 

 

 

ex) 표준 이벤트 연결 예제

 

<head>
    <script>
        window.onload=function(){
            var bt=document.getElementById('bt');
            function view(){
            console.log('ok');
            }
            bt.addEventListener('clock',view);  //js → html 이므로 on을 붙이지않고 click을 사용
        };    
    </script>
</head>    
<body>
	<button id="bt">클릭</button>
</body>
</head>

 

 

위의 코드에서 function()은 변수명을 가지고 있지않다. 그렇기 때문에 onload시 한번 실행한다.

 

var bt=document.getElementById('bt'); 이 코드는 html 안에 id가 bt 인 것을 변수 bt에 담는다는 뜻이다.

만약 html 코드 안에 id가 bt인것이 여러개 있을 경우 배열처리가 된다.

 

bt.addEventListener('clock',view); 코드는 행위를하는지 감시한다. click 하면 view 실행한다.

 

html → JS : onclick

JS  → html : click

 

 

* 중복 id가 있으면 배열으로 처리가 된다.

 

 

저작자표시

'코딩 > JavaScript' 카테고리의 다른 글

[JacaScript] 셀렉터  (0) 2023.12.17
사이트 클론코딩  (0) 2023.11.28
[8주 1일차] javascript  (1) 2023.11.27
[7주 5일차] JavaScript  (1) 2023.11.24
[7주 4일차] JavaScript  (1) 2023.11.23
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday