우당탕탕 코딩생활

CSS Scritp 🍀Lotto🍀 Click! 이 JavaScript 코드는 "Click!" 버튼을 클릭하면, "lottoNumber" 함수가 호출되어 무작위 6개의 숫자를 생성하고, 생성된 숫자를 "result" 요소의 innerText로 할당하여 화면에 출력합니다. 첫째 줄에서는, HTML에서 button 요소를 선택하여 "button" 변수에 할당합니다. 이를 통해 이벤트 리스너를 추가하고, 클릭 이벤트가 발생했을 때 함수를 호출할 수 있습니다. 둘째 줄에서는, HTML에서 결과를 출력할 div 요소를 선택하여 "result" 변수에 할당합니다. 이를 통해 결과를 표시할 수 있습니다. 셋째 줄에서는, "lottoNumber" 함수를 정의합니다. 이 함수는 새로운 Set 객체를 만들고, 1부터 45 ..

'모던자바스크립트'의 502페이지 예제입니다! 목표 dummyjson.com/quotes 사이트의 json 데이터를 가져온 후 콘솔 창에 결과를 표시해 봅니다. 가져온 데이터가 어떤 구조로 이루어져 있는지 확인하고 그 중에서 명언과 말한 사람 정보를 가져올 수 있는 방법을 생각해봅니다. 1. JSON 데이터를 가져온 후 콘솔창에 결과를 표시해 보세요. .then(이름) 까지가 json을 활용하는 기본적인 문법입니다. 2. JSON데이터에서 명언 1개를 가져와 내용과 말한 사람을 표시해 보세요. let currentIndex = 0; function quotes(){ fetch("json/quotes.json") .then(res => res.json()) .then(items => { const resu..

main 부분 ☰ 안녕하세요 자바스크립트 어려워요 살려주세요 메인 박스 안에 이미지가 들어갈 박스를 만들어 주고 이미지를 삽입한 뒤 선택자 선택을 위해 클래스 속성을 부여했습니다. 마찬가지로 버튼에도 해주었습니다. Script 부분 이 예제의 주요 목적은 선택자 사용인 것 같아 선택자를 총 3가지 만들어 주었습니다. imageAll은 이미지를, btn1은 버튼을 nav는 카테고리 입니다. document.qrerySelector(".image__wrap .A").addEventListener('mouseenter', () => { imageAll.src = "img2.png"; }); 선택자를 이용해 이미지 변수를 묶어 준 뒤 마우스 관련 이벤트를 발생시키기 위해 addEventListener을 넣었습니..

문자열에 접근하기 지난 포스팅에 이어서 문자열 객체를 알아보겠습니다! 오늘 알아볼 문자열 객체는 이 친구들입니다. charAt() startsWith() endsWith/() charAt() : 문자열. charAt(위치) charAt() 함수는 문자열에서 지정된 위치에 있는 문자를 반환합니다. 이 함수는 문자열의 인덱스를 0부터 시작하며, 지정된 인덱스에 해당하는 문자를 반환합니다. let str = "good morning!"; str.charAt(3) //"d" str[5] //"m" charAt()메서드를 사용해 str문자열에서 인덱스가 3인 요소와 5인 요소를 가져왔습니다. 인덱스는 0부터 시작하기 때문에 각각 d와 m을 불러오게됩니다. startsWith() : 문자열.startsWidth(문..

See the Pen Untitled by siyeon kim (@doitsiyeon) on CodePen.

문자열 객체 이번 포스팅은 자바스크립트의 문자열 객체에 대한 포스팅입니다! 문자열 객체는 문자열 데이터를 다루는데 사용되는 자바스크립트 내장 객체, 이 객체를 사용하면 문자열을 조작하고 검색하며, 변환하고, 분리하고, 합칠 수 있습니다. 문자열 객체는 다양하게 있는데 그 중에서도 자주 사용되는 것들로 알아보도록 하겠습니다. includes() indexof() lastIndexof() match() search() 이 포스팅에서는 includes(), indexof(), lastIndexof() 에 대해 알아보고 match와 search는 다음 포스팅에서 알아보겠습니다 ☺️ ⭐️ includes() : " ".inclouds(검색값, 위치값) includes()는 해당 문자열 포함 여부를 검색하여 불린을..

비트 연산자(bitwise operator) 비트 연산자는 비트(bit) 단위로 논리 연산을 할 때 사용하는 연산자입니다. 비트란? 비트를 설명하려면 이진수를 먼저 알아야하는데요. 이진수는 0과 1로 이루어져 있는 것을 말하며 이 이진수에서 한 자리를 나타내는 것을 비트(bit)라고 합니다. 비트 연산자 설명 & 대응되는 비트가 모두 1이면 1을 반환함. (비트 AND 연산) | 대응되는 비트 중에서 하나라도 1이면 1을 반환함. (비트 OR 연산) ^ 대응되는 비트가 서로 다르면 1을 반환함. (비트 XOR 연산) ~ 비트를 1이면 0으로, 0이면 1로 반전시킴. (비트 NOT 연산) 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴. (right shift 연산) 설명을 이렇게 들으면 ..

데이터 불러오기 자바스크립트 내에서 데이터를 불러오는 방법은 다양하게 존재합니다. 변수인지, 상수인지 혹은 배열인지 객체인지에 따라 달라지는 데이터 불러오기! 오늘 완벽하게 정리해보도록 하겠습니다. 1. 변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법입니다. { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } //결과값 100, 200, javascript 2. 상수 : 데이터 불러오기 상수 안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } //결과값 100, 200, javascript 3. 배열 : 데이터..

1. 양수 음수 구하기 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. 힌트 숫자를 받아서 양수, 음수,0을 판단하고 알림 창에 표시하는 함수를 선언합니다. 반환값이 숫자일 경우에만 함수를 실행합니다. parseint() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. const num = parseInt(prompt("숫자입력.")); //parseInt()는 문자열을 실수로 바꾸는 함수. 사용자가 입력할 때 문자열이기 때문에 변경이 필요하다. if(num>0) { alert("양수입니다."); } else if(num