코딩하는라민

Javascript #9 배열과 반복문 활용 > 선행 생활코딩 Javascript #8 배열과 반복문 Javascript #8 배열과 반복문 20. 배열 array 배열 - 배열은 대괄호 [ 부터 시작해서 대괄호 ] 로 끝난다. - 대괄호 안에 값을 적는데, 여러 개의값을 적을 수 있다. - 값과 값 사이는 콤마 , 로 구분 var c ramincoding.tistory.com 22. 배열과 반복문 하이브리드 1) 배열 안의 원소들을 불러와서 반복문으로 리스트 태그에 넣기 ① 배열 생성하기 var coworkers = ['ramin', 'choi', 'dana', 'udin'] ② 반복문 기본 형태 var i = 0; while(i < 4 ){ document.write(''); i = i + 1; } ..

Javascript #8 배열과 반복문 20. 배열 array 배열 - 배열은 대괄호 [ 부터 시작해서 대괄호 ] 로 끝난다. - 대괄호 안에 값을 적는데, 여러 개의값을 적을 수 있다. - 값과 값 사이는 콤마 , 로 구분 var coworkers = [ '원소(element)', '원소(element)' , '원소(element)' , ... ] → 배열 안을 구성하는 요소들을 ' 원소(element) '라고 한다. → 원소의 순서는 0번째부터 시작한다. 1) 배열 만들고 가져오기 Array syntax get - 변수에 배열을 저장하고, - 꺼낼 때는 index 를 이용해서 가져올 수 있다. - index 는 0번부터 시작 n-1 번째까지 있다. ex) 0번째는 ramin, 1번째는 leezche ..

Javascript #7 리팩토링(중복 제거) 18. 리팩토링 중복의 제거 코드를 효율적으로 만들어서 가독성 을 높이고 유지보수를 편리하게 만드는 것. 그리고 중복된 코드를 낮추는 방향으로 코드를 개선하는 것. → 규모가 커지는 프로그램을 틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있다. 1) 같은 코드를 똑같이 복사하여 버튼을 두개 만든 경우 - 두번째 버튼을 눌러도 value 값이 첫번째 버튼만 변경된다. - 해결법 : id 값을 지우고, document.querySelector('#night_day') 부분을 전부 this 로 변경 - this 를 사용해서 해당 코드 내에서 작용하도록 변경 2) 변수 이용해서 중복 제거 - 공통된 부분을 변수로 두어 중복을 제거하여 코드를 간단하게 만들 수 있..

Javascript #6 조건문 14. 조건문 조건문 조건에 따라 다른 순서의 기능이 실행되도록 하는 것 - 두 가지 버튼으로 다크모드와 데이모드를 왔다갔다 하는 것이 아니라, 한 버튼을 눌렀을 때 다크모드 상태이면 데이모드로 데이모드 상태이면 다크모드로 전환되는 기능을 넣고자 한다. - 이러한 기능을 '토글 toggle' 이라고 한다. 15. 비교연산자와 블리언 comparison operator & Boolean === 1===1 1===2 - 비교연산자 ; 좌항과 우항의 관계에 따라 true, false(블리언) 의 값을 만들어내는 연산자. 비교연산자(=관계연산자) = == != 오른쪽 값이 왼쪽값보다 크다 오른쪽 값이 왼쪽값보다 작다 오른쪽 값이 왼쪽값보다 크거나 같다 오른쪽 값이 왼쪽값보다 작거..

Javascript #5 제어할 태그 선택 8. 웹브라우저 제어 - body 속성의 style 은 디자인을 해주는 속성이다. - body 태그라는 것을 웹브라우저에서 알려주는 방법 - 즉, 자바스크립트를 이용해서 제어하고자 하는 태그를 선택하는 방법 12. 제어할 태그 선택하기 Google : javascript select tag by css selector → 이런 식으로 검색하면 더 정교하게 검색 가능! 문법 element = document.querySelector(selectors); querySelector 를 이용해서 selectors 를 넣어라. In this example, the first element in the document with the class "myclass" is re..

Javascript #4 데이터 타입 그리고 변수와 상수 6. 데이터 타입(자료형) - 여섯 가지의 데이터 타입 1) number 숫자 - 이항연산자 : 값을 더해서 하나의 값을 만든다. 콘솔 창에 alert 을 쓰지 않고도 단순히 1+1 을 입력하는 것으로 계산 결과를 얻을 수 있다. - 산술연산자 : 덧셈, 뺄셈, 곱셈, 나눗셈 2) String 문자열 - 글자수 세기 콘솔 창에 따옴표로 문장을 감싸고 .length 를 이용해 경고창을 이용하지 않고도 간간하게 값을 얻을 수 있다. - 문자열을 모두 대문자로 바꾸기 - 인덱스(문자열의 위치값 찾기) → 소문자 o 는 4번째에 있다. → 3번째에서 lo라는 문자열이 시작된다. - 문자열끼리 더하기 숫자가 아닌 문자열이기 때문에 연산은 되지 않고 문자열을..

Javascript #2 경고창 띄우기 4. 이벤트 event 란? 웹브라우저에서 일어나는 일 1) 버튼 누르면 경고창 띄우기 2) 텍스트 입력 창 만들기 3) 텍스트창에 입력 텍스트가 변경되면 경고창 띄우기 4) 텍스트창에 텍스트 입력시 경고창 띄우기 텍스트창에 아무 키나 눌렀을 경우 경고창이 뜬다.

css, js 메인메뉴, 서브메뉴 만들기 0. 서브메뉴 만들기 - 메인 메뉴는 보이게, 서브 메뉴는 안 보이게 숨기기(display: none;) - 서브 메뉴는 마우스를 오버했을 경우에만 나타나게 1. 서브 메뉴 전체 떨어지게 만들기 → header_menu_list 박스와 sub 메뉴 박스를 따로 만들어서 style에서 sub 메뉴의 크기 등의 속성을 따로 줌 Home Blog Contact 홈 바로가기 일상 공부 네이버 티스토리 #quickmenu, .sub_menu{ width: 610px; } #quickmenu li, .sub_menu ul{ width: 200px; height: 30px; line-height: 30px; float: left; text-align: center; backg..