잰니의 성장블로그✈

1. 기본 구조 만들기 1 2 3 클릭하세요~ .btn { width: 150px; height: 40px; background-color: royalblue; border-radius: 10px; color: aliceblue; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0,5s; } .btn:hover { background-color: blue; } .btn span { font-size: 22px; font-weight: 700; } 2. Java Script 이용해서 제어하기 const itemEls = document.querySelectorAll('.item') const b..

■ 인수와 매개변수 - 함수 사용할 때마다 조금씩 다르게 동작 function hello(name) { const message = 'hello ' + name + '!' console.log(message) } hello('world') hello('Jaeeun') hello('Jen') ■ 함수 종료 - 원하는 부분에서 함수의 동작을 종료 function hello(name) { if(name.length > 5){ return } const message = 'hello ' + name + '!' console.log(message) } hello('world') hello('Jaeeun') hello('Swon')

■ const 변수 - 값(데이터)을 다시 할당할 수 없는 변수 (권장) const number = 123 console.log(number) //123 number = 456 // Error ! ■ let 변수 - 값(데이터)을 다시 할당할 수 있는 변수 (상황에 따라) // let 변수이름 = 데이터 let number = 123 console.log(number) // 123 number = 456 console.log(number) // 456 ■ 예약어 - 특별한 의미를 가지고 있어, 변수나 함수의 이름으로 사용 할 수 없음 //All Error! const let = 123 const const = 123 const function = 123 const if = 123 const new = 1..

■ 낙타 표기법(camelCase) camelCase helloWorld parkYoungWoong ■ 연산자 console.log(1+2) // 3 console.log(2-3) // -1 console.log(8*2) // 16 console.log(9/3) // 3 const 변수 = 85 // 할당 연산자 ■ 문자 데이터 const stringData = 'hello world' // 문자 데이터가 stringData에 할당이됨 ■ 숫자 데이터 const numberData = 1234 // 따옴표로 묶여있으면 문자데이터 ■ 불린 데이터(논리 데이터) const booleanData1 = true // (참) const booleanData2 = false // (거짓) ■ Null 데이터 (재사..

구글 드라이브 접속 -> + 새로만들기 -> 더보기 -> Google App Script page를 보여주는 html 파일을 불러오는 코드 function doGet() { return HtmlService.createHtmlOutputFromFile('index'); } 파일 추가를 해서 Html 파일을 생성한다. 새 배포 -> 웹 앱 -> 제목 지정하고 -> 배포하기 -> url 선택하면 아래와 같은 화면이 출력된다. 코드를 수정할때마다 실시간으로 업데이트가 되지않고, 방금전에 했던 작업을 반복해야하기때문에 번거로움이있다. 그래서 테스트 배포를 활용해서 진행해보기로 했다. 이렇게 하면 내가 저장하면 바뀌는 화면을 볼 수 있다. url을 창을 열어놓고 code.gs 에서 코드를 입력해준다. functi..

자바스크립트 객체 자바스크립트에서는 숫자, 문자열, 함수, 배열, 날짜 등의 데이터뿐만 아니라 HTML 요소와 브라우저에 관련된 모든 것이 객체 기반으로 되어 있다. 여기서 객체와 속성, 메써드를 정의해서 객체를 생성해본다. 객체에는 문서 객체 모델(DOM)과 브라우저 객체 모델(BOM)로 나눈다. 객체란 자바스크립트는 객체(Object) 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 숫자, 문자열, 함수, 배열 등도 모두 객체이다. 자바스크립트의 객체는 객체에 속한 변수인 속성(Property)와 객체에 속한 함수인 메써드(Method)로 구성된다. 하나의 객체는 데이터를 의미하는 속성과 데이터를 처리하는 기능을 가진 메써드의 집합으로 볼 수 있다.

더보기 - 책값 : - 원 - 할인율 : - % - 배송비 : - 원 ------------------------------------ 지불금액: - 원 거스름돈 계산하기 더보기 글씨 색상 변경하기 배경색 바꾸기

변수 스코프(scope) - 지역변수와 전역변수 사용자 함수 내 (서브루틴) 에서 사용되는 변수를 지역변수라고 하고 메인루틴에서 사용되는 변수를 전역변수(Global Variable)이라고 한다. 변수 선언에서 var 예약어를 사용했을 때 사용되는 영역(Scope)을 가지고 있기 때문에 재할당과 재선언을 할 수 있다. 함수가 다르면 동일한 함수를 재선언하고 값을 재할당해서 사용해도 된다. 하지만 잘못 사용하면 오류가 발생할 수 있기때문에 가급적 var를 사용하지 않도록 한다. 전역변수(함수 밖에서 선언하는 변수와 상수변수)는 최소한으로 사용하고, var 변수는 함수의 시작 부분에서 선언하며, for문에서는 var 보다 let를 사용해서 변수를 선언해주는 것이 좋다. 그리고 ES6 이상을 사용한다면 var..

함수 값 반환 자바스크립트에서 사용되는 함수는 변수와 마찬가지로 할 일을 수행한 뒤 결과로 나온 값을 함수 값 반환을 통해서 함수를 호출한 곳으로 값을 보낸다. document.write(), alert()와 같이 구체적인 행동 명령이 있는 함수의 경우 return 제어문은 필요없다. 그 이유는 함수는 원래 종료되면 호출 위치로 자동 복귀한다. 메인루틴과 서브루틴 : 자바스크립트를 포함해서 프로그래밍 언어에서 메인루틴은 서브루틴, 즉 함수 정의와 같이 프로그램의 부가적인 영역을 제외한 프로그램 흐름의 중심이 되는 부분을 의미한다. 프로그램은 메인 루틴의 처음 부분에서 시작되어 중간 서브루틴을 실행한 뒤 최종적으로 메인루틴에서 종료된다. ex) 첫번째 입력값부터 두번째 입력값까지의 합계 구하기 ex) 숫자..

함수(Function)란? 프로그램 원래 위에서 아래로 순차적으로 하나씩 실행되는데 제어문으로 실행 순서 로직을 변경할 수 있다. 그리고 프로그램의 기능별로 묶어서 원하는 기능만 프로그램해서 코드의 묶음(이를Code Block)을 만들어서 필요한 기능만 따로 실행하게 하는 것을 함수라고 한다. 자바스크립트 함수는 그 기능이 자체에 내장되어져 있는 내장함수와 사용자가 직접함수를 정의해서 사용하는 사용자(정의)함수로 나뉜다. 변수나 데이터를 정의해 둔 함수에 매개변수를 지정해서 함수를 호출하므로써 실행시키는데 함수의 실행으로 얻어진 결과 값을 호출 함수에 되돌려주기도 한다. 함수에서의 지역변수와 전역변수의 개념도 있다. alert() 함수를 사용해서 자바스크립트의 실행 내용을 웹 브라우저에 띄우는데 이도 내..