함수 선언

함수 선언 구문
function add(num0, num1) {
	return num0 + num1;
}

 

 변수에 함수 할당
let sub = function(num0, num1) {
	return num0 - num1;
}

 

 블록 본문을 가진 화살표 함수
let mul = (num0, num1) => {
	return num0 * num1;
}

 

간결한 본문을 가진 화살표 함수
let div = (num0, num1) => num0 / num1;

 

생성자 사용
let remainder = new Function('num0', 'num1', 'return num0 % num1;');

 

 

함수 호출

함수 호출
add(100, 50);
sub(100, 50);
mul(100, 50);
div(100, 3);
remainder(100, 3);

 

즉시 함수 호출(IIFE)
(function(num0, num1) {
	let result = 1;
    for(let i=0; i<num1; i++) 
    	result *= num0;
    console.log(result);
})(1000, 20);
저작자표시

'JS' 카테고리의 다른 글

전개 연산자 ...  (0) 2024.03.10
가변 매개변수 ...  (0) 2024.03.10
alert  (0) 2024.03.10
addEventListener - keydown  (0) 2024.03.10
random  (0) 2024.03.10

설명

alert 함수는 웹 브라우저에서 간단한 경고창을 표시하는 데 사용된다.

사용자에게 메시지를 표시하고 OK 버튼을 클릭하면 창이 닫히게 된다.

일반적으로 디버깅이나 사용자 인터페이스 메시지를 표시할 때 사용된다.

 

예를 들어

alert('안뇽');

이 코드는 '안뇽' 이라는 메시지가 포함된 경고창을 표시한다.

저작자표시

'JS' 카테고리의 다른 글

가변 매개변수 ...  (0) 2024.03.10
function  (0) 2024.03.10
addEventListener - keydown  (0) 2024.03.10
random  (0) 2024.03.10
array  (0) 2024.03.10 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.addEventListener('keydown', function (e) {
                console.log('입력 키 코드: ' + e.keyCode);
                switch (e.keyCode) {
                    case 37:
                        console.log('방향키 좌 입력');
                        break;
                    case 39:
                        console.log('방향키 우 입력');
                        break;
                    case 38:
                        console.log('방향키 상 입력');
                        break;
                    case 40:
                        console.log('방향키 하 입력');
                        break;
                }
            });
        });
    </script>
</head>

<body>

</body>

</html>
저작자표시

'JS' 카테고리의 다른 글

function  (0) 2024.03.10
alert  (0) 2024.03.10
random  (0) 2024.03.10
array  (0) 2024.03.10
addEventListener  (0) 2024.03.10

설명

Math.random()은 JavaScript에서 난수를 생성하는 함수이다.

이 함수는 0 이상 1 미만의 난수를 반환한다.

 

[예]

1 이상 10미만의 난수 생성 

const random = parseInt(Math.random() * 10 + 1);
저작자표시

'JS' 카테고리의 다른 글

alert  (0) 2024.03.10
addEventListener - keydown  (0) 2024.03.10
array  (0) 2024.03.10
addEventListener  (0) 2024.03.10
control statements  (0) 2024.03.07

설명

JavaScript를 사용하여 배열을 다룰 수 있다.

 

문자열 인덱스 접근

const str='안녕하세요';
console.log(str[2]);    // 문자열의 세번째 문자인 '하'를 콘솔에 출력

 

 

배열과 배열 관련 작업

const nameArr = ['홍길동', '임꺽정', '장길산', '일지매'];

// 배열의 길이
console.log("배열의 길이: " + nameArr.length);
// 인덱스 접근
console.lop(nameArr[3]);
// 배열의 끝에 추가
nameArr.push('이채림');
// 배열 10번째 인덱스에 '백억' 추가, 중간에 비어진 인덱스가 생기고, 해당 인덱스는 undefined
nameArr[10] = '백억';
const array = [3.14, '홍길동', 10, ['a', 'b', 'c']];

// push 처럼 가장 뒤에 추가
array[array.length] = '사과';   

// 인덱스 제거 - 인덱스 2 위치에서 1 개 제거
array.splice(2, 1);         

// 인덱스 추가 - 1의 위치에 '수박' 추가
array.splice(1, 0, 수박');

// 특정 값의 인덱스 위치
console.log('홍길동의 위치는 ' + array.indexOf('홍길동'));

 

 

typeof

console.log(typeof []);         // object

const array = ['사과', '바나나', '망고', '딸기'];
console.log(typeof array);      // object

자바스크립트에서 배열은 사실상 객체이다. (빈 배열도)

배열은 Array 객체의 인스턴스이며, Array 객체는 Object 객체를 상속받는다.

따라서 배열도 객체이지만, 배열의 특별한 동작과 메서드를 사용할 수 있습니다.

 

저작자표시

'JS' 카테고리의 다른 글

addEventListener - keydown  (0) 2024.03.10
random  (0) 2024.03.10
addEventListener  (0) 2024.03.10
control statements  (0) 2024.03.07
type conversion  (0) 2024.03.07

설명

이벤트를 대기하고, 해당 이벤트가 발생했을 때 실행할 작업을 설정하는 JavaScript의 메서드이다.

 

 

addEventListener()

target.addEventListener(type, listener [, options]);
  • target : 이벤트를 수신할 대상, 일반적으로 DOM 요소이며, 이벤트가 발생할 때 해당 요소에서 이벤트를 감지한다.
                  [예] document, widow, 또는 HTML 요소
  • type : 이벤트의 유형을 나타내는 문자열, 이벤트의 이름을 지정한다.
                  [예] click, mouseover, keydown
  • listener : 이벤트가 발생했을 때 실행할 함수 또는 이벤트 핸들러
                  이벤트 핸들러 | 이벤트가 발생했을 때 실행되는 코드 블록d

 

DOMContentLoaded 이벤트

document.addEventListener('DOMContentLoaded', () => { });

HTML 문서의 초기 구성이 완료되고 모든 요소가 로드되었을 때 발생한다.

 

 

document.getElementById()

DOM(Document Object Model)에서 특정 ID를 가진 HTML 요소를 찾는 JavaScript 함수이다.

이 함수는 문서 내의 특정 ID를 가진 요소에 접근하여 해당 요소를 반환한다.

 

[예]

<div id="myDiv">Hello, world!</div>
const myElement = document.getElementById('myDiv');

'myElement' 변수에는 ID가 'myDiv'인 <div> 요소가 할당된다.

이렇게 찾은 요소를 이용하여 속성을 변경하거나 이벤트를 추가하는 등의 작업을 수행할 수 있다.

 

 

document.querySelector()

CSS 선택자를 사용하여 특정 요소를 선택하는 JavaScript 함수이다.

선택자 | 해당 요소를 식별하는 데 사용되는 패턴이며, 클래스 이름, ID, 요소 이름등을 지정할 수 있다.

 

[예]

const element = document.querySelector(selector);
  • selector
    • 클래스 이름 : .classname
    • ID : #idname
    • 요소 이름 : elementname

 

DOM 요소 children 속성, length 속성

let $imageContainer = document.querySelector('.image-container');
let len = $imageContainer.children.length;
for(let i=0;i<len;i++){
                    let $img = $imageContainer.children[i];
                    let left = initX + (i*offsetX);
                    $img.style.left = left + 'px';
                    $img.style.top = initY + 'px';
}

 

 

textContent

DOM 요소의 텍스트 내용을 나타내는 속성이다.

이 속성을 사용하면 HTML 요소의 내용을 변경할 수 있다.

 

 

getBoundingClientRect()

DOM 요소의 크기와 위치에 대한 정보를 제공하는 메서드이다.

이 메서드를 호출하면 해당 요소의 경계 상자 정보가 반환된다.

경계 상자 정보 | 요소의 상대적인 위치, 너비, 높이, 상단, 하단, 좌측, 우측의 좌표 등이 포함

 

 

setAttribute()

HTML 요소의 속성을 설정하거나 변경하는 메서드이다.

 

저작자표시

'JS' 카테고리의 다른 글

random  (0) 2024.03.10
array  (0) 2024.03.10
control statements  (0) 2024.03.07
type conversion  (0) 2024.03.07
data type  (0) 2024.03.07

설명

제어문은 프로그램의 실행 흐름을 제어하고 조건에 따라 코드 블록을 실행하는 데 사용된다.

 

 

if문

const date = new Date();       // 현재 날짜와 시간을 나타내는 'Date' 객체 생성
const hour = date.getHours();  // 'Date' 객체에서 현재 시간(시) 가져옴

if(hour < 12)
	alert('오전');              // alert() : 알림 표시
else
	alert('오후');

 

 

switch문

/*
    propt() 함수  : 사용자로부터 입력 받기
    Number() 함수 : 입력된 문자열을 숫자로 변환
*/
const input = Number(propt('숫자를 입력하세요', '숫자'));

switch(input % 2) {
	case 0:
    	alert('짝수');
        break;
    case 1: 
    	alert('홀수');
        break;
    default:
    	alert('숫자가 아닙니다.');
        break;
}

 

 

삼항 조건 연산자

const input = propt('숫자를 입력하세요.', '');
const number = Number(input);

const result = (number >= 0) ? '0 이상' : '0 미만';
alert(result);

 

 

논리 연산자

true || console.log("1. 실행될까요?");

false || console.log("2. 실행될까요?");

/*
    최종적으로 브라우저 콘솔에는 "2. 실행될까요?" 만 출력
    
    [이유]
    ||(OR 연산자)는 피연산자 중 하나라도 참이면 결과가 참이 되므로
    첫번째가 참이면 두번째는 평가되지 않는다.
    첫번째가 거짓이면 두번째가 평가된다.
    
    따라서, 1줄은 로그가 출력되지 않고, 3줄만 로그가 평가되어 출력됐다.
*/

 

 

for문

const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업'];

/*
	for...in 루프
    : 객체의 속성을 순회할 때 사용, i는 각 요소의 인덱스를 나타냄
*/
for(const i in todos) {
	console.log(`${i}번째 할 일: ${todos[i]}`);
}

/*
	for...of 루프
    : 반복 가능한 객체를 순회할 때 사용, todo는 각 요소 
*/
for(const todo of todos) {
	console.log(`오늘의 할일 : ${todo}`);
}

/*
	일반적인 for 루프
*/
for(let i=0; i<todos.length; i++) {
	console.log(`${i}번째 할 일: ${todos[i]}`);
}

 

 

while문

let i = 0;
while(i < 10) {
	console.log(i);
    i++;
}

 

 

do-while문

let result = 0;
let i = 0;
do {
	result += i;
    console.log("result=" + result);
    i++;
} while(i <= 10);
console.log('누적합 =' + result);

 

 

break문

반복문을 중단하는 데 사용한다.

반복문 내에서 'break' 문이 실행되면 해당 반복문의 실행이 즉시 종료되고, 반복문을 벗어나게 된다.

 

 

continue문

반복문의 현재 반복을 중지하고 다음 반복을 시작한다.

반복문 내에서 'continue' 문이 실행되면 해당 반복에서 'continue' 문 이후의 코드는 실헹되지 않고 다음 반복으로 넘어간다.

저작자표시

'JS' 카테고리의 다른 글

array  (0) 2024.03.10
addEventListener  (0) 2024.03.10
type conversion  (0) 2024.03.07
data type  (0) 2024.03.07
let과 const  (0) 2024.03.07

설명

자바스크립트에서 형변환은 데이터를 다른 데이터 타입으로 변환하는 과정을 말한다.

 

 

명시적 형변환

개발자가 직접 데이터 타입을 변환하는 것을 말한다.

예를 들어, 'Number()', 'String()', 'Boolean()' 등의 내장 함수를 사용할 수 있다.

let num = "42";
num = Number(num);      // 문자열 "42"를 숫자 42로 변환
console.log(num);       // 출력: 42

let str = 123;
str = String(str);      // 숫자 123을 문자열 "123"로 변환
console.log(str);       // 출력: "123"

 

 

parseInt

문자열을 정수로 변환한다. 

이 함수는 문자열의 시작 부분부터 숫자가 나오기 전까지의 문자를 무시하고, 첫번째 숫자부터 정수로 변환한다.

parseInt('123')     // 123
parseInt('12abc')   // 12

 

 

parseFloat

문자열을 부동 소수점 숫자로 변환한다.

이 함수는 문자열을 파싱하고, 소수점 이후의 숫자까지 변환한다.

parseFloat('3.14')      // 3.14
parseFlaot('3.14abc')   // 3.14
저작자표시

'JS' 카테고리의 다른 글

addEventListener  (0) 2024.03.10
control statements  (0) 2024.03.07
data type  (0) 2024.03.07
let과 const  (0) 2024.03.07
error  (0) 2024.03.07

+ Recent posts

티스토리툴바