Javascript26 JAVASCRIPT .setAttribute Javascript의 .setAttribute 메소드는 HTML요소의 속성(attribute)값을 설정하는데 사용된다. 이 메소드를 사용하여 속성을 동적으로 추가하거나 변경 할 수 있다. 아래 예제에서는 요소를 만들고 해당 요소의 class속성을 설정하는 예제를 만들어보겠다. Click me! button을 만들어 주는데 Click me!라는 button이고 id 는 "myButton"을 가지고 있는 button이다. 여기에 Javascript에서 .setAttribute를 사용하여 위에 버튼에 class 속성을 설정하려고 하면 다음과 같이 작성할 수 있다. const button = document.getElmentById("myButton"); button.setAttribute("class", "m.. 2023. 6. 1. JAVASCRIPT Regular expresstion Javascript 에서 Regula Expresstion(이하 정규표현식)은 문자열에 패턴을 매칭시키고 조작하는데 사용된다. E-Mail주소를 검증하려는 경우, 정규표현식을 사용하여 유효한 이메일 주소 패턴을 확인할 수 있다. 아래 예제에서는 이메일 주소의 유효성을 검사하는 정규표현식이다. const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; function validateEmail(email){ return emailRegex.test(email); } //사용 예시 console.log(validateEmail("example@example.com")); //true console.log(validateEmail("invali.. 2023. 5. 31. JAVASCRIPT Promise 프로그래밍에서 Promise는 비동기 작업을 처리하기 위한 개념이다. Promise는 주로 JavaScript에서 주로 사용되며, 다른 프로그래밍 언어에서도 유사한 개념을 가지고 있을 수 있다. Promise는 주로 네트워크 요청, 파일 로딩, 데이터베이스 작업 등과 같은 비동기 작업을 처리할 때 사용된다. 비동기 작업은 일반적으로 시간이 오래 걸리는 작업이거나 외부 자원에 의존하는 작업을 의미한다. Promise를 사용하면 이러한 비동기 작업을 보다 효율적이고 간결하게 다룰 수 있다. Promise객체는 세 가지 상태를 가질 수 있다. Pending(대기 중) 비동기 작업이 아직 완료되지 않은 상태이다. Promise가 처음 생성되면 대기 중 상태입니다. Fulfilled(이행 됨) 비동기 작업이 성공.. 2023. 5. 31. JAVASCRIPT PreventDefault() preventDefault()는 JavaScript에서 이벤트의 기본 동작을 취소하는 메소드이다. 이 메소드를 호출하면 이벤트의 기본 동작이 실행되지 않고, 대신에 사용자가 지정한 동작이 실행된다. HTML요소들은 기본적으로 여러 가지 이벤트를 가지고 있는데 예를들어, 태그의 경우 클릭 이벤트가 발생하면 해당 링크로 이동하는 기본 동작이 발생하는데 이때, preventDefault()를 사용하면 링크로의 이동이 취소 된다. preventDefault()메소드는 주로 이벤트 핸들러 함수 내에서 사용된다. 이벤트 핸들러함수는 이벤트가 발생했을 때 실행되는 함수이다. 이벤트 핸들러 함수내에서 preventDefault()를 호출하면 이벤트의 기본 동작이 막히게 된다. 아래 예시를 보자면👉 링크 위의 예시에서는.. 2023. 5. 30. JAVASCRIPT Fetch() fetch 함수는 주로 웹 개발에서 사용되는 함수로, 네트워크를 통해 데이터를 가져오는 역할을 한다. 주로 HTTP 요청을 보내고 응답을 받아오는 데 사용된다. fetch함수는 브라우저의 내장 API로 제공되는데, 이 API를 사용하여 비동기적으로 데이터를 가져올 수 있다. fetch함수는 기본적으로 Promise를 반환한다. Promise는 비동기 작업이 완료되었을 때 결과를 처리학 위해서 사용되는 객체이다. fetch함수가 Promise를 반환하므로 우리는 then()메소드를 사용하여 데이터를 처리하거나, async/await 구문과 함게 사용할 수 있다. 간단한 예로 fetch 함수를 사용하자면 JSON데이터를 가져오는 기본적인 fetch요청인데 fetch("https://api.example.co.. 2023. 5. 30. JAVASCRIPT Callback() 함수 Javascript에서 callback()함수는 프로그래밍에서 다른 함수에 전달되어 실행되는 함수이다. 함수전달 callback()함수는 다른 함수에 인자로 전달된다. 이때, 전달되는 함수는 일반적으로 호출되는 함수에 의해 실행된다. callback()함수는 함수 자체가 값으로 취급되는 "일급함수"의 개념에 기반한다. 비동기처리 callback()함수는 주로 비동기 처리에서 사용된다. 비동기 작업은 결과를 기다리지 않고 다음 코드를 실행하는 것을 의미한다. 예를들어 파일을 읽거나 네트워크 요청을 보내는 작업은 시간이 오래 걸릴 수 있으므로, 비동기 방식으로 처리한다. 이때, 작업이 완료되면 callback()함수가 호출되어 결과를 처리한다. 이벤트처리 callback()함수는 이벤트 기반 프로그래밍에서도.. 2023. 5. 26. JAVASCRIPT Canvas Canvas는 JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기 위한 요소이다. 이는 주로 2D그래픽에 중점을 두고 있다. 캔버스는 직사각형을 기본으로 제공하며 많은 기능들을 제공하지만 사용하는 것이 간단하지 않은 편이다. 캔버스를 생성할 때에는 HTML 문서 내에 태그를 추가하며 이 때 width와 height 속성을 지정하여 캔버스의 크기를 설정할 수 있다. 캔버스에 그림을 그리기 위해서는 캔버스에 그림을 그릴 "도화지" 역할을 하는 context 객체를 생성해야 한다. 생성 할때는 캔버스의 getContext()메서드를 이요하면된다. 주로 2d그래픽을 다룰 때는 getContext('2d')메소드를 사용한다. 2023. 5. 3. JAVASCRIPT 대입연산자 대입연산자(assignment operator) 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다. 또한 앞서 살펴본 산술 연산자와 결합한 다양한 복합 대입 연산자가 존재한다. 대입 연산자 설명 = 왼쪽 피연산자ㅔ 오른쪽 피연산자의 값을 대입함. += 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입함. -= 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입함. *= 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입함. /= 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입함. %= 왼쪽 .. 2023. 4. 24. JAVASCRIPT 논리연산자 논리연산자(logical operator) 논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환한다. &&연산자와 ||연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다. !연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에 왼쪽이다. 논리 연산자 설명 && 논리식이 모두 참이면 참을 반환함. (논리 AND 연산) ! 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산) 다음은 논리 연산자의 모든 동작의 결과를 보여주는 진리표(truth table)이다. A B A && B A || B !A true true true true true true false false true f.. 2023. 4. 24. 이전 1 2 3 다음
