코딩하는라민

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 의 속성 값으..

[닷홈], [알드라이브]로 포트폴리오 페이지 무료 호스팅 도메인 등록하기 A to Z 1. 회원가입 후 무료 호스팅 신청 무료 호스팅은 무료이고 기간이 정해져있습니다. 1인당 2계정까지 가입 가능하며, 무료 호스팅을 신청하면 3개월동안 무료로 이용이 가능하고 호스팅 기간이 1개월 이내로 남았을 때부터 연장이 가능합니다. 닷홈 호스팅은 지속적으로 연장해줘야하기 때문에 잊지 말고 연장 신청을 해야합니다. 만약 연장신청을 못했는데 기간이 지난 경우 업로드된 자료들은 삭제될 수 있으니 알림을 설정해놓고 주기적으로 연장해줍시다. 무료 호스팅의 단점은 용량 제한인데, 닷홈 무료 호스팅의 경우에는 200MB 밖에 되지 않기 때문에 필요 없는 파일은 지우고, 이미지 파일 또한 용량을 최소화해야 한다. 2. 호스팅 정보..