TIL 23.10.05

황은하·2023년 10월 5일
TIL
0

TIL

목록 보기
92/146

📌Today I Learned

JavaScript

ex06_scope

변수의 스코프

여러가지 함수들...
배열

변수 스코프

  • 변수 생명주기
  • 변수 영역

자바

  1. 멤버 변수 > 클래스 전역
  2. 지역 변수 > 메소드 or 제어문 전역

자바스크립트

  1. 전역 변수 > 한 페이지 > 변수 선언문 실행(생성) ~ 페이지 종료
  2. 지역 변수 > 함수 or 제어문 전역
  • 자바스크립트의 지역 변수는 함수 단위 지역 변수이다.
  • 함수만 자기 영역으로 인식한다. > 함수 스코프
  • 제어문은 영역으로 인식을 못한다.
// *** var 키워드 없이 선언한 변수 > 모두 전역변수이다.
var num4 = 400; // 전역 변수
num5 = 500; // 전역 변수

// 쓰면 안되는 코드
function m2() {
  var num6 = 600; // 지역 변수
  num7 = 700; // 지역 변수(x) > 전역 변수(O)
}

ex07_casting

내장 함수, Built-in Function

형변환

  1. number parseInt(value): value를 정수로 변환
  2. number parseFloat(value): value를 실수로 변환
var n1 = 3.99;
console.log(parseInt(n1)); // 실수 > 정수

var n2 = "300";
console.log(n2);
console.log(n2, typeof n2);
console.log(parseInt(n2), typeof parseInt(n2)); // 문자열 > 정수

// 맨 처음이 숫자라면, 다음 문자를 만날 때까지의 숫자만 잘라서 형변환을 해준다.

//NaN
// boolean isNaN(value)
// - value가 숫자가 아닙니까?
// 1. 네 > 숫자가 아님
// 2. 아니오 > 숫자임

// 사용자 나이 입력
var age = "20";

console.log(isNaN(age)); // false > 숫자임

if (isNaN(age)) {
  console.log("나이가 올바르지 않습니다.");
} else {
  console.log("올바른 나이~");
}

ex08_string

문자열 함수

var txt = "Hello~ Hong~";
  1. 문자열 길이
    .length
console.log(txt.length); // 프로퍼티(Property)
  1. 검색
  • .indexOf()
  • .lastIndexOf()
console.log(txt.indexOf("~")); // 5
console.log(txt.indexOf("~", 6)); // 11  시작위치를 6으로 지정
console.log(txt.lastIndexOf("~")); // 11
console.log(txt.lastIndexOf("~", 10)); // 5
  1. 대소문자 변환
  • .toUpperCase()
  • .toLowerCase()
console.log(txt.toUpperCase());
console.log(txt.toLowerCase());
  1. 추출
  • .substring()
  • .substr()
  • .charAt()
  • .charCodeAt()
console.log(txt.substring(2, 8)); // llo~ H
console.log(txt.substring(2)); // llo~ Hong~

console.log(txt.substr(2, 4)); // llo~  4는 글자 개수
console.log(txt.substr(2)); // llo~ Hong~

console.log(txt.charAt(2)); // 문자 추출
console.log(txt.charCodeAt(2)); // 문자 코드값 추출
  1. 치환
  • 처음 만나는 요소만 치환(반복X)
  • 정규 표현식(반복O)
  • .replace()
txt = "Hello~ Hong~ Bye~ Hong~";
console.log(txt.replace("Hong", "Lee"));
  1. 공백 제거
  • .trim()
  • .trimLeft()
  • .trimStart()
  • .trimRight()
  • .trimEnd()
txt = "      하나      둘      셋     ";
console.log("@" + txt.trim() + "@");
  1. 분할
  • .split()
txt = "홍길동,아무개,하하하,호호호,후후후";
console.log(txt.split(","));
  1. 검색
  • .startsWith()
  • .endsWith()
txt = "홍길동";
console.log(txt.startsWith("홍"));
console.log(txt.endsWith("동"));
  1. 문자 붙이기
  • .padStart()
  • .padEnd()
  • .repeat()
txt = "1";
console.log(txt.padStart(3, "0"));
console.log(txt.padEnd(3, "A"));
console.log(txt.repeat(3, txt));

ex09_date

자바스크립트는 클래스가 없다.
내장 객체라는 것을 제공 > 객체 생성

날짜/시간

  • Date 객체

현재시각

var now = new Date(); // new 생성자함수();
console.log(now);
console.log(now.toString());
console.log(typeof now); // object

요소 추출

// - c.get(Calendar.YEAR)
console.log(now.getYear()); //123
console.log(now.getFullYear()); //2023
console.log(now.getMonth()); //9(0부터)
console.log(now.getDate()); //5
console.log(now.getDay()); //4(일(0)~토(6))
console.log(now.getHours()); //10
console.log(now.getMinutes()); //19
console.log(now.getSeconds()); //30
console.log(now.getMilliseconds()); //0.316
console.log(now.getTime()); //1696468770316  틱(ms)  기준: 1970-01-01 00:00

출력 > %tF, %tT, %tA

console.log(now.toString());
console.log(now.toLocaleString()); //브라우저 설정에 따라 바뀜
console.log(now.toLocaleDateString()); //2023. 10. 5.
console.log(now.toLocaleTimeString()); //오전 10:22:32

특정 시각 만들기

var christmas = new Date(); //현재시간 만들기

//날짜/시간 수정하기
christmas.setFullYear(2023);
christmas.setMonth(11);
christmas.setDate(25);

christmas.setHours(12);
christmas.setMinutes(0);
christmas.setSeconds(0);

console.log(christmas.toLocaleString());

// var birthday = new Date(1995, 10, 9);
var birthday = new Date(1995, 10, 9, 12, 30, 0);

연산

//시각 - 시각
//자바 - 틱값 구해서 뺸 뒤 계산
console.log(christmas - now); //SQL(일), JavaScript(ms)

console.log((christmas - now) / 1000 / 60 / 60 / 24); // 약 81일

console.log((now - birthday) / 1000 / 60 / 60 / 24); // 약 10191일

//시각 + 시간
//시각 - 시간
//오늘 만난 커플이 100일 기념일?
var ani = new Date();
ani.setTime(now.getTime() + 100 * 24 * 60 * 60 * 1000);

console.log(ani.toLocaleString());

ex10_array

자바스크립트 배열

  • Array(외형) + ArrayList(성질 - 길이 가변, 자료형 Object)
var nums = new Array();
nums[0] = 100;
nums[1] = 200;
nums[2] = 300;

 // 초기화 리스트
var nums3 = [100, 200, 300]; //*** 주로 사용

// 빈 배열
var nums5 = []; //*** 가장 많이 사용하는 방식

var list2 = [];
for (var i = 3; i <= 3 * 10; i += 3) {
  list2.push(i); //stack.push(값), list.append(값) 과 같다
}
console.log(list2);
console.log(list2.pop()); // stack.pop(값)
console.log(list2);

ex11_bom

CSS > 선택자(HTML 태그 검색) > 접근 > 조작
JavaScript > HTML 태그 검색 > 접근 > 조작

HTML 계층 구조

  • Tree 구조

1. BOM, Browser Object Model

  • 초창기 모델
  • 현재까지 계속 사용
  • 선택적 모델 > 계층 구조에 일부 태그만 포함
  • 계층 구조에 포함되지 않는 태그는 조작 불가능
  • 이미지, 링크, 폼태그 > 조작 가능
  • 태그의 name을 사용해서 검색
  • id, class는 인식 불가능

2. DOM, Document Object Model

  • 발전 모델
  • 현재까지 계속 사용
  • 전역 모델 > 계층 구조에 모든 태그가 포함
  • 모든 태그 조작 가능

BOM/DOM > 태그 접근 > 계층 구조 접근

  • window: 윈도우 객체 > 현재 문서가 실행되는 브라우저 창 참조
  • document: 문서 객체 > 현재 문서 참조

window, document - 유일
그 아래 - 유일하지 않음 -> 이름 꼭 필요하다.

ex12_event

JavaScript Event

  • 사건
  • 객체(태그 포함)에서 발생하는 사건
  • 언제 발생할지 예측 불가능

JavaScript Event Handling

  • 이벤트 처리/등록
  • 언제 발생할지 예측 불가능한 사건에 대비해서 미리 처리할 코드를 준비
    -> 언젠가 사건이 발생하면 준비해놓은 코드를 자동으로 실행할 수 있다.
    -> 이벤트 처리
  • 오라클 > 트리거

이벤트 등록

  • onXXX 속성(프로퍼티) 제공
  1. 정적
  • HTML 태그에 적용
<form name="form1">
  <input type="text" name="txt1" />
  <input
      type="button"
      value="버튼"
      name="btn1"
    onclick="window.document.form1.txt1.value = '홍길동';"
  />
  <input type="button" value="버튼" name="btn2" onclick="m2();" />
  <input type="button" value="버튼" name="btn3" />
</form>

<script>
  function m2() {
    window.document.form1.txt1.value = "아무개";
  }
<script>
  1. 동적
  • 자바스크립트에서 사용
if (new Date().getSeconds() % 2 == 0) {
  window.document.form1.btn3.onclick = m3;
}

// 동적
function m3() {
  window.document.form1.txt1.value = "하하하";
}

ex13_mouseevent

마우스 관련 이벤트

  • onmouseXXX

  1. onmouseover/onmouseenter
  • 해당 객체 영역에 마우스 커서가 진입하는 순간 발생
  1. onmouseout/onmouseleave
  • 해당 객체 영역에서 마우스 커서가 빠져나가는 순간 발생
  1. onmousedown
  • 해당 객체 영역에서 마우스 버튼을 누르는 순간 발생
  1. onmouseup
  • 해당 객체 영역에서 마우스 버튼을 떼는 순간 발생
  1. onmousemove
  • 해당 객체 영역에서 마우스 커서가 움직일 때 발생

어떤 버튼? > event 객체

1: 왼쪽
2: 오른쪽
3: 왼쪽 + 오른쪽
4: 가운데
5: 왼쪽 + 가운데
6: 오른쪽 + 가운데
7: 왼쪽 + 오른쪽 + 가운데

message(event.buttons);

if (event.buttons == 2) {
  alert("우클릭 금지");
}

마우스 커서 좌표

  1. x, y
  • 문서 좌측 상단을 기준
  • 비표준(MS) > 비권장
  1. clientX, clientY ****
  • 문서 좌측 상단을 기준
  • 표준 > 권장
  1. screenX, screenY
  • 모니터 좌측 상단을 기준
  1. offsetX, offsetY ****
  • 이벤트 객체의 좌측 상단을 기준

onclick > 마우스 이벤트가 아니다. > 마우스 관련 작업 금지

ex14_keyevent

키 관련 이벤트

  • onkeyXXX
  1. onkeydown (보편적인 사용)
  • 키를 눌렀을 때 발생
  • 입력된 (물리)키는 구분 가능
  • 입력된 문자는 구분이 불가능
  • 물리키를 구분하는 용도
  • 모든 키에 반응(중요)
    -> 많이 쓴다.
  • 방근 누른 키값을 반영할 수 없다.
  1. onkeyup (실시간 확인 시 사용)
  • 키를 뗐을 때 발생
  • 방근 누른 문자가 필요한 업무에 활용
  1. onkeypress
  • 키를 눌렀을 때 발생
  • 입력된 문자를 구분 가능
  • 문자키(정확히는 아스키코드)에만 반응(***)

ex15_attribute

HTML 속성 제어하기

  1. HTML의 대부분의 속성은 JavaScript에서 동일한 이름의 프로퍼티로 제공한다.
  2. HTML 속성명이 복합어 > JavaScript > 캐멀표기법으로 제공
  3. 플래그 타입의 속성 > boolean 값으로 조작
  4. 열거형 속성/색상 속성 > 문자열로 조작

하나의 버튼 > On/Off > 토글 버튼(Toggle Button), 스위치

ex16_child

부모창의 window 객체!!

  • 예약어 > opener > 부모창의 window 참조 객체

ex16_idcheck

function m1() {
  // 아이디를 부모 페이지에 옮겨 붙이기
  opener.document.form2.txtid.value = txtid.value;

  // 해당 자식 페이지 닫기
  window.close();
}

ex16_window

window.open(URL, name, options)

  1. URL: 새 창의 URL
  2. name: 새 창 이름
  3. options: 새 창 옵션들

본인 창 닫기

window.close();

자식 창 닫기

child.close();

자식 창 접근하기

var child;
child = window.open(
  "ex16_child.html",
  "child",
  "width=500 height=300 left=0 top=0"
);
child.document.form1.cbtn1.value = "클릭";

ex17_screen

screen 객체

  • window > screen
  • 화면 정보 제공
//현재 보고 있는 화면의 크기 > 모니터 해상도
console.log(window.screen.availHeight); // 1040

ex18_location

ex19_history

profile
황은하
차근차근 하나씩
이전 포스트

TIL 23.10.04

다음 포스트

TIL 23.10.06

0개의 댓글