웹프로그래밍/JavaScript

프로그래밍 언어 응용 31일차 (24/12/23)

wkun 2024. 12. 23. 15:57

CONTENTS

 

JavaScript

10.객체

8)내장객체(RegExp)

랠리 테스트

 

---------------------------------------------------------------------

 

 

JavaScript

 

10.객체

 

8)내장객체(RegExp)

 

RegExp 객체 메서드

  <script>
    let str = "Hello JavaScript";
    let regexp_search = str.search(/javascript/i);
    document.write(regexp_search + "<br>"); //대소문자 구분x
  </script>

 

RegExp 객체 메서드(test(), exec(), match())

  <script>
    var str = "Hello JavaScript";
    var pattern = /JavaScript/;
    document.write(pattern.test(str)+"<br>");
    document.write(pattern.exec(str)+"<br>");
    document.write(str.match(pattern)+"<br>");
  </script>

 

RegExp 객체 메서드_플래그

  <script>
    let str = "Hello \n JavaScript javaScript JavaScript \n javaScript";
    let ptn01 = /javascript/i; //대소문자 구분x
    let ptn02 = /javaScript/g; //모두 찾기
    let ptn03 = /javaScript/m; //시작, 끝에 해당하는 기호
    console.log(str+"<br>");
    console.log(ptn01 + ":" +str.match(ptn01))
    console.log(ptn02 + ":" +str.match(ptn02))
    console.log(ptn03 + ":" +str.match(ptn03))
  </script>

 

RegExp 객체 메서드_표현식_수량한정자

  <script>
    let str01 = "ab";
    let str02 = "abc";
    let str03 = "abcccc";
    let ptn01 = /abc+/ig; //abc, abcccc, abccccc
    let ptn02 = /abc*/ig; //ab, abc, abcccc
    let ptn03 = /abc?/ig; //ab, abc

    //+
    document.write("1.ab: " + str01.match(ptn01) + "<br>");
    document.write("2.abc: " + str02.match(ptn01) + "<br>");
    document.write("3.abcccc: " + str03.match(ptn01) + "<br>");
    //*
    document.write("1.ab: " + str01.match(ptn02) + "<br>");
    document.write("2.abc: " + str02.match(ptn02) + "<br>");
    document.write("3.abcccc: " + str03.match(ptn02) + "<br>");
    //?
    document.write("1.ab: " + str01.match(ptn03) + "<br>");
    document.write("2.abc: " + str02.match(ptn03) + "<br>");
    document.write("3.abcccc: " + str03.match(ptn03) + "<br>");
  </script>

 

RegExp 객체 메서드_표현식_활용

<body>
  <form action="#" name="calculator">
    주민등록번호: <input type="text" name="number1" size="14">
  </form>
  <button onclick="ju_search()">검색</button>
  <p id="demo"></p>

  <script>
    function ju_search() {
      let x = calculator.number1.value;
      let ptn01 = /\d{6}-[12]\d{6}/;
      if(ptn01.test(x)){
        document.querySelector("#demo").innerHTML = ptn01.exec(x);
      }
    }
  </script>
</body>

 

 

 

랠리 테스트

  문항 답변
1 변수를 개념과 선언(정의)하는 방법을 설명할 수 있다. 데이터를 저장하기 위해 이름이 붙은 메모리 공간
변수의 초기화 및 선언
let a = 1;
변수의 선언 후 초기화
let a;
a = 1;
2 변수의 이름을 정하는 규칙에 대해서 설명할 수 있다. 문자, $, _로 시작 가능하며 숫자로 시작은 안된다. 대소문자를 구분한다.
3 기본 데이터 타입을 설명할 수 있다. Number(숫자형): 정수나 실수를 사용하며 따옴표없이 표기함
String(문자열형): 따옴표(' '), 쌍따옴표(" ")로 표기 하며 하나 이상의 문자열 결합체
Boolean(부울형): ture 혹은 false 값을 가짐, 따옴표 없이 표기하며 0은 거짓, 1은 참
4 복합 데이터 타입을 설명할 수 있다. symbol(심볼형): 유일하고 변경 불가능한 기본값
object(객체형): 속성과 메서드를 가지는 객체
array(배열형): 배열의 집합체
function(함수형): 실행 가능한 코드의 집합체
5 특수 데이터 타입을 설명할 수 있다. undefined: 값을 할당받지 못함
null: 값이 없음
6 데이터 타입 형변환에 대해서 설명할 수 있다. Nomber: 문자->숫자
let a = "11";
let b = Number(a);
String: 숫자->문자
let a = "11";
let b = String(a);
Boolean: 정수->부울형
let a = "11";
let b = Boolean(a);
7 상수에 대해서 설명할 수 있다. 변하지 않는 수로 변수의 내용을 변경하면 에러가 나도록 변수명 앞에 const를 씀
객체의 속성의 값 변경, 배열 요소 추가/삭제 할 수 있음
8 산술연산자에 대해서 설명할 수 있다. 숫자데이터 연산으로 +,-,*,/%가 있음
정수+정수
정수+실수
정수+문자
9 단항연산자에 대해서 설명할 수 있다. 항이 하나인 연산자로 증감(++, --), 부정(!), 부호(+-,)가 있음.
증감연산자: 값을 1씩 증가하거나 감소
부정연산자: 논리의 값을 반대로 만듬(ture->false, false->ture)
부호연산자: 숫자의 값 반환
10 비교연산자에 대해서 설명할 수 있다. 같은지 다른지 비교하여 ture 혹은 false 결과를 도출함
>크다,<작다,>=크거나 작다,<=작거나 크다,==같다,!=다르다,===같다(데이터유형, 값이 모두 같아야 ture),!==다르다(데이터유형, 값이 모두 달라야 false)
11 논리 연산자에 대해서 설명할 수 있다. 결과값이 ture 혹은 false임
&& 논리곱(and): 모든 조건 ture
|| 논리합(or): 조건 중 하나 ture
! 논리부정(not): 값이 ture면 false, false면 ture
12 대입 연산자에 대해서 설명할 수 있다. 변수에 값을 대입함, 값을 덮어쓰므로 기존값이 유지되지 않음
=, +=,-=,*=,/=,%=
13 if구문의 기본적인 구조에 대해서 설명할 수 있다. if의 (조건식)을 설정하여 {}안에 조건식이 참일 때 실행하며 거짓일 때 실행하지 않음.
if(i<5) {
console.log("확인");
}
14 if구문의 3종류에 대해서 각각의 차이점을 설명할 수 있다. 1. if문
조건문이 ture면 실행 false면 실행하지 않는 구조
let i = 3;
if(i<5) {
console.log("확인");
}
2. if-else문
조건이 거짓일 때 실행해야 하는 문장을 else 다음에 씀
let i = 4;
if(i<5) {
console.log("맞다");
}
else {
console.log("아니다");
}
3.if-else if-else문
여러 개 조건 중 하나 선택
let i = 6;
if(i>5) {
console.log("5보다 큼");
} else if(i>3) {
console.log("3보다 큼");
}else{
console.log("그외 작음");
}
15 스위치문에 대해서 설명할 수 있다.
분기점을 생성하여 제어하는 구문
if는 조건식의 ture, false를 검사하여 동작하지만 switch는 조건값의 일치에 따라 실행됨(정수형, 문자열 등 사용 가능)
switch ("x") {
case("A"):
//표현식
break;
case("B"):
//표현식
break;
defalt:
//표현식
break;
}
16 for에 대해서 설명할 수 있다. 특정 횟수 만큼 반복하는 구문
초기식, 조건식, 증감식으로 구성되어 있음
for(let i=0; i<=3, i++) {
console.log(i);
}
17 foreach에 대해서 설명할 수 있다. 주로 배열의 데이터에서 많이 사용됨.
초기값, 조건식, 증감식이 필요없고 인덱스값이 없어 자동으로 필요변수에 하나씩 담아 사용할 수 있음
let x = [1, 2, 3];
x.forEach(function(eyz)) {
console.log(eyz);
}
18 while문에 대해서 설명할 수 있다. 특정 상황동안 계속적으로 반복하고 싶을 때 사용함.
조건식이 ture일 경우에 계속 반복
while (조건식) {
if(a>10){
break;
}
}
19 do while문에 대해서 설명할 수 있다. 먼저 반복문을 1차 실행한 후에 조건식에 의해 반복 여부를 체크함
let i = 1;
do{
console.log(i);
i++;
} while(i<=5);
20 break 와 continue에 대해서 설명할 수 있다. break: 현재 실행 중인 반복문을 즉시 종료시킴
for(let i =1; i<=5; i++) {
if(i==3) {
break;
}
console.log(i);
}
contunue: 현재 실행 중인 반복문을 중단하고 다음 반복문을 계속 수행
for(let i =1; i<5; i++) {
if(i==3) {
continue;
}
console.log(i);
}
21 배열을 선언하는 2가지 방법에 대해서 설명할 수 있다. 배열의크기는 0이상의 정수이며 변경할 수 없음, 배열의 인덱스는 0부터 시작
1.생성자 객체 생성
let x = new Array(1,2,3);
2.리터럴 선언
let fruits = ["apple", "banana"];
22 일반변수와 배열변수의 차이점에 대해서 설명할 수 있다. 일반변수: 하나의 값만 저장할 수 있으며 변수명으로 직접 접근
배열변수: 여러 개의 값을 저장 할 수 있으며 인덱스를 사용하여 특정 요소에 접근
23 배열을 초기화 하는 방법에 대해서 설명할 수 있다. 1.선언과 동시에 초기화
let num = [1,2,3];
2.for문을 이용한 초기화
num[0] = 1;
for(let i=0; i<5, i++) {
num[i] = i + 1;
}
24 객체의 개념을 설명하고 정의할 수 있다. 실제 생활에 존재하는 모든 사물을 속성과 메서드로 구현한 것
let x = new myCar();
25 객체멤버에 접근하는 방법을 설명할 수 있다. 변수 접근: 객체명.변수 -> myCar.color = 'blue';
함수 접근: 객체명.함수 -> myCar.break();
26 메서드에 대해서 설명할 수 있다. 객체 내부에 정의된 함수로 객체의 행동 및 기능을 정의하고 구현하는 역할을 함
27 메서드의 작성방법에 대해서 설명할 수 있다. 메서드명: function() {
함수구문;
}
28 전역변수와 지역변수의 차이점에 대해서 설명할 수 있다. 전역변수: 프로그램 전체에서 접근할 수 있는 변수로 모든 함수와 블록 접근 가능
지역변수: 특정 함수 또는 블록 내에서만 접근할 수 있는 변수로 블록외부에서는 접근할 수 없음
(블록 스코프: let, const)
29 매개변수에 대해서 설명할 수 있다. 함수나 메서드의 입력값을 담는 변수로 함수 내부에서 사용됨
function x(a,b) {
return a*b
}
30 this를 설명할 수 있다. 현재 자기 자신의 객체를 호출(참조)할 때 사용함
사용목적:
1.객체 멤버: 객체 내에서 객체의 현재 속성, 현재 메서드를 참조
2.생성자 함수: 새로 생성된 객체 참조
3.DOM 이벤트 핸들러: this는 이벤트가 발생한 요소를 가르킴

'웹프로그래밍 > JavaScript' 카테고리의 다른 글

프로그래밍 언어 응용 32일차 (24/12/24)  (0) 2024.12.24
프로그래밍 언어 응용 30일차 (24/12/20)  (6) 2024.12.20
프로그래밍 언어 응용 29일차 (24/12/19)  (4) 2024.12.19
프로그래밍 언어 응용 28일차 (24/12/18)  (0) 2024.12.18
프로그래밍 언어 응용 27일차 (24/12/17)  (0) 2024.12.17

'웹프로그래밍/JavaScript'의 다른글

  • 현재글프로그래밍 언어 응용 31일차 (24/12/23)

관련글

티스토리툴바