본문 바로가기
728x90
반응형

분류 전체보기65

Ex. 화면 사이즈 변경에 따라 바뀌는 배경색 오늘의 과제! 화면 사이즈를 변경하면 배경색이 바뀌도록 해보자. body에 클래스를 적용하여 css를 통해 배경색을 여러 종류로 설정한 후 js를 통해 resize시 배경색을 변경하는 함수를 만들자. 먼저 .html 태그에 class를 추가해놓자. 사이즈를 변경할 것이고, 배경색을 컨트롤할 것이므로 이를 css에 설정한다. .css .smallSized{ background-color: blueviolet; } .mediumSized{ background-color: deepskyblue; } .bigSized{ background-color: darkorange; } 세가지 사이즈에 적용할 배경색 컬러를 설정했다. 현재 body에 적용된 사이즈는 medium이며, small과 big을 변경될 것이다. .. 2023. 5. 30.
05 Condition 조건문 연습하기 조건문 ( Condition ) Practice 1 음주 가능 연령 측정기 이번에 만들 것은 음주 가능 연령 측정기를 간단하게 구현해볼 것이다. 브라우저 팝업창을 통해 질문을 통해 답을 구할 수 있는 필드를 구현할 수 있다. 간단한 입출력 구문이 가능한 것을 활용하여 구현해보자. prompt();라는 명령어를 사용해볼 것이다. 그리고 데이터 타입을 string =>> number로 바꾸는 작업을 해보고, if / else로 경우에 따라 다른 실행이 가능하도록 해보자. const age = prompt("How old are you?"); console.log(typeof age); console.log(age, parseInt(age)); 먼저 prompt();를 통해 팝업창을 띄워 "How old ar.. 2023. 5. 30.
04 Function에서 Return의 의미 Return function에서 사실상 가장 중요한 개념을 이제 알아야 한다. 이전까지 결괏값을 보고 확인하기 위해 console을 활용했다. 브라우저에서 콘솔 화면에 값을 띄워주는 함수가 console.log();라는 것이 있기 때문이었다. 하지만 실제로 function을 사용할 때는 콘솔에서 확인하기 위해 만들지는 않기 때문에 실제 코드에서는 그 결과값을 어떻게 가져오는 지를 알아야겠다. 1. Function에서 Return의 의미 이전처럼 콘솔로 결과를 확인하는 함수를 잠시 살펴보자 const a = 10; function plus(kAge){ console.log( kAge + 2); } plus(a); 이처럼 함수 plus 라는 것은 a 값을 kAge에 대입해서 +2 더하기를 실행한다라고 정의하.. 2023. 5. 30.
03 Function으로 계산식 만들기 Function 1. Function의 사용방법 2. Function을 이용한 계산식 만들기 Function은 계속 반복해서 뭔가 재생하고 만들 수 있게 해 준다. 이제 그냥 변수로 뭔가를 정의하는 차원이 아니고, 어떤 명령어를 우리가 직접 만들어서 사용한다고 보면 된다. 1. Function 의 사용 방법 console.log(); Array.push(); alert(); 우리가 여태 본 것들, 이런 것들이 모두 function의 일종이다. 그 특징은 보다시피 끝에 () 괄호를 넣는다는 것이다. console.log("Hello, My name is Petter, I am 25 years old."); console.log("Hello, My name is Sonnay, I am 21 years old.. 2023. 5. 30.
02 배열과 오브젝트 Array & Object Array 배열과 Object 오브젝트 1. Array 배열 2. Object 오브젝트 우리는 데이터를 만들 것이다. 그리고 그것을 가져다 써야 할 뭔가를 또 만들 것이다. 데이터를 만드는 방식을 간단히 살펴보자. Array는 여러 속성 값들을 나열하여어 하나의 통 안에 넣어둔다는 의미이며 Object는 속성과 값을 대응시켜 나열하여 담아둔다는 것에서 차이가 있다. 1. Array 만들기 배열이라는 것 자체는 데이터 관리를 편리하게 하기 위해 만들어진 것이다. string과 같은 데이터가 무수히 많이 있는데, 그 안에서 무언가를 꺼내와서 사용하고 싶을 때 어디에 있는 몇 번째 아이를 가져오겠다. 할 경우에 배열을 사용한다. 보통 변수 하나에 하나의 값을 가지는데, 이는 여러 값을 동시에 담을 수 있다는 .. 2023. 5. 30.
01 데이터 타입과 변수 Data Type, Variable 데이터 타입과 변수 1. Data Type 2. Variable 1. Data Type 자바스크립트 등 프로그래밍에서 일반적인 숫자, 문자열을 그대로 인식하여 출력함 1, 2, 3, 4+5, 등등 "나" , "my" , "is to get" , " i " + " have" , 등등 변수의 선언및 할당은 정해지지 않은 숫자나 문자열을 다른 입력을 통해 대입시키기 위해 필요함 즉, 인터페이스를 통한 입력을 위해서 하나의 메모리를 사용하기 위한 초기 설정이라고 볼 수 있음 이러한 데이터는 선언 > 초기화 > 할당의 순서로 이뤄짐 const 상수 (변하지 않음) constant 재선언x, 재할당x 기본으로 사용 let 변수 (변하는) 재선언x, 재할당o 필요시만 사용 var 변수 상수 개념없음 재선언o, 재할당.. 2023. 5. 30.
00 웹 프로그래밍의 시작 html, css, javascript 웹 프로그래밍의 시작 1. html 2. css 3. javascript 웹 프로그래밍을 어렵게 생각할 필요가 없다 내가 만들고 싶은 걸, 어떻게든 만들어서 세상에 보여줄 테다 라는 생각을 가지고 있다면 누구든 만들 수 있다. 딱 세 가지만 알면 된다. html, css, js 간단하지 않은가? html : hyper text markup language : 한 마디로 글자에 링크가 씌워진 언어라고 할 수 있음 그러니까 우리가 인터넷 화면에서 보는 것들은 글자 아니면, 이미지 (혹은 영상)다. 이미지를 직접 프로그래밍으로 만들 수는 없으니까, 다른 미디어를 사용하여 갖다 쓰는 것이며, 이를 웹 페이지에 보여주기 위해서는 결국 이미지를 어딘가 올려놓고(혹은 이미 올려진) 그것이 있는 위치와 이름을 찾아서 .. 2023. 5. 30.
Tips. 프로세싱 작업을 블로그에 게시하는 방법 2편 프로세싱 결과물을 블로그에 게시하기 1편은 프로세싱 언어로 작성한 코드를 그대로 복붙하여 이용하는 방법이었습니다.2편은 자바스크립트 언어로 변환 작성한 코드를 이용하는 방법입니다.        #1 프로세싱으로 작업한 인터랙티브 이미지를 블로그에 올릴 수 없을까 라는 고민에서 시작일반적인 이미지 즉, jpg, png, gif 와 같이 정지된 작업물 혹은 움짤 정도는 블로그에 올리기에도 괜찮아요 하지만 마우스에 반응하는 이미지는 일반 블로그에 올리기가 쉬워보이지 않네요 웹을 다룰 줄 안다면야 자신의 웹호스팅을 통해서 html 파일을 작성하여 올릴 수 있을거예요  #2 어떻게 하면 블로그에 프로세싱이 동작하도록 올릴 수 있을까프로세싱은 자바기반 혹은 자바스크립트를 활용하는 언어예요 블로그에 프로세싱을 게시하.. 2023. 5. 30.
Tips. 프로세싱 작업을 블로그에 게시하는 방법 1편 프로세싱 결과물을 블로그에 게시하는 방법  1. prosessing.js 스크립트 넣기2. 스크립트 안에 코딩하기3. html에서 canvas 사용 확인하기      #1 프로세싱을 웹에 게시하는 방법은 여러가지가 있어요openprocssing.org 사이트를 통해 웹에서 직접 코딩하고 저장하여 자동으로 게시되는 방법이죠 이는 다양한 모드를 제공합니다. P5js, Html/CSS/JS, Pjs 모두 지원해요 모드를 선택한 후 해당 언어를 사용해서 게시 가능해요 해당 사이트내에서 자신의 채널을 가질 수 있지만, 일반 블로그 처럼 활용하기는 어렵죠 p5js.org 사이트에서도 웹에서 직접 코딩하여 저장하고 게시하는 방법도 있어요 이는 위의 경우처럼 다양한 모드를 지원하지는 않고, 해당 언어를 사용해야 하죠 .. 2023. 5. 30.
2. 프로세싱 준비 프로세싱 준비하기 1. Processing 검색 2. 프로그램 다운로드 페이지 3. window 64bit 용 다운로드 4. 압축풀기 5. 드라이브/ 루트에 넣기 6. Processing.exe 실행 7. 실행화면 확인 1. 구글에 processing 검색, 최상단 주소 클릭 Processing.org 2. 다운로드 프로그램 3. processing 4.0beta 7 for windows 64bit (22/3/4) 다운로드 4. 다운로드 받은 zip파일을 압축풀기 해줍니다. 5. 해당 폴더 내에 아래 보이는 것 처럼 폴더째로 옮겨줘요. 되도록 본인 컴퓨터 C: D: E: 등 드라이버에 제일 루트에 붙여넣기 해요. 이렇게 루트에 두어야 에러가 잘 안생기고 부하가 안걸리고 잘 동작되는데 도움을 줄거예요. 저.. 2023. 5. 30.

티스토리툴바