본문 바로가기
FrontEnd

자바스크립트

by 12312121 2024. 12. 14.

자바스크립트 기능에는 4가지가 있다.
첫번째, HtmL 콘텐츠를 변경 할 수 있다.
변경하는 코드로는 getElementld()가 있다.
실습을 통해서 알아보자.

자바스크립트와 자바언어의 차이점을 알아보자.
자바스크립트의 실행방식은 다음과 같다.
웹브라우저에서 바로 자바스크립트를 해석하고 실행한다.
(인터프리터 기반)
자바언어의 실행방식은 다음과 같다.
자바 프로그램을 컴파일 후 변환된 object code를
자바가상머신에서 실행하는 방식이다.
(컴파일 기반)
자바스크립트의 성격은 객체 기반이라는 것이다.
자바언어는 객체지향이라는 것이다.
자바스크립트의 작성형태는 HTML 파일내에 포함되어 작성된다는 것이다.
자바언어는 별도의 자바프로그램 파일로 작성된다.
변수형 선언 및 타입 검사측에서 알아보자.
자바 스크립트는 변수의 선언이 따로 필요없고, 타입 검사도 매우 느슨하다.
다만, 자바는 변수의 선언이 필요하다. 타입 검사도 엄격하다.

자바스크립트의 작성에 관해 알아보자.
자바 스크립트 코드는 HTML 파일 없이 독립적으로 웹브라우저에서 실행될 수 없다.
덧붙여서 <script> 태그는 웹문서내 어느곳에 위치하든 상관없다.

자바스크립트의 외부 파일 참조 방식은 srt이다.
<script> 내에 포함시킨다. 예는 아래와 같다.
<script src="mysript.js"></script>
근데 파일을 URL로 참조하는 것도 된다. 예는 아래와 같다.
<script src-"http://webclass.me/~~.js">

주석도 있다. 
// 한 행 ~~
/* 여러행~~
*/ 이렇게 쓴다

자바스크립트에서 가장 간단한 명령어는 document.write();이다.
printf();랑 같다 예시로 써보자.
<body>
<script>
document.write("Hello"+"<br>"); //<br>은 line break(줄바꿈)이다
</script>
</body>

자바스크립트의 특징을 알아봐요
참고로 웹브라우저는 전달 받은 html파일에 자바스크립트 코드가 있다면 자체 인터프리터로 그 코드를 해석하고 실행한다
그리고 웹브라우저는 그 코드에서 오류가 발생해도 치명적이지 않다면 무시하고 진행한다
웹브라우저 자체 인터프리터란 컴파일 없이 즉시 코드를 해석 및 실행 시켜주는 웹브라우저 내부 구성요소이다
개발자는 미리 코드를 디버그 다 해놔야한다. 하는 방법은 크롬 기준 F12 누르기 -> 콘솔 실행, 웹브라우저 기준 우클릭 후 요소검사 -> 콘솔 실행이다.

식별자를 알아봅시다.
식별자란? 어떤 데이터를 식별하는데 사용하는 고유한 이름입니다
주로 변수명이나 함수명 등 입니다.

식별자 생성에는 규칙이 있습니다.
예약어는 못씁니다.
예약어란, 자바스크립트를 처음 만들떄, 특별히 의미를 담언 단어입니다
특수문자는 _와 $만 됩니다.
공백 안됩니다.
모든 언어 되긴하는데 알파벳 쓰는게 관례입니다.
input 같이 의미있는 단어 써야합니다.
클래스 빼고 다 소문자로 시작합니다. (변수, 함수, 속성, 메소드)
여러단어로 되면 각단어의 첫글자를 대문자로합니다. (iLoveYou)

변수란 자바스크립프 프로그램이 살행 중에 데이터를 저장하는 공간입니다
변수 타입으론 지정할 필요없긴한데 대표적으로 5가지 있습니다.
Number, String, Boolean, Undefined,Null
그냥 let 변수명; 이렇게 하면 됩니다.

아 그리고 특이한게, 정수인지 실수인지 관계없이 숫자는 전부 실수로 저장됩니다.

자바 스크립트의 변수에 대해서 알아보겠습니다.
var과 let 모두 다중타입을 지원합니다.
var은 선언된 함수내, let은 선언된 블록내 (ex. if)에서만 작동됩니다.
또한, var은 중복 선언이 가능한데 let은 불가합니다. 그래서 let 사용을 권장합니다.
const라는 것도 있는데, 재선언 및 재할당이 안되는게 특징이다

변수 형 변환에 대해 알아보아요
문자열에서 숫자로 변환하려면 함수 parseInt() 혹은 parseFloat()를 씁니다.
let str = "123"; 
let num1 = parseInt(str); // 결과: 123
let num2 = parseFloat(str); // 결과: 123.0
문자열은 메소드 toString()을 사용합니다.
let num = 123;
let str = num.toString(); // 결과: "123"
메소드는 객체에 미리 정의되어 포함되어 있는 함수에요
특이한게 문자열로 바꾸고나서 10이랑 더하면 끝에 10이 붙어요
예를들어 var length = 123, length_str;
length_str = length.toString() + 10;
이렇게 하면 12310이 나와요
document.write()에서 document의 write()도 메소드입니다
document는 객체인데 html 문서는 다 document입니다

자바스크립트에서 테이블도 출력할 수 있습니다. 그냥 html이랑 똑같이 하면 됩니다.
<body>
<table border="1">
<script>
let title1 = "컴퓨터와 IT기술의 이해";
let title2 = "소셜미디어의 이해와 활용";
let title3 = "멀티미디어 배움터 2.0";

document.write("<caption> 베스트셀러 </caption>");
document.write("<tr><th> 순위 </th><th> 제목 </th></tr>");
document.write("<tr><td> 1 </td><td> " + title1 + "</td></tr>");
document.write("<tr><td> 2 </td><td> " + title2 + "</td></tr>");
document.write("<tr><td> 3 </td><td> " + title3 + "</td></tr>");
</script>
</table>
</body>

콘솔로 출력하는 걸 알아보아요
console.log()를 써요
자바스크립트 코드를 디버깅할 때 써요
수식의 값을 웹 브라우저의 콘솔에 출력하는 함수에요
아래처럼 적고 ctrl+shift+j를 누르면 웹브라우저의 콘솔창에 100 hello가 나와요
<body>
<script>
    let x=100;
    let y='hello';
    console.log(x,y);
</script>
</body>    

자바스크립트의 변수형은 typeof()로 확인 가능하다
예를들어 typeof(123) -> number
typeof("123") -> string이다
정수, 실수 등은 number
문자열, 문자, 공백은 string
true 혹은 false는 Boolean
아직 아무런 값을 안넣어서 정의가 안된 경우엔 Undefined
존재하지 않는 값, null값, 알 수 없는 값인 경우엔 Null

대화상자로 메세지를 출력하는 방법을 알아보아요
세가지 방법이 있어요 alert(), comfirm(), prompt()
alert("HTML5 프로그래밍 \n 웹"); 
이렇게 하면  HTML5 프로그래밍라는 내용과
확인 버튼이 달린 대화상자가 나와요
comfirm을 쓰면 확인, 취소 버튼이 나와요
확인을 누르면 true 반환, 취소를 누르면 false가 반환돼요
근데 그 대화상자 함수를 대입 연산자 앞에다가 쓰면
작동은 안되고, 해당 대입 연산자로 만든 변수를
document.write()안에서 호출해야 작동이 됩니다
예시는 아래와 같습니다
let answer = confirm("주문한 서적을 결재하시겠습니까?");
document.write("Answer = " + answer + "<br>");
확인, 취소 뿐만이 아니라 키보드로부터 문자열을 입력받게 하는
방법도 있어요
아래처럼 하면 돼요
let answer = prompt("주문한 서적을 결재하시겠습니까?");
document.write("Answer = " + answer + "<br>");
이렇게 했을땐, 확인을 누르면 문자열, 취소를 누르면 null이 반환돼요
참고로 항상 입력값이 문자열로 변환 되기 때문에
3을 입력하면 "3"을 반환해요
따라서 return input===3의 결과는 false가 돼요
그래서 true가 나오게 하려면 parseInt()나 Number()함수를 써야해요
전자는 입력값중 정수숫자인 것만 추출해서 타입을 바꿔요(123a -> 123)
parseInt("123.45");  // 출력: 123
parseInt(true);      // 출력: NaN
parseInt(null);      // 출력: NaN
후자는 다바꿔요. 그런데 다 바꿀수 있을때만 바꿔요
Number("123abc");    // 출력: NaN (숫자가 아닌 문자 포함)
Number("123.45");    // 출력: 123.45
Number(true);        // 출력: 1
Number(null);        // 출력: 0
Number("abc");       // 출력: NaN
참고로 prompt에서 두번째 인자로 입력값의 예시를 적을 수 있어요
let age = Number(prompt('나이를 입력하세요', '만나이로 입력"));
이렇게 하면 입력창에 클릭해야 사라지는 만나이로 입력합니다.가 나와요

3항조건문에 대해서 알아보아요
아래와 같은 문법을 지녔어요
조건 ? 참일 때 실행할 것 : 거짓일 때 실행할 것
let rain=promt('비가 올까요?', 'yes or no');
(rain == 'yes' || rain == 'YES') ? document.write('우산챙기기'):
document.write('우산안챙기기');

자바스크립트 메서드나 자바스크립트 내장 함수에도 자바스크립트 사용자 정의 함수도
있다. 쓰는 법은 아래와 같다
function adder (a,b) {
let sum;
sum = a + b;
return sum;
}

인수와 매개변수에 대해 알아보자
인수는 함수를 호출할 때 전달하는 값이다
매개변수는 함수를 정의할때 인수를 받을 변수이다
특이한 점은, 자바스크립트에선 인수와 매개변수의 타입과 개수가 동일한지 확인을 안한다
개수가 부족하면 부족한 값은 undefined로 둔다

또, 함수에서는 특이한 것이 있다. 익명 함수라는 것인데
이름없이 정의 하는 것이다. 재사용없이 1회성으로만 사용된다
보통 아래처럼 사용한다
<script>
let adder = function (a, b) {
let sum = a + b;
return sum;
}
근데 특이한게 여기서 더 줄일 수도 있다
화살표 함수라는 것인데 아래처럼 그냥 function, 중괄호, return을 생략하고
화살표 =>만 넣는 것이다
const add = function(a, b) {
    return a + b;
};
// 화살표 함수
const add = (a, b) => a + b;
근데 특이한게 소괄호까지도 뺴도 된다
const square = x => x * x;
참고로 parseInt(prompt())함수로 값 두개를 입력받고
prompt()로 연산자를 입력 받아서
calc(값1,값2,연산자)로 연산을 할 수도 있다

추가로 유념해야할 두 함수에 대해서 알아보자
eval()과 setTimeout()이 있다
eval()은 입력된 것을 그대로 실행한다.
예를들어 1+1을 입력했다면 2를 출력하고
"val1"을 입력했다면 변수 val1의 값을 출력한다
setTimeout()는 일정시간 후에 지정된 함수를 호출해주는 기능이다
예를들어 (eval,1000)를 입력했다면 1초후에 eval가 호출된다
응용해서 몇초 뒤에 알림이 뜨게할 수 있다. 아래처럼!
function show_alert() {
alert("5 seconds passed...");
}
setTimeout(show_alert, 5000);

댓글