아리의 개발 일상

Welcome I'M A Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu risus accumsan, volutpat diam eget, rhoncus ipsum. Phasellus in molestie felis, finibus venenatis mauris. DownLoad 이 부분에 대한 js 코드는 (function (){ const spanel = document.querySelector("main h2 span"); const txtArr=["web publisher","front-end developer","web ui desginer"] let index=0 let currentTxt = txtArr[index].split..

(2024 03 12) js 19일차 클래스 =>객체를 생성하기 위한 설계도로 클래스 안에는 필드(속성)와 메서드로 구성되어 있다 추상화 =>핵심적인 기능 또는 데이터만 간추려 내어 표현하는 과정을 의미한다 =>객체의 공통적인 특성을 축출하여 추상클래스로 정의 하여 상의 클래스로 만든다. 예를 들어 자동차를 추상해 보면 자동차 종류는 여러가지 있어도 기본적으로 장도차에는 가속,멈춤,회전등 공통적인 기능들이 존재한다 이런 공통적인 기능들을 모아서 하나의 클래스로 만드는것을 추상화라 한다. //사각형 클래스 class Rectangle{ //생성자 #width #height constructor (width,height) { if (width constructor (width,height) 이부분을 호출하는..

(2024 03 11)JS 18일차 localStorage => 데이터를 저장하는 객체 localStorage.getItem(키) = 데이터 가져오기 localStorage.setItem(키,값) =값 저장 .removeitem(키) = 값제거 localStorage.clear() => 모든 데이터 삭제하기 처음실행할때 내부에 입력하고 새로고침 눌렀을때 예외처리 try { // 예외가 발생할 수 있는 코드 wuu.bye() } catch (exception) { console.log('예외처리') } finally { // 항상 실행되는 코드 (선택적) console.log("finally") } 객체를 생성하고 이용하는 방법 //객체 생성 const students=[] students.push({이름..

(2024 03 07-08)16-17일차 js 객체란? 변수화 함수들의 집합으로 js에서의객체는 {}로 생성하면 다음 과 같은 형태의 자료를 쉼표로 연결해서 입력 const product = { 제품명:"망고", 유형:"당절임", 성분:"망고,설탕,항색소", eat:function(food) {} } 호출 product["제품명"] product.제품명 속성 속성은 객체안의 자료형 메소드는 객체의 속성중 함수 자료형인 속성 =>eat이 메소드라고 한다 객체 속성 추가 const student = {} student.이름="윤인성" student.취미="악기" console.log(JSON.stringify(student,null,2)) // 이건 출력형식 속성 제거 delete student.취미 화살표..

(2024 03 07) js 15일차 콜백함수 매개변수로 전달하는 함수를 콜백함수라 한다 function callThreeTime(callback) { for(let i=0; i { } let number = [0,1,2,3,4,5,6,7,8,9,10] end=number .filter((value) => value%2===0) console.log(end) 위와 같이 짝수만 출력된다 time함수 setTimeout(함수,시간) 특정 시가훈 하수 한번호출 setinterval(함수,시간) 특정 시간 마다 함수를 호출 clearTimeout(타이머_id): 지정된 타이머를 취소합니다. 이 함수를 사용하면 setTimeout() 함수로 설정된 지연 실행이 취소됩니다. clearInterval(타이머_id):..

(2024 03 05) js 14일차 let list=''; list +=''; list +=' hello'; list +=' javascript'; list +=' '; document.write(list); prompt(문자열,기본입력 문자열) 함수는 사용자로부터 내용을 입력받아서 사용 const input=prompt("message",'_default') alert(input) let a = prompt("message",'_default') confirm() 사용자에게 확인을 요구하는 메세지창이 나타남 let b=confirm('수락하시겠습니다') => 확인 버튼 클릭하면turn 취소는 false을 리턴한다 숫자 자료형으로 변환하기 Number() 함수를 사용하면 숫자로 변환시켜준다 NaN 숫자..

카카오 로그인창 보고 비슷하게 만들어보기 html 페이지 연습을 위해 코드를 보지 않고 내가 눈에 보이는 것들을 따라 만들어 보았습니다 body 부분 코드 KaKao

웹페이지 만들어보기 책의 내용을 따라 하여 웹페이지를 제작해보는 연습을 하였다 위에버튼을 클릭하면 버튼이 펼처지는 웹페이지로 #checkbox { display: none; } #checkbox + nav { display: block; } #checkbox:checked + nav { display:none } Brand Network Store Support 위 기능을 하는것만 코드를 가지고 와 해석해보면 checkbox를 클릭시 nav가 보이게 만들어지고 클릭하지 않으면 안보이게만드는 방식의 메뉴 방식이다 라이트박스와 masonry의 플로그인 을 이용하여 책에 나와있는 대로 따라한 웹페이지로 사진을 누르면 이런 화면으로 전환되어 누른 사진을 크게 볼수 있는 sns에서 자주 볼수 있는 기능 이다

자바스크립트와 jQuery 라이브러리 이용 입력 양식 포커스 window.onload=function() { //문서객체 선택 let input1=document.querySelectorAll('input')[0]; let input2=document.querySelectorAll('input')[1]; input1.onkeydown = function () { if (6객체를 대상 앞부분에 추가 .appendTo => 객체를 대상 뒷부분에 추가 .beforeTo => 객체를 대상의 앞쪽에 추가 .afterTo => 객체를 대상의 뒤쪽에 추가 무한 스크롤 =>사용자가 스크롤을 끝까지 내리면 자동으로 데이터를 추가해 스크롤이 끝나지 않게 해준다 $(document).ready(function () { le..

jQuery 라이브러리 사용 $(선택자) , 메서드(매개변수,매개변수) 형태로 사용한다 $(document).ready(function () { $('h1').css('color','red'); }) ; Header-0 속성 추출 하는방법 $(document).ready(function () { let src = $('script').attr('src'); alert(src); }) ; attr() => 문서객체의 속성 조작 속성 조작 $('img').attr('width,100'); $('img').attr('src',"#"); 이런식으로 조작을 할수 있다 클래스 조작 #box { width: 100px; height: 100px; background-color: red; } #box.hover { b..