letsgoddud

안녕하세요! 오늘은 자바스크립트의 연산자, 변수 등을 사용한 간단한 프로그램 만들기 예제 2가지를 풀어보겠습니다. 예제 1 적정 체중을 구하는 테스트기 만들기 *적정 체중 계산법 적정 체중 = (신장 - 100) * 0.9 코드 작성 순서 1. prompt() 메서드로 이름, 신장, 몸무게와 같은 필요 정보 입력값 받고 변수 지정하기 2. 적정 체중 계산법을 사용하여 적정 체중인지 아닌지 구하기 (오차범위 ±5) 3. 삼항 조건 연산자를 사용하여 화면에 나타내기 1. prompt() 메서드로 이름, 신장, 몸무게와 같은 필요 정보 입력값 받고 변수 지정하기 var name, var height, var weight를 통해 각각의 이름, 신장, 몸무게와 같은 필요 정보를 prompt() 메소드를 통해 받습..

안녕하세요! 오늘은 CSS에서 변수 var()를 사용해 보도록 하겠습니다. CSS에 변수 var()를 사용하는 이유? CSS에서 변수 var()를 지정하면 각각의 선택자에 공통된 CSS를 주고싶을 때 선택자 하나하나 별도로 속성과 값을 지정해주지 않고, 미리 지정해 둔 변수를 넣어 한번에 선택자를 관리할 수 있어 편리합니다. 1. HTML setting html에 4개의 버튼을 만들고 class명을 지정해 주었습니다. 2. 변수 지정 CSS에 변수 지정 방법 1. :root 선택자 만들기 :root 안에 변수를 넣어줍니다. 수정에 용이하도록 최상단에 배치합니다. 2. --변수명 변수 이름을 지정할 때는 ' --변수명 ' 형태로 지정합니다. 변수명은 최대한 직관적으로 알아보기 쉽게 정해줍니다. 2. 각 선..

안녕하세요! 오늘은 jquery를 사용하여 별점 주기 프로그램을 만들어보겠습니다. 결과물 결과물 설명 : 왼쪽의 별점을 클릭하면 별점의 갯수에 따라 오른쪽의 텍스트 및 아이콘이 변화하는 효과를 주기 위해 addClass, removeClass 이벤트를 주었으며, index() 함수로 별점 카운팅 갯수를 변수 안에 넣어 if, else if 조건문으로 script 안에 html을 추가하여 아이콘 img가 나타나도록 하였습니다. jquery CDN을 head 태그 안에 미리 링크해놨으며, 별 아이콘은 폰트어썸의 i태그를 가져왔습니다. 폰트어썸 CDN과 구글 웹폰트 CDN을 임포트 했으며, 콘텐츠를 정중앙 배치 시켰습니다. 콘텐츠를 담고있는 .star..

이번에는 자바스크립트의 함수 종류를 자세히 알아보겠습니다. 05 - 3 여러 번 사용할 수 있는 함수 만들기 #1 매개변수와 인수 위의 addNumber() 함수는 계산 값 10과 20을 고정해놓아서 몇 번 실행해도 같은 결과가 나옵니다. 그렇다면 addNumber() 함수의 입력값을 바꾸고 여러 번 사용하기 위해서는 어떻게 해야할까요? 이 때 필요한 개념이 '매개변수'와 '인수'입니다. 함수를 실행하기 위해 필요하다고 지정하는 값을 매개변수라고 하며, addNumber(a,b)에서 a,b가 매개변수 입니다. 이렇게 매개변수를 지정하고 addNumber()함수를 호출할 때 넘겨주는 값을 인수라고 합니다. #2 두 수를 더하는 함수 실행하기 ① var num1 = parseInt(prompt("첫번째 숫자..

저번 시간에 배웠던 예약어 var에 이어 ES6에서 새롭게 사용하는 예약어 let과 const를 자세히 알아보겠습니다. 05 - 2 let과 constant로 변수 선언하기 #1 let과 constant 변수 특징 1. 블록 안에서만 쓸 수 있는 변수 var와 let, const의 가장 큰 차이는 스코프(scope)입니다. ( 스코프 : 변수가 적용되는 범위 ) var는 함수 영역의 스코프를 가지지만, let과 const는 블록영역의 스코프를 가집니다. var : 함수 영역(레벨)의 스코프 let , const : 블록 영역의 스코프 let으로 선언한 sum은 calcSum()의 블록{ } 안에서만 사용할 수 있습니다. 2. 재할당은 가능하지만 재선언은 할 수 없는 변수 let sum을 앞에 선언했다가 ..

자바스크립트의 중요한 요소 함수와 변수를 같이 다루어 보겠습니다. 05 - 1 여러 동작을 묶은 덩어리, 함수 #1 함수란 무엇인가? : 자주 실행하는 기능에 포함된 명령이 여러가지일 때 그 명령을 한번에 실행할 수 있게 한 덩어리로 묶은 주머니 #2 함수를 사용하면 왜 좋을까? 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있습니다. #3 함수 정의하고 실행하기 함수 선언 --------------> 함수 실행 (함수 호출) ① 함수 선언 function addNumber(){ var sum = 10 + 20; console.log(sum); } ② 함수 실행 addNumber() #4 버튼으로 함수를 실행하는 프로그램 만들기 ① button 태그에 onclick = "addNumber()..

저는 연산자 공부할 때 정말 헷갈리더라구요..! 연산자에 대해 자세히 파헤쳐 보도록 하겠습니다. 03 - 3 연산자 이해하기 #1 연산자와 피연산자 구별하기 currentYear - birthYear + 1 피연산자 연산자 #2 기초 산술 연산자 정리 분류 연산자 이름 기호 설명 사칙 연산자 더하기 + 두 값을 더한다. 빼기 - 앞에 값에서 뒤에 값을 뺀다. 곱하기 * 두 값을 곱한다. 나누기 / 앞에 값을 뒤의 값으로 나눈다. 나머지 연산자 나머지 % 앞의 값을 뒤의 값으로 나눈 나머지 값을 구한다. 증감 연산자 증가 ++ 변숫값을 1만큼 증가시킨다. 감소 -- 변숫값을 1만큼 감소시킨다. #3 증감 연산자 이해하기 *** 헷갈릴 수 있으니 눈 크게 뜨고 잘 보세요!! *** 증감 연산자는 피연산자 뒤..

자바스크립트 변수에 대해 자세히 알아보겠습니다. 03 - 1 변수란 무엇일까? 자바스크립트에서 변수는 변하는 값을 저장할 때 사용합니다. 이전의 2장에서 prompt창에 각각 서로의 이름을 입력할 때 쓴 'name'이라는 변수처럼 상황에 따라 다른 값을 받아야 할 때 변수를 사용합니다. #1 변수를 선언하는 규칙 세 가지 1. 이름은 의미 있게 짓는다. 변수의 이름은 나중에 알기 쉽게 하기 위해서 아무 의미 없이 지으면 안됩니다. 2. 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어 준다. 여러 단어를 연결하여 변수 이름을 지을 때는 첫 번째 단어는 소문자로, 두 번째 단어 부터는 대문자로 시작하는 방법을 많이 사용합니다. 개발자들 사이에서 이 규칙을 낙타 표기법(Camel Case)라고 부릅니다...