2022-2 오픈SW플랫폼수업 내용 정리를 위해 작성합니다
이미 알고 있는 내용이 많지만 한번 정리해두면 미래의 나에게 도움이 되겠죠?
기본에 충실하자!

JavaScript 적용법

1. 내부 JavaScript :
2. 외부 JavaScript:

HTML 페이지에 출력

1. window.alert()

function alertDialogBox() {
alert("확인을 누를 때까지 다른 작업을 할 수 없어요!"); }

2. innerHTML

var str = document.getElementById("text"); 
str.innerHTML = "이 문장으로 바뀌었습니다!";

3. document.write()

onclick="document.write(4 * 5)"

변수 선언

1. var: 변수 재선언, 재할당 모두 가능

var a = ’osp’; 
var a = ‘osp2’; 
a = ‘osp3’;

2. let: 변수 재할당만 가능

let a = ’osp’;
let a = ‘osp2’; //Syntax Error 
a = ‘osp3’;

3. const: 변수 재선언, 재할당 모두 불가능

const a = ’osp’;
const a = ‘osp2’; //Syntax Error 
a = ‘osp3’; //Type Error

4. Using nothing

x = 5; y = 6; z = x + y;

Data Type

1. Number (e.g., var num = 10;)
2. String (e.g., var className = “오소풀”;)
3. Boolean
4. Symbol (e.g., var sym=Symbol(“javascript”);)
5. Undefined (e.g., var str;)
6. Object (e.g., var dog={name:”happy”, age:3};)

typeof

typeof "문자열"   // string
typeof 10         // number
typeof NaN        // number
typeof false      // boolean
typeof undefined  // undefined
typeof new Date() // object
typeof null       // object

Object type usage

var dog = { name: "해피", age: 3 }; //객체 생성
document.getElementById("result").innerHTML =
"강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + " 살 입니다.";

Type conversion (타입 변환 기능)

1. Implicit type conversion: 자동 타입변환 가능

var num  = 20;
num = '이십'

2. Explicit type conversion : 아래 함수 제공

   Number(), String(), Boolean(), Object(), parseInt(), parseFloat(), toString()

Number("10"); // 숫자 10 
String(true); // 문자열"true" 
Boolean(0);   // 불리언 false 
Object(3);    // new Number(3)와 동일한 결과로 숫자 3
false.toString(); // 문자열 'false'
Number(true); // 숫자 1
Number(false); // 숫자 0

Delete 연산자

var arr = [1,2,3]
delete arr[2] // 인덱스 2번 요소 삭제 ([1, 2, empty]), undefined으로 직접 설정된 것 아님
arr.length // 길이는 그대로 3

조건문

1. else-if
2. switch

switch (조건 값) {
case 값1:
조건 값이 값1일 때 실행하고자 하는 실행문; break;
case 값2:
조건 값이 값2일 때 실행하고자 하는 실행문; break;
...
default:
조건 값이 어떠한 case 절에도 해당하지 않을 때 실행하고자 하는 실행문; 
    
break;

반복문

1. while문

while (표현식) {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문; }

2. for문

for (초기식; 표현식; 증감식) {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문; }

예시

var arr = [3, 4, 5];

for (var i = 0; i < arr.length; i++) { 
  document.write(i + " ");
}

for (var i in arr) { // 위랑 같은 동작 
document.write(i + " "); }

함수

function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문; 
return ~~; 
}

함수를 변수에 할당

function sqr(x) {                    
return x * x; }

var sqrNum = sqr;   // 변수에 함수 할당

document.write(sqr(4) + "<br>");  
document.write(sqrNum(4)); //동일 결과

객체

Property 참조 2가지 방법

person.name 
person["name"] 

Method 참조 예시

var person = { name: "홍길동", birthday: "030219", pId: "1234567", fullId: function() {
return this.birthday + this.pId; }
};
person.fullId() // 0302191234567
person.fullId; // function () { return this.birthday + this.pId; }

String 메소드

Array 메소드

주의

숫자 배열을 sort하면 첫째 자리 수만 보고 정렬한다.

var numArr = [10, 21, 1, 2, 3];
numArr.sort(); // [1,10,2,21,3]

제대로 정렬하고 싶다면 a.sort((a, b) => a - b); 형태로 람다 함수를 넣어줘야한다.

Event란

키보드, 마우스, HTML DOM, Window 객체 등과 관련한 이벤트 발생 시 이벤트에 반응하여 특정 동작을 수행

Event Listener

이벤트 발생시 이벤트를 처리하는 함수
리스너가 호출되기 위해서는 등록되어야 함
객체나 요소 (e.g., id)에 프로퍼티로 등록
객체나 요소의 메소드에 리스너 전달

1) 프로퍼티로 등록

단점 : 딱 하나의 리스너만 등록 가능

window.onload = function(){~~} //이 함수는 html문서가 로드될 때 실행됨

2) 태그에 속성으로 등록

단점 : 유지보수가 어렵고 가독성이 떨어진다.

<p onclick="alert('문자열을 클릭 했어요!')">이 문자열을 클릭해 보세요!</p>

3) 이벤트 핸들러 요소에 등록 (함수 연결)

     <input type = “button” value=“Submit" onClick=“func1()”> 

4) 리스너 전달 addEventListener

대상객체.addEventListener(이벤트명, 실행할이벤트리스너)
장점 : 여러개의 리스너 등록 가능

리스너 등록

var btn = documents.getElementById('btn')
btn.addEventListener('click',clickBtn);

리스너 삭제

btn.removeEventListener("mouseover", mouseoverBtn);

대화 상자로 사용자 입력값 반환

prompt(): window.prompt("간단한 메시지" + "입력란의 기본 메시지");

예시

function promptDialogBox() {
var inputStr = prompt("당신의 이름을 입력해 주세요 : ", "홍길동"); if (inputStr != null) {
document.getElementById("text").innerHTML = "당신의 이름은 " + inputStr + "입니 다.";
} 
}