아라의 WWW

어제 동기 비동기에대해 올렸는데요 오늘은 동기 시스템인 자바 스크립트를 비동기로 작업 할 수 있는 콜백함수에 대해 설명하려고 합니다. 콜백함수 콜백함수(callback function)는 다른 함수에서 인자로 전달되어 실행되는 함수입니다. 일반적으로 비동기적인 작업을 처리할 때 사용되는데, 비동기적인 작업은 결과가 나올 때까지 기다리지 않고 다른 작업을 수행하는 것을 말합니다. 콜백함수는 보통 비동기적인 작업이 완료되었을 때 호출됩니다. 예를 들어, 파일을 읽는 함수에서는 파일을 읽는 작업이 완료되면 콜백함수가 호출되어 결과를 전달합니다. 콜백함수는 인자로 결과를 받아들이고, 결과를 이용하여 다른 작업을 수행할 수 있습니다. 콜백함수는 JavaScript에서 매우 중요한 역할을 합니다. JavaScrip..

마무리 문제1 마우스 오버하면 이미지 바꾸기 우선 메인크기를 600으로 만듭니다. 또한 마진을 20px auto를 주어 위아래 20px에 양 옆은 자동으로 맞춰 줍니다. h1은 폰트사이즈 1.5rem을 사용하여 생소한 단어지만 한번이라도 사용하여 익히려고 했습니다. 그리고 중앙에 정렬 하도록 text-align을 center을 줍니다. 그리고 아래로 여백을 줄수 있도록 margin-bottom을 20px를 줍니다. 이미지를 메인 안에서 width이 100%이도록 합니다. 스크립트를 보면 imgMain이라는 상수에 #main > img을 저장하여 사용합니다. 이미지에 마우스를 올리면 이벤트가 움직이도록 imgMain에 대해 addEventListener("mouseover")을 사용하고 imgMain에 s..

자바스크립트에는 문자열과 관련된 함수가 다양하게 있습니다. 원시유형과 객체 단순히 값을 가지고 있을 경우에는 원시유형이라고 하고 프로퍼티와 메서드를 가지고 잇을 때는 객체라고 합니다. 예을 들어 lenght을 사용할때 변수에 문자열을 할당한 후 lenght 프로퍼티를 사용하는데 이때 변수에 lenght을 할ㄹ당하지 않아도 사용할 수잇습니다. 프로퍼티(Property) 객체(Object) 내부의 속성(Attribute)으로, 해당 객체의 상태를 나타내는 값(Value)이나 함수(Function)를 말합니다. 객체는 프로퍼티를 가지며, 이를 통해 객체의 상태와 행동을 제어할 수 있습니다. lenght 포로퍼티 문자열의 길이를 찾을 때 사용하는 프로퍼티입니다. 보통 배열에서도 많이 사용하며 배열의 인덱스의 총..

이번 시험을 보다가 실수 하는 것을 제외하면 전치 후치 연산자가 아직 부족한것 같아 예제를 만들면서 풀어보도록하겠습니다.(풀이는 gpt챗봇을 통해 같이 생각하였습니다.) 전치 연산자 형태 : ++num, --num 문장 안에서 1증가/감소(표현식 평가전 1증가/감소, 표현식에서 증가/감소된 값 사용) 후치 연산자 형태 : num++ ,num-- 문장 수행후에 1증가/감소(표현식 평가후 1증가/감소, 표현식에서는 원래값 사용) 예제 let a = 6; let b = 8; let c = ++a; let d = b++; console.log(a); console.log(b); console.log(c+d); console.log(a+b); 이때 a는 6, b는 8, c+d는 15이며 a+b는 16입니다. 이때..

오늘 배운 자바스크립트를 정리해볼 예정입니다! 자바스크립트 1. 함수 유형 : 객체리터럴 함수 { function func(num, name, com){ this.num = num; this.name = name; this.com = com; } func.prototype = { result1: function(){ document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`); }, result2: function(){ document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`); }, result3: function(){ document.write(`${this.num}. ${this.name}가 $..

오늘은 주관식 정답 판별하는 문제를 만들어 보았습니다. 오늘은 사용자가 답을 직접 적고 정답의 유무를 판별 하는 페이지를 만들어 보겠습니다. html의 구조와 css는 어제 와 비슷해서 올리지는 않았습니다. 오늘은 자바스크립트 위주로 설명드릴려고합니다. 현재 페이지는 사용자가 답을 적으면 답을 적는 박스와 버튼이 사라지면서 답과 팁이 나오고 강아지의 표정이 바뀌는 페이지입니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 jo0132@naver.com 이렇게 코딩합니다. 그중 javascript를 따로 이야기해보겠습니다. const quizWrap = document .querySelector(".quiz__wrap") const quizTitle = quizWrap .querySelector..

오늘은 강아지가 나오는 퀴즈화면을 만들어 보았습니다. reset.css 리셋은 먼저 제가 제작하려는 사이트들의 기본 셋팅을 의미합니다. 이번에는 csss파일로 만들어 제작하였습니다. @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/elice/EliceDigitalBaeum.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; columns: #222; } ..

01. 변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법입니다. { let x = 100, y = 200, z = "javascript" console.log(x, y, z) } 100 200 javascript 02. 상수 : 데이터 불러오기 상수 안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y = 200, z = "javascript" console.log(x, y, z) } 100 200 javascript 03. 배열 : 데이터 불러오기 배열 안에 저장된 데이터를 불러오는 방법입니다. { const arr = [100, 200,"javascript"]; console.log(arr[0], arr[1], arr[2]); } 100 200 javascrip..

01. if문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. if(0){ document.write("실행되었습니다.(true)") } else { document.write("실행되었습니다.(false)") } false 조건문에 들어간 데이터가 형식에 따라 다르게 출력됩니다. false : 0, null, undefined, false, ""(빈문자열) true : 1, 2, 3, "0", "1", "abc", [], {}, true (0을 제외한 숫자와 문자, 배열, 객체, true값은 true) 02. if문 생략 if으로 작업할때 {}생략하여 출력할 수 있습니다. { const num = 100; ..

마무리 문제1(숫자를 받아 양수,음수,0인지 판단하고 창에 표시) 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 면환합니다. (프롬프트 창에 입력한 내용잉 숫자가 아니면 parseInt()함수는 NaN을 반환합니다.) 반환값이 숫자일 경우에만 함수를 실행합니다. See the Pen 2023.02.28_문제1 by jo0132 (@jo0132) on CodePen. 해설 먼저 ParseInt 함수(숫자가 아닐 경우 nan을 반환함)로 수를 받아 상수 number로 선언하면서 시작합니다. !isNaN()(매개변수가 숫자인지 검사하는 함수)로 숫자인지 검사후 ispositive()(양수인지 확인하는 함수..

자바스크립트는 함수형 프로그래밍 언어로, 함수가 중요한 역할을 합니다. 함수는 function 키워드를 사용하여 정의할 수 있습니다. 01. 선언적 함수 선언적 함수(declarative function)는 function 키워드를 사용하여 함수를 선언하는 방식입니다. 함수의 이름과 매개변수를 괄호 안에 넣고, 함수 본문을 중괄호로 감싸서 정의합니다. function 함수(){ 실행문; } 출력문; function func(){ document.write("실행 "); } func(); 기본적인 함수로 출력문(호출)이 함수의 앞또는 뒤에 있어도 호출이 가능합니다. 화살표 함수 또한 각각의 함수들은 화살표로 좀 더 짧게 표현 되기도 합니다. 기존 함수 표현식에서 function키워드를 삭제하고 인자를 받는..

자바스크립트은 웹을 동적인 구현이 가능하게 하는 언어입니다. 동적인 구현이 이루어지기위해서는 변수에 데이터를 저장하는 것이 기본적이 중요한 역활을 하게 됩니다. 데이터를 저장하는 방법은 다양해 공부가 필요한 부분입니다. 간단하게 변수, 상수 배열 객체 별로 나누어지지만 그안에서 여러 가지 방법이 있습니다. 01.변수 : 데이터 저장 변수는 데이터를 저장하는 저장소입니다. 예전에는 var로 변수를 선언했지만 요즘은 let을 사용하는 경우가 많습니다. { var x = 100; // 변수 x에 숫자 100을 저장함 var y = 200; // 변수 y에 숫자 200을 저장함 var z = "javascript"; // 변수 z에 문자 "javascript"를 저장함 console.log(x); console..

문제 풀이 전... 자가격리 때문에 집에있는 사이 받은 새로운 책의 문제를 블로그에 올리는게 숙제가 되어버렸어요 고로 문제를 알 수 없는 상황에 친구한테 문제를 페이지를 사진으로 받아 풀게 되었습니다. 결과는 잘 나왔는데 답을 몰라서 틀린 코딩일 수있다는 점... 우리 같이 공부해요😂 마무리 문제 1 주어진 배열에서 10보다 큰 값을 찾아서 화면에 표시해 보세요 배열 요소의 개수만큼 for문을 반복합니다. if문을 사용해서 요소의 값과 10을 비교합니다. document.write문을 사용해서 화면에 표시합니다. See the Pen 20230225_01 by jo0132 (@jo0132) on CodePen. if문으로 배열 arr의 요소중 10이상의 수를 찾아 출력할 수있도록 if문의 조건식을 arr..

연산자의 종류에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자 등이 있습니다. 01. 산술 연산자 산술 연산자는 수식을 계산 해 주도록 하는 연산자 입니다. 산술 연산자 종류 속성 설명 + 더하기 연산 / 문자와 문자,문자와 변수를 연결할 때 사용 - 빼기 연산 * 곱하기 연산 / 몫을 구 할 때 사용 % 나머지를 구할때 사용 ++ 1씩 증가시킬 때 사용 -- 1씩 감소시킬 때 사용 const a = 5; const b = 11; // 연산자 console.log(a + b); //더하기 //16 console.log(a - b); //빼기 //-6 console.log(a * b); //곱하기 //55 console.log(a / b); //몫을 구하기 //0.4545... console.l..