본문 바로가기
반응형

javascript

javascript 토글(toggle) 기능 추가 팀프로젝트 웹사이트를 마이페이지 부분을 수정 중이다. 웹페이지 이동 없이 마이페이지 내용을 보고 싶다. 그래서 토글기능을 떠올렸다. 일단 만들어 봤는데 문제가 있다. 댕근머니를 누르고 내 정보를 누르면 중복이 된다. 중복이 없어야 한다. 댕근머니를 누른 상태에서 내 정보를 누르면 댕근머니 내용이 사라져야 한다. 테스트해보고 프로젝트 내용에 적용시켜 보자. 1. html코드 댕근머니 내정보 강아지 정보 채팅 판매 목록 찜 목록 머니를 충전하시겠습니까? 내 정보입니다. 강아지 정보입니다. 채팅하기 기능입니다. 판매 목록입니다. 찜목록입니다. 2. 자바스크립트코드 $(document).ready(function() { $('.toggle-button').click(function() { var target =.. 더보기
개인프로젝트 What I DO 영역 완성 개인프로젝트 What I DO 영역까지 완료. 내일은 배경 영역을 완료해보자. 그리고 책에 나온대로 만들어봐야겠다. 원본코드를 따라가되 약간씩 변형하는 것이 좋다. 코드 자체가 이해가 안될 때가 있는데 고쳐보면 뭐가 달라지는지 알 수 있기 때문이다. 일단 이모티콘 홈페이지는 두 번째 프로젝트로 하고, 포트폴리오 웹페이지부터 만들어보자. 내일 수정할 것. 왜 책에 나온대로 하면 가운제 정렬이 되지 않을까? 교과서에 없는 내용을 넣자 가운데 정렬이 됐다. what I DO도 마찬가지다. 하얀 박스들이 왼쪽으로 붙어가지고 옮기느라 고생했다. 더보기
Javascript에서 객체 자바스크립트에서 객체는 객체지향과는 다른 개념이다. 인덱스로 문자를 설정하고 싶으면 객체를 만들어야한다. var grade = {'학생1': 50, '학생2':99}; grade 객체를 만들었다. 학생1은 key, 50은 value다. key를 호출하면 value값을 알 수 있다. 그런데 객체를 배열처럼 생각하고 grade [0]; 를 입력했더니 undefined가 나온다. 객체는 배열처럼 순서가 정해져있지 않다는 사실을 몰랐다. for (key in grades) 를 사용하면 객체(grades) 안에 key값과 value 값을 출력할 수 있다. 더보기
자바스크립트 배열[]안에 중괄호 {} const rotationValues = [ { minDegree: 0, maxDegree: 30, value: "꽝" }, { minDegree: 31, maxDegree: 90, value: "합격" }, { minDegree: 91, maxDegree: 150, value: "꽝" }, { minDegree: 151, maxDegree: 210, value: "합격" }, { minDegree: 211, maxDegree: 270, value: "꽝" }, { minDegree: 271, maxDegree: 330, value: "합격" }, { minDegree: 331, maxDegree: 360, value: "꽝" }, ]; 위 예제는 배열 안에 객체가 들어가있다. 꿀팁1 꿀팁 2 컨트롤 +.. 더보기
Javascript가 HTML문서를 동적으로 변환 시킬 수 있는 이유 (DOM개념) 유민님과 남아서 Javascript 공부한 내용 거꾸로 접근하는 방법을 선택했다. 기초부터 공부하는 것을 멈추고, 로그인 화면을 구현한 HTML, CSS, JS문서 코드를 해석했다. 의문이 들었던 점은... 어떻게 자바스크립트가 HTML문서를 동적으로 변환시킬 수 있는 거지? 였다. 문제 이해 및 해결과정 1. 웹 브라우저 안에는 렌더링 엔진이라는 것이 있다. 2. 렌더링 엔진은 HTML을 한 줄 한 줄 해석한다. 그리고 문서를 객체화 시킨다. ← 중요한 개념임. 웹브라우저 역할. 3. 객체화된 문서에만 Javascript가 접근할 수 있다. 4. 여기서 DOM이라는 용어가 나온 것이다. Document Object Model. 문서 객체 모델이다. 5. DOM은 트리구조를 가지고 있다. (아래 사진 참.. 더보기
Javascript 조건문 개념 1. 자바스크립트 조건문은 대표적으로 if, swith문이 있다. 2. 블록문 : { } 중괄호로 묶은 것을 말함. 블록 혹은 코드 블록이라 한다. 3. 예제 let num =5; if(num % 2 === 0) { console.log("변수 num에 할당된 숫자는 짝수입니다."); }else{ console.log("변수 num에 할당된 숫자는 홀수입니다."); } 4. else if문. : if 문에 조건을 추가하고 싶을 때 사용한다. 5. if문 안에 if문을 중첩할 수 있다. 그러나 실무에서는 사용하는 경우가 거의 없음. 6. switch문 let food = "melon"; switch(food){ case "melon": console.long("fruit") break; case "appl.. 더보기
Javascript 기초 ② 1. ${} 문법을 이용하면 문자열에 변수 또는 식을 넣을 수 있다. 2. undefined - 변수나 상수를 선언하면 반드시 생성한 공간에 저장할 데이터를 할당해야 한다. 할당하지 않으면 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이때 할당하는 값이 undefined다. 3. 배열 더보기
Javascript 연산자, 조건문 1. == (동등연산자) =는 대입연산자임. 다름. alert(1==2)//false alert(1==1)//true alert("one"=="two")//false alert("one"=="one")//true 2. === (일치연산자) 엄격한 녀석. 좌항과 우항이 완벽히 일치해야함. 타입도. alert(1 === "1")//false alert(1 == "1")//true Javascript는 조금 허술한 면이 있음. 3. Javascript에서는 숫자 1을 true로 간주하고 나머지는 false로 간주한다. 4. ! 연산자 alert(1!=2)//true alert(1!=1)//false 5. 조건문 (Boolean). 불린으로 올 수 있는 값은 true or false. if(true) { ale.. 더보기
반응형

티스토리툴바