본문 바로가기

코딩

ep.09 함수 함수라는 것은 우리가 수많은 명령문들을 하나의 함수라고 지칭하여 묶어둔 것입니다. 쉽게 비유를 해보자면, 예를 들어서 어머니께서 저녁에 두루치기를 만들어주신다고 장보기 심부름을 시킨다고 생각해보세요. 두루치기를 만들기 위한 재료가 무엇인지 안다고 가정할 때, 매번 두루치기를 만들때마다 ex 1) 삼겹살, 김치, 양파, 당근, 참기름, 깨, 등등 사와! ex 2) 두루치기 재료 사와! ex1번보다는 ex2번이 더 간단하게 말할 수 있을겁니다. 함수도 이와 마찬가지로 미리 두루치기의 재료가 무엇인지 입력을 해주고, 필요할때마다 '두루치기 재료 사와!' 이렇게 시키는 것과 아주 유사하다고 보면 됩니다. 우리는 함수를 사용하기 전에 함수의 이름과, 어떤 명령어를 실행해야 할지 미리 선언을 해두어야 합니다. fu.. 더보기
ep.08 배열과 반복문의 활용 우리가 앞서 사용해본 배열과 반복문의 조합을 통해 데이터를 쉽게 꺼내 쓸 수 있는 코드들을 만들어보았습니다. 여기서 조금 더 나아가, 조금 더 실용적인 예시를 들어 심화학습을 해보도록 하겠습니다. 예제) 아래 코드들의 a태그를 찾아 색깔을 바꾸어라. 이 상황에서 a태그를 찾아봅시다. 구글에 javascript find elements multiple정도로 검색을 해보면 될 겁니다. 우리는 모든 태그들을 다 외울 수 없기 때문에 항상 구글에서 속성을 검색하여 쓰는 방법을 터득해야 합니다. 굳이 완벽하게 칠 필요도 없이 필요한 키워드만 몇 개씩 조합하여 검색하면 됩니다. 이렇게 우리는 querySelectorAll이라는 문법을 통해 모든 a를 배열속에 집어넣을 수 있게 됩니다. 이때 우리는 변수의 중요성을 .. 더보기
ep.07 배열과 반복문 배열과 반복문 앞서 배열이 무엇인지, 또 반복문은 어떻게 활용하는지를 미리 알아보았습니다. 이 두 가지 도구를 합쳐 아주 획기적이고 실용적인 코드를 짜 볼 차례입니다. 여러 예시들 중에 coworker라는 배열에 이름을 넣어보는 상황을 가져와보겠습니다. coworker라는i가 3보다 작을 때까지 반복하며 배열의 i번째 데이터를 가져오라는 명령입니다. 그 결과 0번째, 1번째, 2번째의 데이터가 출력되게 되는 것입니다. 하지만, coworker 수가 줄어들거나 늘어난다면? 일일이 모든 i의 범위를 바꿔주어야 할까요? 데이터가 바뀌더라도 로직에는 손을 대지 않도록, 더 간단하게, 더 유연한 코드를 짜는 것이 우리의 지향점입니다. 그럼 그 i, 즉 최대의 개수는 어떻게 알아낼까요? 앞에서 했던 것처럼 leng.. 더보기
ep.06 배열과 while반복문 배열 반복문을 공부하기에 앞서 우리는 배열이 무엇인지 배워야 합니다. 배열이란, 우리가 가지고 있는 방대한 데이터들을 사용하기 쉽게 정리하기 위해 사용하는 도구라고 생각하면 됩니다. 칸막이에 하나씩 데이터를 집어넣는다고 생각해봅시다. 아래는 간단한 배열을 나타낸 것입니다. 배열을 사용할 때는 [] 대괄호 속에 데이터를 담는다고 생각하고, 첫 번째 숫자는 0부터 시작된다는 것을 기억해야 합니다. 그 데이터의 숫자를 불러오고 싶을 때에는 그 데이터의 순서를 대괄호 안에 넣어서 출력하도록 명령하면 원하는 대로 나오게 될 겁니다. 배열은 여러 가지 속성이 있으므로 자세한 공부를 위해 추가적으로 필요한 속성들은 구글에 javascript array property 정도를 검색하면 다양한 속성들이 나오므로 참고해서.. 더보기
ep.05 조건문 조건문이라는 도구는 우리가 일일이 많은 작업을 하지 않아도 되게 도와주는 아주 혁신적인 도구라고 할 수 있습니다. 다른 프로그래밍 언어를 배워보셨다면 이미 알고 계실 거라 생각이 들지만, 한번 정리해보도록 하겠습니다. 비교 연산자와 Boolean 데이터 타입 일단 우리가 수학 시간에 잠을 자지 않았다면, 1=1, 1 더보기
ep.04 제어할 태그 선택하기 CSS 기초는 알고 있기 때문에 지금 당장은 스킵하도록 하겠습니다. 너무나도 많은 속성이 있기 때문에 구글검색을 통하여 하나하나씩 알아 나가시는 것을 추천드리며, 태그 선택 단원부터 시작해보겠습니다. 기본적인 HTML코드는 선생님이 보여주신 예시와 비슷하게 아주 간단히 만들고 시작하겠습니다. 이런 느낌이 될겁니다. 이때 우리는 click을 했을때 style을 바꿔주고 싶은거니까, onclick이라는 이벤트를 사용하여 명령어를 입력해볼겁니다. 앞에서도 말했지만 type은 input의 종류, value는 이름(왼쪽 화면에서는 버튼안의 이름), 이어지는 onclick은 event입니다. 이벤트안의 큰따옴표안에 우리는 명령어를 입력하게 될겁니다. 이때 우리는 구글검색의 도움을 받게 될텐데, "javascript.. 더보기
ep.03 데이터타입/ 변수와 대입연산자 데이터타입 일단 데이터타입은 데이터의 종류라는 뜻입니다. 자바스크립트에는 데이터의 종류가 여러개가 있는데요, 대표적으로 많이 쓰는 타입 몇개만 정리를 해보자면 undefined : 정의되지 않은 값 null: 비어있는 값 boolean: true나 false로 나타낼수있는 값 number: 숫자 string: 문자열 object: 객체 그 외에도 다른 데이터타입이 있지만, 이정도가 많이 쓰이는 데이터타입이라고 할수있을것 같습니다. 이번 수업때는 number와 string의 차이를 보여주셨는데 number는 말그대로 숫자, string은 문자라고 생각하면 될것같습니다. 사진으로 보자면, 이렇게 차이를 아시겠나요? 따옴표가 없는 데이터값은 number, 따옴표있는 데이터값은 string 타입이기때문에 num.. 더보기
ep.02 콘솔 개인적으로 예시가 정말 흥미로웠던 부분이었습니다. 마지막에 일상생활 속에서 가볍게 코딩하여 문제를 해결할 수 있다는 명언에 감동하였던 강의였습니다! 브라우저 상에서 F12키를 누르면 오른쪽에 창이 하나 뜰 겁니다. 그때 console을 누르면 콘솔 기능을 사용할 수 있습니다. Elements옆에 Console 보이시죠? 그걸 누르면 사용할 수 있습니다. 선생님께서 알려주신 페이스북 랜덤 추첨 기능 예제는 굉장히 흥미로운 부분이었는데요, '파일을 생성할 필요없이 브라우저상에서 데이터를 받아와 바로 결과값을 도출해낼 수 있다.'가 핵심 포인트가 되겠네요! 예시의 코드를 다 외울 필요는 없고 '파일을 만들지 않고도 데이터를 받아와 쓸 수 있다.' 정도만 알면 될 것 같습니다. 이때 주의할 점은 모두가 다 콘솔.. 더보기

티스토리툴바