매일공부

[Javascript] 웹 페이지의 행동 및 응용 프로그램 본문

Programming/web

[Javascript] 웹 페이지의 행동 및 응용 프로그램

aram 2022. 9. 15. 00:31

- 정적 웹(static web) : HTML(문서내용과 구조)과 CSS(스타일) 코드 만으로 웹 페이지를 생성한 경우 항상 같은 내용 표시

- 동적 웹(dynamic web) : 웹 브라우저에 표시된 내용을 인위적으로 조작 or 상호작용(javascirpt)할 수 있게 해줌

- Javascript

: Netscape Navigator 2.0 브라우저에 최초 탑재
: 웹 프로그래밍 개념 창시
: 역할 = 동적인 문서 내용과 구조 변경, 이벤트 처리, 서버와 통신
: HTML 문서에 내장
: 컴파일 없이 바로 실행
: 배우기 쉬움
: 마우스와 키보드 입력 관련 이벤트 처리는 오직 자바스크립트로만 가능
: livescript > javascript 변경 > ecma에 표준 제안 > ECMAScirpt > ES5, ES6

□ 대소문자 구별하는 스크립트 언어

□ 함수를 1급 객체로 취급하는 함수적 프로그래밍 언어

□ 객체지향 언어

 

- 자바스크립트 코드의 위치(html에 적용=연결)

1. HTML 태그의 이벤트 리스너 속성에 작성 
  □  <태그 on이벤트="함수이름()"> 또는 <태그 on이벤트="javascript : 코드"> : inline 방식으로 권장하진 않음

2. 내부 <script>자바스크립트 코드</script> 태그에 작성 
  □ <head></head>나 <body></body> 내 어디든 가능
  □ 웹 페이지 내에 여러 번 삽입 가능

3. 자바스크립트 파일에 작성 
  □ 확장자 .js 파일에 저장
  □ <script> 태그 없이 자바스크립트 코드만 저장
  □ <script> 태그의 src 속성으로 파일을 불러 사용
      <script src=“파일경로&이름.js”></script>

4. URL 부분에 작성
    <a href="javascript:alert('클릭하셨어요?')"> 클릭해보세요</a>

 

- 주석처리

□ // 한줄 주석(슬래시 2개)
□ /* 여러줄 주석 */

 

- 템플릿 문자열

□ 출력될 format문자열  `(벡틱)으로 감싸주고 전달될 인수는 ${}
   document.write( `${dan} X ${su} = ${dan*su}` );

 

- 변수 & 함수

□ 전역변수 선언
   : var 변수  //중복 선언 가능, 마지막에 선언된 변수가 유효함
   : let 변수  //중복 선언 불가능
   : const 변수 //상수나 객체 등에 주로 사용

□ 로컬변수 : 함수 내에 선언된 변수, var 변수, let 변수

□ 상수 : 데이터 값 그 자체 
   const PORT = 5500; //상수는 반드시 대문자, 초기화 필수
   PORT =5000; //콘솔창 보면 오류 > 초기화하고 나면 값 변경 불가

□ var, let, const의 변수 선언 차이
: https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

□ 출력
  □ window.alert("출력");
     □ 메시지’와 '확인' 버튼을 가진 다이얼로그 출력, 메시지 전달
  □ document.write("웹 페이지에 출력");
     □ writeln()은 텍스트에 ‘\n＇을 덧붙여 출력
     □ '\n'을 덧붙이는 것은 고작해야 빈칸 하나 출력
     □ 바로 브라우저 윈도우에 출력
  □ console.log("디버그용도의 개발자도구 콘솔에 출력");
    □ 브라우저 콘솔창에 출력

□ 입력
 □ window.prompt("메시지", "디폴트 입력값") 함수
    □ 사용자로부터 대화식으로 문자열을 입력 받아 리턴
□ window.confirm("메시지"); 
    □ 사용자로부터 대화식으로 boolean값을 입력받을 때 사용
    □ “메시지”를 출력하고 ‘확인/최소(OK/CANCEL)’버튼을 가진 다이얼 로그 출력

 

- 식별자(idenfifier)

□ 변수명, 함수명, 클래스명 등 naming rule
   □ 첫 번째 문자 : 알파벳(A-Z, a-z), 언더스코어(_), $ 문자만 사용 가능
   □ 두 번째 이상 문자 : 알파벳, 언더스코어(_), 0-9, $ 사용 가능
   □ 길이 제한은 없으나 의미 있는 간결한 이름 권장
   □ 대소문자 구별
   □ 자바스크립트 예약어(키워드) 사용 불가

□ 데이터 타입 : string, number, boolean, object, function, undefined
□ 데이터 타입 확인 함수 : typeof()

□ 형 변환
  □ 문자열 + 숫자 + boolean = 우선순위는 문자열로 자동 형변환
  □ 뎃샘 외 연산자(산술연산자, 비교연산자 등)의 경우, 우선순위는 number로 자동 형변환
  □ number 타입의 값으로 명시적 형변환은 Number()함수 사용
  □ boolean 타입으로 명시적 형변환은 Boolean()함수 사용

 

- 연산자

□ 산술연산자 : +   -   *   /(항상 실수 반환)   % 
□ 비교연산자 : >   >=   !=   ==   <   <=
                       ===   !== (값과 타입 모두 일치하는지 판단)
□ 증감연산자 : ++   --
   > a++ | a-- 후위 연산자 = a를 사용한 후, a값 1증가|감소
   > ++a | --a 선위 연산자 = a를 1증가|감소 후, a값 사용
□ 비트 연산자 : &  |  ^   ~ 
□ shift 연산 : <<   >>   >>> 
□ 할당 연산자 : +=   -=   /=  ...등 
□ 논리연산자 : &&   ||   !(=not의 의미) 
□ 삼항연산자  조건 표현식 : (조건) ? (true일때 표현식) : (false 일때 표현식)

Boolean(0) // false
Boolean("") // false
Boolean(NaN) // false
Boolean(undefined) // false
Boolean(null) // false
Boolean(" ") // true

 

- 제어문 : nested if, 다중 if 문   |   다중 if문 대신 switch 문

□ if(조건) {
        true일 때 수행 문장;
   }

□ if(조건){
       true일 때 수행 문장;
   } else{
       false일 때 수행 문장;
   }

□ if(조건1) {
        true일 때 수행 문장;
   } else if(조건2) {
        조건2가 true일때 수행 문장;
   } else if(조건3) {
       조건3이 true일 때 수행 문장;
   } else{
       false일 때 수행 문장;
  }

□ switch(정수값 결과를 생성하는 표현식) {
    case 정수결과1 : 문장; ...; break;
    case 정수결과2 : 문장; ...; break;
    case 정수결과3 : 문장; ...; break;
    ...
    default : 문장;
}

□ switch(true) {
    case 조건표현식1 : 문장; ...; break;
    case 조건표현식2 : 문장; ...; break;
    case 조건표현식3 : 문장; ...; break;
    ...
    default : 문장;
}

 

Q. 정수를 입력받아서 짝수 홀수 출력하는 javascript 프로그램을 작성하라

더보기 
var num = prompt("0보다 큰 정수를 입력하세요", 0);
num = parseInt(num);
if (num == 0) {
    document.write("잘못 입력하셨습니다")
} else if (num%2 == 0) {
    document.write(num+" = 짝수")
} else{
    document.write(num+" = 홀수")
    }

//다른 답안1
var num = Number(window.prompt("1~100 사이의 수를 입력하세요", 0));
(num%2==0) || alert("홀수");
(num%2==0) && alert("짝수");

// 다른 답안2
var num = Number(window.prompt("1~100 사이의 수를 입력하세요", 0));
(num%2==0)? alert("짝수") : alert("홀수");

 

Q. 정수를 입력받아서 양수, 음수, 0, 수치데이터가 아님을 판별하는 코드 구현(if문과 switch문)

더보기 
var num=Number(window.prompt("정수를 입력하세요"));
if (num>0){
    document.write(num + ' : 양수')
} else if(num<0){
    document.write(num + ' : 음수')
} else if(num==0){
    document.write(num)
} else {
    document.write("정수가 아닙니다")
}

//swich
var numb=Number(window.prompt("정수를 입력하세요"));
switch (true) {
    case numb > 0: alert(numb + ' : 양수'); break;
    case numb < 0: alert(numb + ' : 음수'); break;
    case numb == 0: alert(numb); break;
    default: alert('정수가 아닙니다'); break;
}

 

- for, for in, while, do~while 반복문

□ for in 문에서 순차적 처리

□ while 반복문 = 반복 수행 조건을 알고 있을 때 사용, 선 조건체크 후 반복 수행 결정

□ do~while 반복문 = 반복 수행 조건을 알고 있을 때 사용, 최초1번 무조건 반복 수행 후, 조건체크 결과에 따라 반복 수행 여부 결정

□ for(카운트 변수 초기화 식; 조건식; 증감식){
    반복 문장;
}

□ for (변수선언 in 배열객체){  // for (let idx in 배열객체){ ...}
    배열객체[인덱스];
}

□ for (변수선언 in json객체){    //for (let key in json객체){ ....}
    json객체[key]   // json객체.key 이렇게도 사용 가능 
}

□ while(조건표현식){
    // 조건식이 참이면 실행
}

□ do{
  // 블록문
}while(조건식);

□ 반복문 내에서 break(종료), continue(건너뜀)문으로 제어 가능

□ 반복문 내부에 조건문, 반복문 정의 가능

 

Q. 사용자로부터 1~100 사이의 정수를 입력받아서 A(>=90), B(>=80), C(>=70), D(>=60), F(&gt;60) 등급을 판별하는 웹 어플리케이션을 if 조건문과 switch구문을 사용하여 자바스크립트로 구현하시오

더보기 
//if 조건문 사용 
var num = Number(prompt("1~100 사이의 정수를 입력하세요", 0));
if(num>=90) {
    document.write("A")
} else if (num>=80) {
    document.write("B")
} else if (num>=70) {
    document.write("C")
} else if (num>=60) {
    document.write("D")
} else {
    document.write("F")
}

//switch구문 사용
var num = Number(prompt("1~100 사이의 정수를 입력하세요", 0));
switch(true){
    case num >= 90 : alert("A"); break;
    case num >= 80 : alert("B"); break;
    case num >= 70 : alert("C"); break;
    case num >= 60 : alert("D"); break;
    default : alert("F");
}

//다른 답안
let num = Number(prompt("1~100 사이의 정수를 입력하세요", 0));
switch(Math.floor(num/10)){
    case 10 : alert("A"); break;
    case 9 : alert("A"); break;
    case 8 : alert("B"); break;
    case 7 : alert("C"); break;
    case 6 : alert("D"); break;
    default : alert("F"); break;
}


Q. 1~10까지의 누적합을 for,  while반복문으로 구현

더보기 
sum_int = 0;
for (let i=1; i<11; i++){
     sum_int = sum_int+i;
}
document.write(sum_int);


var i = 0;
var sum = 0;
while (i<10) {
    i++;
    sum = sum + i;   // sum = sum + ++i
   }
document.write(sum);

let x=3, y=5;
let result = ++x + ++y;  //선위연산자 ++은 다른 연산자보다 먼저 수행
console.log( x, y, result)
result = x++ + y++ ;  //후위 연산자는 다른 연산을 모두 수행하고 다음 줄로 넘어가기 직전에 수행
console.log( x, y, result)


Q. 구구단 2단~9단 단별로 가로로 출력

더보기 
for(var dan = 2; dan < 10; dan++ ){      
    for(var su =1; su < 10; su++){
       //document.write(i + 'x' + j + '=' + i*j );      
       document.write(`${dan} X ${su} = ${dan*su}`);           
    }        
    document.write('<br>') 
}

 

- 자바스크립트에서 배열

□ 배열 = 하나의 변수에 서로 다른 타입의 여러 값 또는 객체를 저장할 수 있는 타입

  • 배열 요소 접급 = index 사용
  • 배열 타입 = object 객체
  • 배열 생성 시, length 멤버필드도 함께 생성 + 배열의 요소 크기(개수) 저장
  • 배열 생성 시, 선언된 size = 가변적

□ 배열 생성 방법

var array1 = [100, 'korea', false, function(){}, {}, [10,20]]; 
var array2 = new Array(); //배열 초기화
var array3 = new Array(5); //5는 5개의 요소가 저장될 크기
var array4 = new Array(11,22,33);

array3[array3.length]='seoul'; //추가

for(var i=0; i<array1.length; i++){
    document.write(array1[i]+" : "+typeof(array1[i]+"<br>"));
}
document.write("<br>")
for(var i in array1){
    document.write(array1[i]+"<br>");
}

 

참고 : https://zerodice0.tistory.com/202

 

[Javascript] 배열 초기화 시 new Array()보다는 []를 사용하자

[Javascript] 배열 초기화 시 new Array()보다는 []를 사용하자 The Javascript Handbook을 읽던 도중 new Array()를 사용하여 배열을 초기화하는 것은 권장하지 않는다는 내용을 발견했는데, 그 이유에 대해서는

zerodice0.tistory.com

 

* 내용참고&출처 : 태그에서 수강한 수업을 복습 목적으로 정리한 내용입니다.

'Programming > web' 카테고리의 다른 글

[Django] templates, static, db 경로 설정  (0) 2023.08.07
[Django] GitGuardian has detected the following Django Secret Key exposed within your GitHub account.  (0) 2023.02.09
[HTML] 웹 페이지의 구조와 내용  (0) 2022.09.14
'Programming/web' Related Articles more
Comments