코딩하는라민

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 #3 콘솔 이용 / 글자수 세기 5. 콘솔 콘솔 : 파일을 만들지 않고도 자바스크립트 코드를 즉석해서 실행 가능 → 콘솔에서 실행시키는 웹페이지에 삽입된 자바스크립트인 것 처럼 작동 → 웹페이지를 대상으로 실행. 1) 파일을 만들지 않고도 자바스크립트 코드를 즉석해서 실행 가능 웹페이지에는 [F12]-[콘솔] 창의 입력 부분에 자바크스립트 코드를 입력하면 파일을 따로 만들지 않고도 자바스크립트 코드를 실행할 수 있는 기능이 있다. 2) 글자수 세어주는 length 코드 - [텍스트 복사하기] 한 후 콘솔 창에 붙여넣기 - 붙여넣기한 텍스트를 ' ' 따옴표로 감싸기 - 따옴표 뒤에 글자 수를 세어주는 코드 .length 입력 - 전체를 alert 이라는 코드로 감싸기

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

Javascript #1 자바스크립트란? 1. 수업소개 자바스크립트(javascript)란? 사용자와 상호작용하는 웹페이지를 만들기 위한 언어. html 은 정적이다. 데스크탑, 모바일 등의 프로그램에서는 사용자의 조작에 반응해서 프로그램이 움직인다. 웹페이지에서도 마치 게임처럼 동적으로 사용자와 상호작용할 수 있게 하기 위해서 자바스크립트가 등장한 것이다. 2. 수업목적 1) 웹페이지에서 검사하기 사용 [F12] 검사하기 - [Elements] 웹 페이지를 구성하는 html 태그들로 구성되어 있다. 2) 다크모드 버튼을 누르면 다크모드로 전환되는 코드 - type input 이라는 태그를 'button' 으로 만들어주는 버튼 속성. - value 버튼의 이름 - onclik onclick 의 속성 값으..