본문 바로가기

프로그래밍/javacscript30

[220106] forEach문. 차근차근 알아보기 목차 1. foreach로 for문을 대신하기 2. for문의 기본기능 3. for문을 응용하기 forEach로 for문을 대신해보자 function name() {} let newArr=[1,2,3] for(let i=0; i console.log(v)); //이게 forEach문을 사용한 문장 //뭐라는걸까. } forEach문의 형태 array.forEach( callback( currentvalue[, index[, array]])[, thisArg]) forEach 매개변수 callback : (필수) 각 요소에 대해 실행할 함수. 뒤에 따라오는 세가지 매개변수를 받는다 currentvalue : (필수) 처리할 현재 요소 index : (필수아님) 처리할 현재 요소의 인덱스 array : (필.. 2022. 1. 6.
[220105] for문, 이중for문(구구단, 별짓기), 재귀함수, 다이나믹 프로그래밍(피보나치, 메모이제이션) 목차 1. for문 2. 이중for문 3. 구구단만들기 4. 별짓기 5. 재귀함수 for ( 초기문; 조건문; 증강문) for문의 목표 : 내가 같은 코드를 몇번을 반복시킬 것인가 for(let i=1; i 2022. 1. 5.
[220104] 배열과 객체 / create:function(), 객체 안에 객체or배열 목차 1. 배열과 객체 2. 객체 안에 추가하기 3. 배열과 객체의 데이터타입 배열 (array) 과 객체 (object) 배열이랑 객체가 뭐더라 //배열 array // 배열명 = {값, 값, 값} let arr = [1, 2, 3]; //객체 object //key = 값 이름 //value = 값 //객체명 = {key:value, key:value} let obj = {name:'Joo', age:29} 가장 큰 차이점은 값을 저장하는 방식. 쉽게 생각해보자면, 배열은 arr이란 아파트에 "100호에 1이 살고, 101호에 2가 살고, 103호에 3이 산다." 객체는 obj란 아파트에 "name이란 방에 'Joo'가 살고, age란 방에 29가 산다." 방호수로 기억하느냐, 유치원반처럼 개나리반,.. 2022. 1. 4.
[220204] 배열 array, length, typeof, push 목차 1. 배열 2. 배열의 주소 배열의 생성, 데이터 1개 넣기 : let arr = [ ]; 배열의 데이터 타입 알기 : typeof console.log(arr); console.log(typeof arr); //데이터 타입을 말해주는 typeof //object라고 나온다 let str = "글자형이다!!" console.log(str); console.log(typeof str); // 문자 글자형이므로 string이 나온다 배열에 데이터 2개 이상 넣기 arr=[10,20]; console.log(arr); // 컴퓨터가 배열을 새로 만들어서 // 빈 배열에 숫자 10, 20을 넣음 배열에 맨 끝에 데이터 추가하기 : push arr.push(103); console.log(arr); // 개.. 2022. 1. 4.
[220103] 자바스크립트 / let, const, ver, else if, 함수 심화,함수 연습문제 목차 1. 변수와 상수 2. 아스키코드 3. else if문 4. 함수 심화 5. 연습문제 let(변수) 변수를 선언 메모리에 저장할 수 있는 공간 확보 그 공간에 월요일 저장 즉, 선언을 하지 않으면 저장할 공간을 만들지 않았으므로 저장이 안됨. 에러발생. 집이 안 지어졌는데 입주를 어떻게 합니까. 자기가 가지고 있는 영역(code block)에서만 실행되는 모습 let a ="pale" //a라는 공간을 만들어서 저장 let a = "apple"//a라는 공간을 만들려고하지만 공간의 이름이 중복됨. 에러발생 { let a="apple"; //code block } 변수만 선언하고 값을 저장하지 않은 경우에 출력을 하면 뭐가 나올까? null상태인가? 아니면 더미값이 있나? let red; consol.. 2022. 1. 3.
[220102] 홈 만들기 구글링하다가 예쁜 잡지프레임 가지고 비율 3:1 확인하면서 만듬. 전체적으로는 주려다가 여백 공부하듯이 하나하나 넣었다. 그러다보니 코드가 엄청나게 난장판인데 나중에 수정하기로 하자. 우선은 완성한데에 의의를 둔다. 클로닝하니까 확실히 머뭇거림도 많이 줄고 어떻게 넣어야할지 조금씩 감이 온다. 안에 들어간 이미지는 구글 무료 이미지. 수정해야 할것 저 팝업창을 회원가입창으로 바꾸기 시간이 없어서 닫는 버튼을 전체 클릭으로 바꿨는데, X버튼으로 만들기 210114 수정본 수정내용 회원가입창을 닫아야 할때 전에는 전체 화면 중 어디나 클릭하면 닫을 수 있게 했다. -> X버튼을 눌러야만 닫을 수 있게 했다. input+lable이 각각 2개가 있었는데, input 1개에 연결된 label 2개로 줄였다. 마.. 2022. 1. 3.
[220101] clone_아임웹 게시판 / table, border-seperate, :not(), text-transform 세상에 새해라니. 무의식적으로 21년이라고 쓰다가 22년이라고 고쳤다. 23이라고 쓰기 시작할때는 회사 업무일로 글을 썼으면 신나겠다. 만약 그렇게 된다면 참치덮밥 먹고싶다. 차가운 레몬사이다랑 해서. 오늘이 클로닝 이미지. (출처 : https://imweb.me/faq?mode=view&category=29&category2=37&idx=71724 ) 세부기능은 몰라요. 게시물이라고 구글링하고 예뻐서 사이트가서 찾아옴. 세부적인 기능과 구매는 아임웹에서 구매하도록 합시다. 1. 큰 구조 짜기 네이버와 다르게 까볼 수 있는 코드도 없고, 내게 주어진건 달랑 저 이미지 한 장이다. 하지만 해볼 만은 하다. 하면 하는거지. 세부적인 이름 정하기. 궁금한건 main에 들어가는 nav와 box1에 들어가는 n.. 2022. 1. 1.
[211231] 함수의 정의와 호출, return 사용하기 목차 1. 함수를 사용하는 이유 2. 함수의 기능 2가지 3. 함수의 정의 & 호출 4. 함수의 선언 위치 함수를 사용하는 이유 특정 역할을 동일시 수행할 경우, 코드를 반복해서 작성하지 않고 편하게 호출해서 사용하고 싶을때 사용한다. 함수의 기능 2가지 //함수 함수명 (매개변수) function ingoo(name){ console.log(name); } ingoo('민트초코'); 매개변수 (인자) return return을 만나면 함수가 멈추고 값을 내보낸다. 함수의 결과물을 반환하기 위해서 사용한다. 함수 안에 있는 내용을 함수 밖에서 사용하고 싶어서 사용. 함수를 사용하기 위한 조건 : '정의'와 '호출' function ingoo(name){ let result = name+'님 환영합니다';.. 2021. 12. 31.
[211230] clone_네이버 회원가입폼 / absolute, relative 목적 1. 전체적인 구성을 짜는 능력을 기르기 2. 보기에 예쁜 여백 폼을 손에 익히기 막혔던 것 1. depth의 깊이 캡쳐하면 이렇게 뜨길래 전체 이미지 width:100%; 중간 이미지 width:460px; margin:auto;를 줌. 세부적인 요소들을 보려고하니까 뭔가 depth가 나랑 안 맞아서 계속 헤맴 //max-width 768 전체 //460 중간전체 //통 //100% id pw re-pw //id 네이버 코드를 보면 나보다 div로 한번 더 싸놓았다. 왜 굳이굳이 이렇게 빡빡하게 씌운거여.. 예전에 뭔가 있었다가 사라졌던가, 아니면 버젼이 올라가면 적당히 둘러싸도 괜찮은데 옛날 버젼 애들은 호로록 흘러서 그런가. 2. absolute랑 relative 다시 알아야겠구나.. 휴대전화.. 2021. 12. 30.
[211230] 자바스크립트 / 변수, 예약어, 연산자, if문, for문 목차 1. 자바스크립트 2. 컴퓨터의 간단한 구조 3. 저장단위 4. 예약어 5. 연산자 6. 조건문 자바스크립트가 나타난 배경 최초의 브라우저 넷스케이프 (jsc는 없었음) -> 10일만에 jsc 쨔잔! 만들어냄. 그러니까 저급한 단어란걸 인식하고있자. -> 윈도우 마소가 넷스케이프 카피캣을 해서 익스플로러를 만들어냄 -> 문제는 서로 약간씩 다르게 기능을 하게 만듬 = 코드를 다르게 읽는거지(크로스 브라우징을 하게 만든 원흉) 파이어폭스 등장 플래시(액션 스크립트)를 자바스크립트 대신해서 적용함. -> 익스플로러, 파이어폭스, 다른 브라우저 다 다르게 함 대환장 파티 구글이 만든 크롬(2007) 등장 자바스크립트를 해석해주는 v8 엔진 기능이 매우 좋았고, 넷스케이프의 표준 문법을 지키는 브라우저.-.. 2021. 12. 30.