전체 글 (68) 썸네일형 리스트형 JS 연습문제 7 - 로또 번호 생성 ▶ 로또 번호 생성CSSbody{ display: flex; flex-direction: column; justify-content: center; align-items: center;}#container{ margin-top: 200px; display: flex;}#container>div{ border: 1px solid black; border-radius: 50px; margin-left: 30px; width: 70px; height: 70px; font-size: 45px; font-weight: bold; text-align: center;}#createLotto{ margin-top: 40px; width: 300px; heig.. 배열(Array) 배열: 변수를 묶음으로 다루는 것(변수가 연속적으로 나열됨)- JavaScript 변수 : 값이 저장되기 전까지 자료형이 지정되지 않음- JavaScritpt 배열의 특징 1) 자료형 제한 X 2) 길이 제한 X// 배열 확인 1document.getElementById('btn1').addEventListener('click',function(){ // 배열 선언 방법 1 const arr1 = new Array(3); // 3칸짜리 배열 생성 const arr2 = new Array(); // 0칸짜리 배열(비어있는 배열) 생성 // 다른 자료형 대입 가능 arr1[0] = "라자냐"; arr1[1] = 19800; arr1[2] = true; co.. 문자열, 숫자, 형변환, 연산자 문자열(String 내장 객체)- 자바스크립트에서는 문자열을 나타내는 객체(String)이 존재하며 문자열과 관련된 기본적인 함수를 제공함- 1) 문자열.indexOf("str") : 문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환 / 없으면 -1 반환- 2) 문자열.substring(시작인덱스, 종료인덱스(미포함)) : 문자열 일부 잘라내기 / 시작 이상 종료 미만- 3) 문자열.split("구분자") : 문자열을 "구분자"로 잘라내서 배열로 반환// 문자열 관련 함수document.getElementById('btn1').addEventListener('click',function(){ // 1) 문자열.indexOf("str") // : 문자열에서 "str"과 .. JS 연습문제 6 - 색깔 변경_표준 이벤트 모델 적용 ver. ▶ JS 연습문제 6 - 색깔 변경_표준 이벤트 모델 적용 verHTML 현재 transition-duration : 0초 transition-duration 변경 : 변경 초기화JavaScript// 색 출력 영역// 요소를 얻어와서 변수에 저장const container = document.getElementsByClassName('container')[0];const area = document.getElementsByClassName('area');const box = document.getElementsByClassN.. JS 연습문제 5 - 색깔 변경 ▶ JS 연습문제 5 - 색깔 변경HTML 현재 transition-duration : 0초 transition-duration 변경 : 변경 초기화JavaScript// 색 출력 영역(style)// 클래스명, 태그명, name속성값, querySelectAll() 같은 경우// 요소를 얻어올 때 배열 형식으로 반환!!const container = document.getElementsByClassName('container')[0];const area = document.getElementsByClassName('area'.. JS 연습문제 4 - 간이 계산기 ver.4 ▶ JS 연습문제 4 - 간이 계산기 ver.4간이 계산기 만들기첫 번째 값 : 두 번째 값 : 이벤트가 발생한 요소 자체를 의미(여기에서는 클릭된 연산자 버튼) -->+-*/%계산 결과 : See the Pen 24-12-25 js review-pr4 by Namu (@Namu-the-sans) on CodePen. JS 연습문제 3 - 간이 계산기 ver.3 ▶ JS 연습문제 3 - 간이 계산기 ver.3간이 계산기 만들기첫 번째 값 : 두 번째 값 : 이벤트가 발생한 요소 자체를 의미(여기에서는 클릭된 연산자 버튼) -->+-*/%계산 결과 : See the Pen 24-12-25 js review-pr3 by Namu (@Namu-the-sans) on CodePen. JS 연습문제 2 - 간이 계산기 ver.2 ▶ JS 연습문제 2 - 간이 계산기 ver.2첫 번째 값 : 두 번째 값 : +-*/%계산 결과 : See the Pen 24-12-25 js review-pr2 by Namu (@Namu-the-sans) on CodePen. 이전 1 2 3 4 ··· 9 다음