혜야의 코딩스토리

[JavaScript] 자바스크립트 본문

꿈 : 멋진 개발자 🧸/JavaScript & jQuery

[JavaScript] 자바스크립트

hyeya_ 2022. 7. 17. 17:16

✏️ 자바스크립트 특징

- 동적인 웹페이지 작성을 위해 사용되는 클라이언트측 프로그램 언어

- 모든 웹브라우저에 자바스크립트 해석기가 내장되어 있다.

  (버전영향을 받으므로 자바스크립트 최신버전의 코딩 기법을 쓰면 웹브라우저 엔진이 해석을 못할 수 있다.)

- 웹페이지의 동작을 정의하는 언어

- 인터프리터 언어

- 클라이언트에서 실행된다.

- 제어문은 Java의 제어문과 거의 동일하다.

- JavaScript의 데이터 타입은  String, Number, Boolean, undefined, null이 있으나 모두 가변 자료형이다.

  즉, 자료형을 따로 정해서 쓰지 않아도 된다.

- 변수 선언은 3가지 방법을 사용한다.

   var : 변수 선언과 동시에 값을 초기화

   let : 블록 범위(scope) 지역변수를 선언과 동시에 값을 초기화

   const : 상수 선언

✏️ 자바스크립트의 활용

jQuery : 자바스크립트 라이브러리

JSON(JavaScript Object Notation) : 키-값 쌍으로 이루어진 데이터 형식이다.
  좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준이다.
  XML을 대체하여 많이 사용된다.

 

✏️ 자바스크립트의 작성 방법

// 1) 인라인 자바 스크립트 : 태그 내부에 직접 작성
<input type="button" onclick="alert('ok')">

// 2) 내부 자바 스크립트 <head> 또는 <body> 태그 내부에 작성
<script>
 // 자바스크립트 코드
</script>

// 3)외부 자바스크립트
<script src="자바스크립트파일.js"></script>

// 자바스크립트의 대화 상자
alert("메시지"); //단순 메시지박스
var 변수 = prompt("메시지","기본 값"); //입력받은 값을 변수에 저장할 때
confirm("메시지"); //사용자의 확인을 받을 경우

// HTML요소에 접근하는 방법
document.getElementById("태그의 id")            //id로 접근
document.getElementsByName("태그의 name")       //name으로 접근
document.getElementsByClassName("태그의 class") //class로 접근

// 배열 선언 
// var 배열이름 = ["값", "값", "값"];
var fruits = ["apple","banana","peach"];

🎈🎈 함수

//익명 함수를 변수에 바로 대입할 수 있음
var plusTen = function() {
	var num1 = prompt("숫자를 입력해 주세요","");
	alert(Number(num1)+10);
};

alert(typeof(plusTen));
alert(plusTen);

//변수를 통해서 익명함수를 호출할 수 있음
plusTen();

//변수 add에 익명함수를 저장할 수 있음
var add = plusTen;
//또 변수를 통해서 익명함수를 호출할 수 있음
add();


function add(){
/*
가변인자함수 : 매개변수가 함수에서 정의된 것보다 많이 입력된 것만 사용
그러나 입력된 매개변수를 활용할 수 있도록 함수 구현 가능
[가변인자함수의 특징]
1. 매개변수의 개수가 변할 수 있는 함수
2. 정의된 것과 달리 입력된 매개 변수를 모두 활용할 수 있는 함수
3. 모든 함수는 매개변수를 내장된 arguments 배열에 저장함

*/
	var output='';
	alert(typeof(arguments));
	alert(arguments.length);
	
	for(var i=0; i<arguments.length; i++){
		output += arguments[i]+' '; 
		//arguments배열에 저장된 각 배열요소의 값을 변수 output에 저장
	}
	return output;
}

var out = add(1,2,3,4,5);
alert(out);


/*
 비동기 프로그래밍 :
 어떤 작업을 요청한 후 다른 작업을 수행하다가 이벤트가 발생하면
 그에 대한 응답을 받아 처리함
 */
 
// 콜백함수1
function square(x, callback) {
	document.write(x*x);
	setTimeout(callback, 1000);
	//1초 후에 기억된 callback 익명함수의 내용을 처리,
	//여기서 비동기적으로 처리함
}

square(2, function(x) {
	alert("콜백함수 실행");
});

// 콜백함수2
function greeting(name) { //5.대화상자에 입력한 이름이 매개변수 name에 들어와 처리됨.
	alert('반갑습니다. '+name);
}

function processInput(call) {
	alert(call); //2.실행
	var name=prompt("이름을 입력해 주세요",""); //3.실행
	call(name); //4. 실행
}
//매개변수로 함수의 이름을 사용... 
processInput(greeting); //1.호출

🎈🎈 클로져

/*
클로져의 특징
1) 종료된 외부 함수의 변수를 참조하는 함수
2) 지역 변수를 남겨두는 현상
3) 자신의 환경을 기억한다. (메모리를 차지하는 단점이 있다.)
*/

function outerFunction() {
	var a = 10;
	
	var innerFunction = function() { //변수에 익명함수 선언 가능
		var b = 30;
		alert(a);
		alert(b);
	};
	return innerFunction; //내부함수를 리턴값으로 사용
}

var out = outerFunction();
out();
//변수에 함수호출 기호인 ();를 덧붙이면 out변수가 기억하고 있는 innerFunction의 익명함수를 호출하게 된다.
//즉, 종료된 외부 함수의 변수를 참조하는 out()과 같은 함수를 클로저(Closure)라고 한다.


function hello(name) {
	var _name = name;
	return function() {//익명 내부함수
		console.log('Hello '+_name);
	};
}

var hello1 = hello('복숭아');
var hello2 = hello('오렌지');
var hello3 = hello('한라봉');

hello1();
hello2();
hello3();

//클로저는 자신의 환경을 기억하기 위해 메모리가 소모된다.
//따라서, 메모리의 클로저 참조를 제거해주는 것이 좋다. (null 처리)
hello1 = null;
hello2 = null;
hello3 = null;

//변수에 함수호출 기호인 ();를 덧붙이면 변수가 기억하고 있는 innerFunction의 익명함수를 호출하게 된다.
//즉, 종료된 외부 함수의 변수를 참조하는 hello1()과 같은 함수를 클로져(Closure)라고 한다.

 

저작자표시 비영리 변경금지 (새창열림)

'꿈 : 멋진 개발자 🧸 > JavaScript & jQuery' 카테고리의 다른 글

[JavaScript] 첨부파일 일괄 다운로드 (체크박스)  (0) 2024.04.17
[jQuery] trigger() 함수  (0) 2023.10.20
[jQuery] 제이 쿼리(jQuery), Ajax(Asynchronous JavaScript And XML)  (0) 2022.07.17
[JavaScript] 문서 객체 모델(DOM, Document Object Model)과 이벤트 처리, 입력 검증  (0) 2022.07.17
[JavaScript] 자바스크립트로 간단한 계산기 만들기  (0) 2022.06.27
'꿈 : 멋진 개발자 🧸/JavaScript & jQuery' Related Articles more