[자바스크립트] 기본문법(조건문,배열,내장함수,함수,객체) 정리

자바스크립트 기본문법설명에 앞서서

 

⭐HTML

⭐CSS

⭐JavaScript

3가지의 차이는 무엇일까?

 

쉽게 건축물로 정리를 하자면

⭐HTML은 아파트를 만드는 뼈대이며

⭐CSS는 만든 아파트를 색칠 및 디자인을 하고

마지막으로 ⭐JavaScript는 아파트의 기능들을 추가하는 것이다.

 

그럼 HTML에서 JavaScript 사용방법으로는?

1. 내부 스크립트

2. 외부 스크립트

⭐alert() 함수 실행시 결과

⭐비교 연산자

두 값을 비교하여 true 또는 false로 표시한다.

alert(2==3)             
alert(10==10)             
alert("one"=="two")     
alert("three"=="three") 

⭐동등 연산자

⭐일치 연산자

alert(10 =='10'); true             
alert(10 ==='10'); false

언디파인드(undefined)	널(null)
존재하지 않는것을 나타내는 특수한 자료형이다.	어떠한 객체도 나타내지 않고 변수값을 초기화할때 사용
객체가 존재하지 않거나 변수값이 정해지지 않을때 가지는 특수한 자료형	null값이라면 변수가 유효한 객체, 배열, 숫자, 문자열, 불린 등 값을 담고 있지 않음을 나타냄

⭐조건문 if문, if else문

    var id = prompt("아이디 입력:");
    if(id == 'busanit') {
        console.log('아이디가 일치합니다.')

    }
    else {
        console.log('아이디가 일치하지 않습니다.;')
}

⭐논리연산자 &&(and), ||(or)

if(true && true){
    alert(10);
}
if(true && false){
    alert(20);
}
if(false || true){
    alert(30);
}
if(false || false){
    alert(40);
}

배열 [array]

/* 배열 선언 */
let arr = []

let fruits = ["멜론", "참외", "수박"];
alert( fruits[0] );
alert( fruits[1] ); 
alert( fruits[2] );

alert( fruits.length ); 

/* 맨뒤에 있는 배열을 삭제 */
alert( fruits.pop() ); 
alert( fruits ); 

/* 맨 뒤에 있는 배열에 추가*/
alert( fruits.push('포도') ); 
alert( fruits.push('배') ); 
alert( fruits );

/* 맨 앞에있는 배열을 삭제 */
alert( fruits.shift() );
alert( fruits ); 

/* 맨 앞에 있는 배열을 추가 */
alert( fruits.unshift('사과') );
alert( fruits ); 

⭐내장 함수

자바스크립트에서 제공하는 함수이며

구현하고자 하는 기능과 일치하는 내장 함수를 이용하면 쉽게 프로그래밍이 가능하다.

alert()	prompt()	confirm()
사용자에게 메세지를 전달하기 위한 대화 상자	사용자로부터 입력을 받기 위한 대화 상자	사용자로부터 확인 받기 위한 대화상자 출력
확인만 선택가능	'확인' , '취소' 선택가능	'확인' , '취소' 선택가능
사용예: alert('이미 사용중입니다');	사용예: prompt('이름을 입력하세요');	사용예: confirm('진행하시겠습니까?');

	var name = prompt('이름을 입력하세오','세종대왕');
	alert(name);

	var go=confirm('진행하시겠습니까?');
	if(go){
		alert('네 진행하겠습니다.');
	}
	else{
		alert('아니요 진행을 멈추겠습니다.')
}

⭐선언적 함수

1. 일반적으로 가장 많이 만드는 함수 방식이며 함수명이 있다.
2. 익명 함수와 같이 중괄호 ({}) 안에 함수가 처리해야할 코드의 기술이다.
3. 형태는 function 함수명() {};

    //함수의 선언	
    function start(){
	alert(100)
}

	start();  // 함수의 실행

/* 매개변수: 함수를 호출하면서 함수의 입력으로 넘겨준다.

리턴값 호출한 함수 값을 돌려준다. */

function 함수명(매개변수, 매개변수) {
	//함수코드
    return 리턴값;
}

⭐익명 함수

1. function() {}와 같이 함수의 형태지만 이름이 없는 함수이다.
2. 이름이 없기 때문에 변수에 넣어서 사용한다.
3. 중괄호 ({}) 안에 함수가 처리할 코드를 나열한다.
4. 사용방법: var 변수명 = function() {};

	var First = function(){
	var num = prompt('숫자를 입력하시오.');
	alert(Number(num)+100); // 숫자로 입력했지만 String으로 받았기 때문에 number해줘야함
};
	alert(typeof(First));   // 자료형 확인
	First();       // 함수의 호출 => ()를 함수가 저장된 변수뒤에 붙임 

	var add = First;   // 함수의 복사
	add();           // 2번째 실행(First)

⭐콜백함수

1. 함수는 객체 자료형 중 하나이기 때문에 매개변수로도 사용이 가능함
2. 함수를 매개변수로 전달하는 함수

function func(callback) {
    alert(typeof(callback));    
    callback();
}
function myCall(){
    alert('myCall 호출되었습니다');
}
func(myCall);

⭐타이머 함수

1. 특정한 시간에 특정한 함수를 실행할 수 있게 하는 함수이다.
2. 함수와 시간을 매개변수로 이용
3. 1000 millisecond = 1초 이다.

연산자	설명
setTimeout(function, millisecond)	일정 시간이 지난 후 함수를 한 번 실행한다.
clearTimeout(id)	일정 시간이 지난 후 함수를 한번 실행하는것을 중지한다.
setInterval(function, millisecond)	일정 시간 간격으로 함수를 반복해서 실행
clearInterval(id)	일정 시간 간격으로 함수를 반복해서 실행하는것을 중지한다.

    function seconds(){
    alert('2초 간격');
   };
    setTimeout(seconds, 2000);  // 콜백함수

	var intervalID = setInterval(seconds, 2000);

	setTimeout(function(){
		clearInterval(intervalID);
	}, 5000);

⭐객체(Object)

var phone={
     model: 'LG10',
     company: 'LG'
}

객체	속성	메서드
속성이름과 속성값의 쌍으로 이루어진 속성들을 포함하는 컨테이너 역할	모든 형태의 자료형을 가질 수 있다. (숫자,문자열,불린,null,undefined,배열)	속성값이 함수인 속성 객체의 속성이름 뒤에 괄호를 열고닫아 접근한다.