-
[JavaScript 란?] 자바스크립트 개념, 변수, 함수, 객체 사용 예제프로그래밍 언어/JavaScript 2022. 8. 24. 12:04
JavaScript, 자바스크립트란?
자바스크립트는 객체(object) 기반의 스크립트 언어이다.
HTML로 웹의 내용을 작성하고, CSS로 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하며 서버 측 프로그래밍에서도 사용할 수 있다.
<특징>
1. 객체 기반의 스크립트 언어이다.
2. 동적이며, 타입을 명시할 필요가 없는 인터프리트 언어이다.
3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.<작성법>
대소문자를 구분하여 작성하며 문장은 세미콜론(;)으로 구분된다. 큰따옴표와(" ") 작은따옴표(' ')를 구분해서 사용한다.
<역할>
1. 요소의 추가 및 삭제
2. CSS 및 HTML 요소의 스타일 변경
3. 사용자와의 상호작용
4. 폼의 유효성 검증
5. 마우스와 키보드 이벤트에 대한 스크립트 실행
6. 웹 브라우저 제어 및 쿠키 등의 설정과 조회
7. AJAX 기술을 이용한 웹 서버와의 통신JS 실행 순서
화면에 값을 표시하기 위해선 document.write() 를 사용한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 예제</title> <!--자바 스크립트(javascript) 자바 스크립트는 <script> 태그 안에 사용 HTML에서 하기 어려운 조건문 반복문 등 논리로직을 지원하며 함수나 객체의 사용도 가능하게 함 객체지향언어 같지만 순차지향이며 객체의 개념이 들어간 것 본 예제를 실행하면 스크립트의 순서대로 코드가 실행됨(순차지향)--> <script> /*자바 스크립트에서 모든 변수형은 var이며 제대로 사용하기 위해서는 parsing(구문분석)이 필요하다*/ var num=0; document.write("head 태그 내 실행 순서 : " +num + "<br/>"); </script> <script> var num = 1; document.write("head 태그 내 실행 순서 : " +num + "<br/>"); </script> </head> <body> <script> var num=2; document.write("body 태그 내 실행 순서 : " +num + "<br/>"); </script> <script> var num =3; document.write("body 태그 내 실행 순서 : " +num + "<br/>"); </script> </body> </html>
이벤트 리스너
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>이벹느 리스너 속성에 자바스크립트 코드</title> </head> <body> <h3>마우스를 올려보세요</h3><hr> <!--마우스 이벤트, 마우스가 이미지에 이동하면 이벤트 실행 초기 이미지 지정--> <!--onmouseover:마우스 올렸을 때, onmouseout:마우스 치웠을 때 --> <img src="puppy.png" alt="이미지" onmouseover="this.src='apple.png'" onmouseout="this.src='banana.png'"> </body> </html>
경고창 alert
링크 태그인 a 태그에 href 값으로 javascript:alert('') 값을 넣어줄 수도 있고
<button type="button" onclick="alert('외부 자바스크립트 파일')">버튼클릭</button> 이렇게 버튼을 클릭했을 때 alert 경고창이 뜨도록 할 수도 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>URL에 자바 스크립트 작성</title> </head> <body> <h3>링크의 href에 자바스크립트 작성</h3> <!--HTML에서 url 경로를 지정해 자바스크립트 기능인 alert alert는 알림창이 뜨는 것! 함수를 사용함--> <a href="javascript:alert('클릭하셨어요?')"> 클릭해보세요 </a> </body> </html> <!-- 자바스크립트로 HTML 콘텐츠를 웹 페이지에 직접 삽입 바로 브라우저 윈도우에 출력 document.write() ex) document.write("<h3>Welcome!</h3>"); document.writeln() writeln()은 텍스트에 '\n'을 덧붙여 출력 '\n'을 덧붙이는 것은 고작해야 빈칸 하나로 출력 다음 줄로 넘어가는 것은 아니다. -->
프롬포트 확인 경고
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>프롬포트확인경고</title> <!--script 코드는 body 태그 내부에도 코딩 가능--> </head> <body> <h3>자바 스크립트로 사용자 입력 및 대화</h3> <!--버튼 사용 결과가 출력되는 부분 제목 밑에 hr 바로 아래에 출력된다--> <div id="result"></div> <script> //document.getElementaById 아주 중요하다 var result = document.getElementById("result"); function promptEx(){ //promt는 입력할 수 있는 경고창 생성 prompt("메시지", "디폴트 입력값") 함수 //사용자로부터 문자열을 입력받아 리턴 var ret= prompt("이름을 입력하세요", "이름"); //var ret에 저장된 값이 null이면 다음 if문 수행 if(ret==null){ //취소 버튼이나 다이얼로그를 닫은 경우, 출력되는 멘트 result.innerHTML = "취소나 그냥 닫았군요" } //입력이 있다면 아래 코디 실행 else{ //ret는 사용자가 입력한 문자열 //아무값도 입력하지 않으면, ret="" result.innerHTML=ret; } } //confirm("메시지")함수 //"메시지"를 출력하고, '확인/취소(ok/cancle)'버튼을 가진 다이얼로그 출력 //'확인' 버튼 누르면 true, '취소' 버튼이나 강제로 다이얼로그 닫으면 false 리턴 function confirmEX(){ var ref = confirm("전송할까요"); if(ref==true){ //사용자가 확인 버튼을 누른 경우 result.innerHTML = "확인을 눌렀군요"; } else{ //취소버튼이나 다이얼로그가 닫힌 경우 result.innerHTML="취소나 그냥 닫았군요"; } } //innerHTML 프로퍼티 : 시작 태그와 종료 태그 사이에 들어있는 HTML 컨텐츠 //innerHTML 프로퍼티 수정 -> HTML 태그의 컨텐츠 변경 function alertEX(){ alert("알림말"); // 메시지와 확인 버튼을 가진 다이얼로그 출력, 메시지 전달 } </script> <!--onclick="함수명" onclick 이벤트를 활용해 script에 저장되는 코드 수행--> <button onclick="promptEx()">프롬포트 다이얼로그</button> <button onclick="confirmEX()">확인 다이얼로그</button> <button onclick="alertEX()">경고 다이얼로그</button> </body> </html>전역변수와 지역변수
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>전역변수와 지역변수</title> </head> <body> <h3>전역변수와 지역변수</h3> <script> //이 전역변수는 해당 스크립트문 내에서만 전역변수 var x=100;//전역변수 x function f(){//함수 f()선언 var x=1; //지역변수 x 함수가 실행될 때 생성되고 소멸함 document.write("지역변수 x=" + x); //1 document.write("<br>"); //this.x는 스크립트문의 전역변수 x를 뜻함 document.write("전역변수 x=" + this.x); //100 } f(); //함수 호출 </script> </body> </html>
함수(function) 란?
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 이런 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. 자바에서 메소드(자료형 매개변수) 이런 느낌인 것이다. JS는 자료형을 따로 명시하지 않는다.
자바스크립트에서는 함수도 하나의 타입(datatype)이다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하다. 또한, 함수는 다른 함수 내에 중첩되어 정의될 수도 있다.
함수 이름(function name)은 함수를 구별하는 식별자(identifier)이고, 매개변수(parameter)란 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.
자바스크립트 중요 함수
1. eval() : 함수 내부에 수식을 쓰면 계산해준다.
2. parseInt() : 문자열을 정수로 바꾸는 함수
띄어쓰기가 있으면 첫번째 수만 바꾸고, 공백으로 시작하면 공백은 무시한다.
3. isNaN(var) : 변수값이 숫자가 아니면 true, 숫자면 false 출력 수가 아닌 문자로 시작하면 NaN을 반환<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 전역함수</title> </head> <script> //셋다 자주 쓰이는 함수이므로 알고 있는 것이 좋다. function evalParseIntIsNaN(){ //eval:함수 내부에 수식을 쓰면 계산해준다. //변수값이 문자열(숫자값)이어도 계산된다. var res = eval("2*3+4*6"); //res는 30 document.write("eval(\"2*3+4*6\"는)" + res+ "<br>"); //parseInt()는 var m = parseInt("32"); //32를 10진수로 변환한다. document.write("parseInt(\"32\"는) " +m+"<br>"); var n = parseInt("0x32"); //0x32를 16진수로 해석, 정수 50리턴 document.write("parseInt(\"0x32\"는)" + n+"<br>"); n=parseInt("hello"); //isNaN() 함수는 어떤 값이 NaN인지 판별합니다. //주어진 값이 NaN이면 true, 아니면 false. //isNaN(var) : 변수값이 숫자가 아니면 true 출력 if(isNaN(n)) document.write("hello는 숫자가 아닙니다.") else if(!isNaN(n)) document.write("숫자입니다.") } </script> <body> <h3>eval(), parseInt(), isNaN()실습</h3> <script> evalParseIntIsNaN(); </script> </body> </html>
객체 생성 new Object()
var account = new Object();
Object 형 객체 account를 생성해서 각 객체의 프로퍼티 생성 및 초기화가 가능하다. 객체의 속성 owner, code, balance 등등 각각 정의가 가능한 것.
만약 그냥 변수를 사용한다면?
var owner = "대장동";
var code = "1111"; 이런식으로 작성해야한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>new Object()로 사용자 객체 만들기</title> <script> function inquiry(){return this.balance;} function deposit(money){this.balance += money;} function withdraw(money){//예금 인출, money는 인출하고자 하는 액수 //money가 balance보다 작다고 가정 this.balance -= money; //출금 } //사용자 객체 만들기 //object를 통해서 지정해둔 객체를 사용한다. var account = new Object(); //account.변수명 -> js의 모든 변수는 var account.owner = "대장동"; //계좌 주인 프로퍼티 생성 및 초기화 account.code="1111"; //코드 프로퍼티 생성 및 초기화 account.balance = 35000; //잔액 프로퍼티 생성 및 포기화 //우변은 상단에 작성된 함수인데, 함수 명만 작성해야 동작함 account.inquiry = inquiry; // 메소드 작성 inquiry 함수 사용 account.deposit = deposit; //메소드 작성 deposit 함수 사용 account.withdraw = withdraw; </script> </head> <body> <h3>new Object()로 사용자 객체 만들기</h3><hr> <script> //객체 활용, 데이터 출력 document.write("account : "); document.write(account.owner + ","); document.write(account.code+","); document.write(account.balance+"원<br>"); account.deposit(10000); //10000원 적금 document.write("10000원 저금 후 잔액은" + account.inquiry()+"<br>"); account.withdraw(5000); //5000원 인출 document.write("5000원 인출 후 잔액은" + account.inquiry()+"<br>"); </script> </body> </html> <!-- 사용자가 새로운 타입의 객체 작성 가능 새로운 타입의 객체 만드는 2가지 방법만 소개 new Object()이용 리터럴 표기법 이용 -->
getElementById()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>getElementById</title> </head> <body> <h2>정답의 동적 삽입</h2> <p>Q. 거울아 거울아 세상에서 누가 가장 예쁘니?</p> <input type="button" value="정답보기" onclick="a()"> <!-- input을 이용하여 삽입 type을 putton으로 하여 버튼 생성 value를 넣어 버튼의 이름을 바꿔준 뒤 onclick은 fuction a()로 하여 a()가 실행된다. getElementById('a1')을 활용해 id=al인 태그 입력값을 출력한다 --> <!--버튼을 누르면 아래 문구가 출력되는 것--> <p id="a1"></p> <!--<p>를 생성하여 구간을 만든다 id값을 줘서 변경할 수 있다.--> <p>Q. 죽느냐 사느냐 그것이 문제로다.? </p> <input type="button" value="정답보기" onclick="b()"> <!-- input을 이용하여 삽입 type을 button으로 하여 버튼 생성 value를 넣어도 버튼의 이름을 바꿔준 뒤 onclick은 function b()로 하여 b()가 실행된다. --> <p id="b1"></p> <script> function a(){ document.getElementById('a1').innerHTML='백설공주'; //getElementById로 객체를 가져와서 innerHTML을 이용하여 <p>값만 바꿔준다. //Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다. } function b(){ document.getElementById('b1').innerHTML='사과'; } </script> </body> </html>
반응형'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
[javaScript] jQuery로 코드 변경해보기 (html, css, class 제어, 이벤트리스너) (1) 2022.11.12 [JavaScript] alert 박스, onclick, function, EventListener 기초 (0) 2022.11.11 [javascript 기초] const & let & var 차이점, Arrays, Object (0) 2022.09.14 [Ajax란? ] 제이쿼리와 $.ajax() , $.get(), $.post() 메서드 (0) 2022.09.01 [jQuery란?] 정의&사용법 , $(document).ready(), 선택자 종류, toggle (0) 2022.08.24