Javascript

웹 페이지를 만들기 위해 사용하는 프로그래밍 언어
  • HTML 컨텐츠 변경 가능
  • HTML 속성 값 변경 가능
  • CSS 변경 가능
  • HTML 요소 숨김 가능
  • HTML 요소 표시 가능

 

<script> 태그

  • HTML에서 Javascript 코드는 <script> 태그 사이에 삽입
  • <head>와 <body> 태그 어디든 삽입 가능

<body> 내에서 사용

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

<head> 내에서 사용

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  console.log("Hello");
}
</script>
</head>
<body>

<h2>Demo JavaScript</h2>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

외부 자바스크립트

  • 외부 파일을 만들어 사용 가능
  • <script> 태그 내 src 속성에 파일 경로 추가해주면 연결됨
  • HTML과 코드를 분리해서 가독성 증가
  • 유지보수하기 쉬워짐
  • 캐시된 js 파일은 페이지 로드 속도를 높임

 

출력

  • innerHTML을 사용하여 HTML 요소에 쓰기
    • document.getElementById(id) 메서드를 활용
  • document.write()을 사용하여 HTML 출력
  • window.alert()을 사용하여 알림 상자에 출력
  • console.log()을 사용하여 브라우저 콘솔에 출력

 

💡 function과 method의 차이

  • function: 독립 실행이 가능한 코드
  • method: 소유되어 있는 실행 코드

alert() ➡️ window 객체가 소유주 ➡️ 메서드

console.log() ➡️ log는 console 객체가 소유주 ➡️ 메서드

 

시험보는 것도 아니고 제대로 안 부른다고 뭐라하는 사람도 없기에 알고만 있기 ! ~

 

변수

데이터를 저장하기 위한 컨테이너

키워드

  •  var
    • 값이 변경되는 경우 사용
    • 재선언 가능
    • 글로벌 범위
    • 웬만하면 사용 X
  • let
    • 값이 변경되는 경우 사용
    • 블록 범위 ({})
    • 재선언 불가능
  • const
    • 상수
    • 값을 변경하지 않아도 되는 경우 사용
    • 블록 범위 ({})
    • 재선언 불가능
    • 선언과 동시에 값 할당해줘야 함

변수 선언

  • 할당된 값이 없으므로 undefined
var name;
let age;
  • 선언과 동시에 값 할당
let name = "철수";

 

상수

  • const 키워드 사용

📍 객체/배열에서의 상수

  • 객체/배열에서 상수로 선언한다는 의미는 원본 객체/배열의 주소가 바뀌지 않는다는 것
  • 객체/배열의 요소는 바꿀 수 있음!
const cars = ["Saab", "Volvo", "BMW"];

cars[0] = "Toyota";

cars.push("Audi");

 

데이터 타입

String Number Binin Boolean
Undefined Null Symbol Object

❗️ let a = null; 코드를 typeof 메서드로 출력하면 object 타입으로 출력됨

➡️ 초기 js 엔진 오류(안 고쳐짐; ㅎ)

 

함수

  • function 이름 () 로 정의
  • 함수 내부의 코드는 "무언가"가 함수를 호출할 때 실행
    • 이벤트가 발생할 때
    • Javascript 코드에서 호출될 때
    • 자체적으로 호출
function myFunction() {
  let carName = "Volvo";
}

 

객체

데이터 값을 담는 컨테이너

객체 정의

  • 객체 리터럴 사용
const p1 = { name: "김철수" }
  • new 키워드 사용
let p2 = new Object();
p2.name = "김철수";
  • 객체 생성자 사용
function Person(name) {
	this.name = name;
}
const p3 = new Person("김철수");

// or

const Person = function(name) {
	this.name = name;
}
const p3 = new Person("김철수);

객체 속성

객체의 명명된 값을 의미

  • 접근 방법
    • objectName.properyName
    • objectName["properyName"]
    • objectName[expression]

객체 메서드

객체에서 수행할 수 있는 작업

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
const x = person.fullName(); // 메서드의 반환 값
const y = person.fullName; y는 해당 메서드를 복제, 코드 출력

y(); // 호출하는 형식으로 작성하게 되면 this 의미가 달라짐
// person.fullName()에서 this는 person 객체를 가리키지만 y()에서 this는 window 객체를 가리켜 undefined가 됨

 

Event

브라우저가 수행하는 일이거나 사용자가 수행하는 일
이벤트 의미
onchange HTML 요소가 변경될 때 발생
onclick HTML 요소를 눌렀다가 뗄 때 발생
onmouseover HTML 요소 위로 마우스를 옮길 때 발생
onmousedown HTML 요소 위로 마우스로 누를 때 발생
onmouseup HTML 요소 위로 마우스로 뗄 때 발생
onkeydown 키보드를 누를 때 발생

🎨 그림판 실습

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d"); // 스케치북이라고 생각

      let isDrawing = false; // 그리기 중인지 여부 플래그

      // 마우스를 눌렀을 때 그리기를 시작
      function startDrawing(event) {
        isDrawing = true;
        ctx.beginPath(); // 새로운 경로로 시작
        ctx.moveTo(event.offsetX, event.offsetY); // 마우스를 누른 위치로 시작점을 이동
        // console.log("마우스가 눌려짐");
      }

      // 마우스가 움직일 때 선을 그림
      function draw(event) {
        if (isDrawing) {
          // console.log("마우스가 이동됨", event);
          ctx.lineTo(event.offsetX, event.offsetY); // 현재 마우스 위치까지 선을 연결
          ctx.stroke(); // 연결된 선을 캔버스에 그리기
        }
      }

      // 마우스를 뗐을 때 그리기를 종료
      function stopDrawing() {
        isDrawing = false;
        ctx.closePath(); // 리소스 정리
      }

      // 이벤트 리스너 추가
      canvas.addEventListener("mousemove", draw); // 마우스 이동
      canvas.addEventListener("mousedown", startDrawing); // 마우스 누름
      canvas.addEventListener("mouseup", stopDrawing); // 마우스 뗌
    </script>
  </body>
</html>

➡️ 결과

 

Array(배열)

두 개 이상의 값을 저장할 수 있는 특수 변수
const fruits = ["Banana", "Orange", "Apple", "Mango"];

Array 메서드 종류

메서드 설명
length 배열 길이를 반환
toString() 쉼표로 구분하여 배열 값을 문자열로 반환
join() 구분 기호를 지정할 수 있으며 모든 배열 요소를 문자열로 결합
push() 배열의 마지막에 요소를 추가
pop() 마지막 배열 요소 삭제
shift() 첫 번째 배열 요소를 제거하고 해당 요소 반환
unshift() 배열의 시작 부분에 요소를 추가
concat() 배열들을 연결하여 새 배열 생성, 뒤에 추가할 배열을 소괄호 안에 작성
flatMap() 배열의 모든 요소를 매핑한 다음 배열을 평면화하여 새로운 배열을 생성
splice() 배열에 새 항목을 추가, 요소 제거도 가능
slice() 배열의 일부를 잘라내어 새로운 배열 생성
forEach(callbackFn) 배열 요소마다 한 번식 함수(콜백 함수)를 호출
map(callbackFn) 각 배열 요소에 함수를 수행하여 새로운 배열 생성, 원본 배열 변경 X
filter(callbackFn) 필터링을 통해 새로운 배열 생성
reduce(callbackFn) / 인자: acc, cur, idx, array 각 배열 요소에서 함수를 실행하여 단일 값을 생성
every(callbackFn) 모든 배열의 값이 특정 조건을 만족하는 지 확인
some(callbackFn) 일부 배열의 값이 특정 조건을 만족하는 지 확인

 

Set(세트)

고유한 값의 컬렉션

const fruits = new Set();

Set 메서드 종류

메서드 설명
add() 요소 추가, 동일한 요소 추가 시 첫 번째 요소만 저장
has() 지정된 값이 세트에 존재하는 지 여부 반환
values() 세트의 값을 포함하는 Iteraor 객체 반한
keys() 세트의 값을 포함하는 Iteraor 객체 반한

 

Map(맵)

키-값 쌍을 보관하며 키는 모든 데이터 유형이 될 수 있음

const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Map 메서드 종류

메서드 설명
get() 맵의 키 값 가져옴
set() 요소 추가
size() 요소의 개수 반환
delete() 요소 제거
clear() 모든 요소 제거
has 맵 내에 키가 존재하는 지 여부 반환
entries() [키, 값]을 맵에 포함하는 Iterator 객체 반환
keys() 맵의 키를 포함하는 Iterator 객체 반환
values() 맵의 값을 포함하는 Iterator 객체 반환
728x90
반응형

'LG 유플러스 유레카 SW > JavaScript' 카테고리의 다른 글

[#6] JS BOM&DOM + SpringBoot 실습  (1) 2025.02.03

티스토리툴바