'Front-End/JavaScript'에 해당되는 글 18건
-
자바스크립트가 서버 사이드로 발전
2017.08.18 -
논리연산자
2017.03.13 -
함수
2017.03.11 -
while
2017.03.11 -
반복문 - for
2017.03.11 -
시간에 따라 다른 메시지 표시하기 - 논리 연산자
2017.03.11 -
동작의 범위를 널히자 - 조건 분기(else if)
2017.03.11 -
입력 내용에 따라 동작 변경하기 - 변수
2017.03.11 -
자바스크립트 문법 - IF 문
2017.03.08 -
요소 가져오기
2017.03.08
자바스크립트가 서버 사이드로 발전
자바 스크립트는 프로그래밍 적으로 웹 브라우저를 제어한다.
onclick="alert('Hello World')"
탈 웹브라우저
웹서버를 동작하게 한다.
서버 사이드 스크립트
(자바스크립가 웹 브라우저에서 사용하는것은
클라이언트 사이드 스크립트)
웹서버 <----요청---- 웹 브라우저
웹서버 ----응답----> 웹 브라우저
PHP 웹
JAVA
PYTHON
JavaScritp
기존에는 웹 브라우저를 제어했었던 자바스크립트
현재는 웹 서버를 제어하는 자바스크립트
= 자바스크립트를 웹 서버에서 사용하게 하는 기술의 대표가
Node.js
자바스크립트가 브라우저에서 벗어나서 서버 언어로 발전 = 탈웹
출처 : 생활코딩
https://www.youtube.com/watch?v=PZIPsKgWJiw
'Front-End > JavaScript' 카테고리의 다른 글
| 논리연산자 (0) | 2017.03.13 |
|---|---|
| 함수 (0) | 2017.03.11 |
| while (0) | 2017.03.11 |
| 반복문 - for (0) | 2017.03.11 |
| 시간에 따라 다른 메시지 표시하기 - 논리 연산자 (0) | 2017.03.11 |
논리연산자
'Front-End > JavaScript' 카테고리의 다른 글
| 자바스크립트가 서버 사이드로 발전 (0) | 2017.08.18 |
|---|---|
| 함수 (0) | 2017.03.11 |
| while (0) | 2017.03.11 |
| 반복문 - for (0) | 2017.03.11 |
| 시간에 따라 다른 메시지 표시하기 - 논리 연산자 (0) | 2017.03.11 |
함수만들기 및 호출하기
함수란 자수 사용하는 처리를 하나로 묶은 작은 단위의 프로그램(자바에서는 메소드)
함수 생성
<script>
var total = function (price) {
var tax = 0.08;
return price + price * tax;
}
</script>
함수호출
<script>
console.log('커피 기계이 가격은' + total(8000) + '원(부가세 포함)입니다.');
</script>
호출해야지 함수가 동작해서 결과를 total 뿌려준다
함수란 total()
매기변수 받기 원래 가겨(8000원)을 받는다.
지정한 처리(가공)를 함 8000+ 부가세를 계산해서
결과를 호출한 곳으로 반환 계산결과(8460)를 호출한 곳으로 반환한다.
함수 호출
함수명(필요한 매기변수)
함수작성
var 함수명 = function(필요한 매기변수){
구체적인 처리내용
}
매기변수 유효범위
var total=function(price){
price는 이 않에서만 사용할 수 있다
}
function 함수명(매기변수){
구체적인 처리 내용
}
return 은 반환하다 의미 오른쪽에서 있는 데이터 를 호출한 곳으로 반환한다.
return 명령이 실행되면 함수 처리도 함께 종료됨
'Front-End > JavaScript' 카테고리의 다른 글
| 자바스크립트가 서버 사이드로 발전 (0) | 2017.08.18 |
|---|---|
| 논리연산자 (0) | 2017.03.13 |
| while (0) | 2017.03.11 |
| 반복문 - for (0) | 2017.03.11 |
| 시간에 따라 다른 메시지 표시하기 - 논리 연산자 (0) | 2017.03.11 |
while
while(조건식){
// 여기가 반복시행된다
}
while문은 ()안의 조건식이 true인 동안 {~} 안의 처리르 계속 반복한다.
'Front-End > JavaScript' 카테고리의 다른 글
| 논리연산자 (0) | 2017.03.13 |
|---|---|
| 함수 (0) | 2017.03.11 |
| 반복문 - for (0) | 2017.03.11 |
| 시간에 따라 다른 메시지 표시하기 - 논리 연산자 (0) | 2017.03.11 |
| 동작의 범위를 널히자 - 조건 분기(else if) (0) | 2017.03.11 |
반복문 - for
숫자 증가
<script>
for(var i = i; i<= 10; i = i + 1){
console.log(i);
}
</script>
1부터 10까지 i의 숫자를 +1 씩 증가
결과
1
2
3
.
.
.
10
초기값 반복조건 실행 후 처리
for(var i = i; i<= 10; i = i + 1){
실행 내용
}
문자열 연결하기
for(var i = i; i<= 10; i = i++){
console.log(i + '장');
}
결과
1장
2장
3장
.
.
.
10장
덧셈
숫자 + 숫자
변수에 1을 더한다
변수 ++
'Front-End > JavaScript' 카테고리의 다른 글
| 함수 (0) | 2017.03.11 |
|---|---|
| while (0) | 2017.03.11 |
| 시간에 따라 다른 메시지 표시하기 - 논리 연산자 (0) | 2017.03.11 |
| 동작의 범위를 널히자 - 조건 분기(else if) (0) | 2017.03.11 |
| 입력 내용에 따라 동작 변경하기 - 변수 (0) | 2017.03.11 |
시간에 따라 다른 메시지 표시하기 - 논리 연산자
두 가지 이상의 조건식을 이용해서 하나의 조건 만들기
<script>
var hour = new Date().getHours();
if(hour >= 19 && hour <21){
window.alert('도시락 30% 할인!');
} else if(hour === 9 || hour === 15){
window.aler('도시락 하나 사면 하나 공짜!');
} else {
window.alert('도시락 사세요');
}
</script>
&& 연산자 다시락이 30% 할인되는 조건을 19시와 21시 사인경우 hour에 저장되 있는 값이 조건으로 만족
변수 hour의 값이 19이상이면서 21미만
26 if(hour >= 19 && hour < 21){
}
왼쪽 오른족 조건식의 true/false 조합과 || 평가 결과
왼쪽 오른쪽 || 평가 결과
true true true
true false true
false true true
false false false
논리 연산자 목록(a와b는 조건식)
연산자 의미
a && b a와b 모두 true일 때 최종 결과가 true
a || b a와b중 하나라도 true 이면 최종 결과가 true
! a a가 false이면 최종 결과가 true
연산자 의미 true가 되는 예
a === b a와b 가 같으면 true 문자 === 문자
3+9 === 9
a !== b a와b가 다르면 true 이집트수도 !== 카이로
40+6 !== 42
a < b a가b보다 작으면 true 7*52 <365
a <= b a가b 이하이면 true 3*5 <=21
3*7 <=21
a > b a가b보다 크면 true 15*4 >45
a >= b a가b 이상이면 true 4*60>=180
1 + 2 >= 3
'Front-End > JavaScript' 카테고리의 다른 글
| while (0) | 2017.03.11 |
|---|---|
| 반복문 - for (0) | 2017.03.11 |
| 동작의 범위를 널히자 - 조건 분기(else if) (0) | 2017.03.11 |
| 입력 내용에 따라 동작 변경하기 - 변수 (0) | 2017.03.11 |
| 자바스크립트 문법 - IF 문 (0) | 2017.03.08 |
동작의 범위를 널히자 - 조건 분기(else if)
조건 분기 두 개의 if문(즉, 두개의 조건식)을 사용해서 처리 방식을 세가지로 늘리도록
3가지 분기
yes false no인지 체크
<script>
var answer = window.prompt('도움말을 보시겠습니까?');
if(answer === 'yes'){
window.aler('탭키로 점프해서 장애물을 피합니다.');
} else if(answer === 'no') {
window.alert('게임 진행중...');
} else {
window.alert('yes 또는 no로 대답해주세요');
}
</script>
if문 { ~ }
if(answer === 'yes'){
처리I
} else if(answer === 'no') {
처리II
} else {
처리III
}
조건문 응용1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.')
if(id=='egoing'){
alert('아이디가 일치 합니다.')
} else {
alert('아이디가 일치하지 않습니다.')
}
</script>
</body>
</html>조건문 응용2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
id = prompt('아이디를 입력해주세요.');
if(id=='egoing'){
password = prompt('비밀번호를 입력해주세요.');
if(password==='111111'){
alert('인증 했습니다.');
} else {
alert('인증에 실패 했습니다.');
}
} else {
alert('인증에 실패 했습니다.');
}
</script>
</body>
</html>'Front-End > JavaScript' 카테고리의 다른 글
| 반복문 - for (0) | 2017.03.11 |
|---|---|
| 시간에 따라 다른 메시지 표시하기 - 논리 연산자 (0) | 2017.03.11 |
| 입력 내용에 따라 동작 변경하기 - 변수 (0) | 2017.03.11 |
| 자바스크립트 문법 - IF 문 (0) | 2017.03.08 |
| 요소 가져오기 (0) | 2017.03.08 |
입력 내용에 따라 동작 변경하기 - 변수
클릭한 버튼의 결과를 변수에 저장한다.
<script>
var answer = window.prompt('도움말을 보시겠습니까?');
console.log(answer);
</script>
prompt 메서드 는 alert, confirm과 같은 window 객체의 메서드 () 안에 텍스트나 수식의 계산 결과를 다이얼 로그 박스로 표시
프롬프트 표시하기
window.prompt(메세지)
변수란?
변수 사용법 패턴
1. 변수를 '정의한다'
2. 변수에 데이터를 '대입한다'
3.-a 변수에서 데이터를 '잃는다'
3-b 변수의 데이'변경한다'
3-a 와 3-b는 순서가 바뀌는 경우가 있고 3-b를 하지 않는 프로그램도 있다
1. 변수를 정의한다
데이터를 저정하고 싶을때는 변수를 정의한다
var answer; // 데이터 타입 var 에 변수명 answer;
2. 변수에 데이터를 '대입한다'
데이터를 넣는 것을 대입한다 라고 한다 // 대입 연산자 =
var answer = window.prompt('도움말을 보시겠습니까?'); // answer 변수에 window.prompt('도움말을 보시겠습니까?'); 대입
var answer = window.prompt('도움말을 보시겠습니까?');
표시 도움말을 보시겠습니까?
yes 입력
var answer = 'yes'; // 입력된 yes 가 반환한 값으로 변경된 후 변수 answer에 대입된다
대입연산자 기호 =
오른쪽에 있는 데이터를 왼쪽의 변수나 프로퍼티 등에 대입
좌 우
answer = 'yes';
3-a 변수에서 데이터를 읽는다
console.log(answer);
3-b 변수의 데이터를 변경한다
<script>
var answer ='yes';
console.log(answer);
answer = 'no';
console.log(answer);
</script>
변수 라이프 싸이클
변수는 자바스크립에서 데이터를 저장하기 위한 모적으로 사용하지만, 자바스크립트가 변수를 기억하고 있는 기간은 '해당 페이지가 표시되고 있는 기간뿐'
링크를 통해 다음 페이지로 가거나 브라우저 창을 닫으면 변수와 변수가 저장한 값이 사라짐
변수명 정하는 방법
변수명의 조건
1. 문자, 밑줄(_), 달러 기호($), 숫자를 사용할 수 있다. 기타 기호(마니너스(-)나 등호(=) 등)은 사용할수 없다
2. 변수명의 첫 번째 글자에는 숫자를 사용할 수 없다
3. 예약어를 사용할 수없다.
예약어 목록
break case 등등
실무에서는 앞글자 소문자 뒤글자 대문자
appleApple
그리고 가능하면 연상되는 변수명으로 작성
대부분 실무에서 변수명 모하지?!!!!!!! <<<<<<<< 이걸로 시간을 많이 보냄 ㅋㅋㅋ
2. 변수에 저장된 내용으로 동작을 바꾼다
<script>
var answer = window.prompt('도움말을 보시겠습니까?');
if (answer=== 'yes') {
window.alert('탭키로 점프해서 강애물을 피합니다.');
}
</script>
입력한 값이 yes 일경우 window.alert('탭키로 점프해서 강애물을 피합니다.'); 출력
변수 answer에 저장되 이쓴ㄴ 데이터가 'yes'일 때, if문의 조건식이 true가 된다.
=== 변수에 저장되있는 데이터가 특정값이닞 판단하려면 등호 세개 '===' // === 왼쪽과 오른쪽이 같은가 으미
=== 왼쪽과 오른쪽이 완전히 동일한 경우에만 true라고 판단(데이터형을 변환하지 않고 좌우를 비교
==는 양쪽이 동일한 것처럼 보이도록 자바스크립트가 방법을 찾는다(데이터형을 변환해서 가능한 한평가 결과가 true가 되도록 한다)
'Front-End > JavaScript' 카테고리의 다른 글
| 시간에 따라 다른 메시지 표시하기 - 논리 연산자 (0) | 2017.03.11 |
|---|---|
| 동작의 범위를 널히자 - 조건 분기(else if) (0) | 2017.03.11 |
| 자바스크립트 문법 - IF 문 (0) | 2017.03.08 |
| 요소 가져오기 (0) | 2017.03.08 |
| JS 소스코드 작성방법 (0) | 2017.03.07 |
자바스크립트 문법 - IF 문
조건 분기 (IF)
조건을 설정하고 참거깃 값(true/false)
window 객체의 confirm 메서드 사용
<script>
console.log(window.confirm('게임시작! 준비됐나요?'));
</script>
confirm 메서드는 alert 메서드에 없는 기능 있음
다이얼로그를 표시 하고 특정 값을 반환하는 기능
console.log(window.confirm('게임시작! 준비됐나요?'));
[ 확인 ] ↓ [ 취소]
console.log(true); conole.lgo(false);
대체한다 대체한다
값을 반환하는 메소드
confirm 메서드의 반환 값은 반드시 true false 하나
선택한 버튼에 따라 메시지 변경
반환을 판단한 이후 처리를 결정(분기)하게됨
<script>
if(window.confirm('게임 시작! 준비됐나요?')){
console.log('게임을 시작합니다'); // 확인 버튼 클릭 출력 msg
} else {
console.log('게임을 종료합니다.'); // 취소 버튼 클릭 출력 msg
}
</script>
if문
if문은 () 안에 true 일 때 그 다음에 오는 { ~ } 부분의 코드를 실행함
또한 () 안에 false이면 else 이후의 { ~ } 코드를 실행
if문 형식
if(조건식){
조건식이 true이면(성립하면) 실행하는 처리
} else {
조건식이 false이면(성립하지 않으면) 실행하는 처리
}
true 실행 예제
if(true){
console.log('게임을 시작합니다'); // 여기가 실행
} else {
console.log('게임을 종료합니다.');
}
false 실행 예제
if(false){
console.log('게임을 시작합니다');
} else {
console.log('게임을 종료합니다.'); // 여기가 실행
}
'Front-End > JavaScript' 카테고리의 다른 글
| 동작의 범위를 널히자 - 조건 분기(else if) (0) | 2017.03.11 |
|---|---|
| 입력 내용에 따라 동작 변경하기 - 변수 (0) | 2017.03.11 |
| 요소 가져오기 (0) | 2017.03.08 |
| JS 소스코드 작성방법 (0) | 2017.03.07 |
| JS 기본 문법 (0) | 2017.03.07 |
요소 가져오기
요소 가저오기 2단계
1. 변경하고 싶은 HTML 태그와 콘텐츠 요소를 가져온다
2. 가져온 요소의 콘테츠를 변경한다
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>2-04_html</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>HTML 변경하기</h1>
<h2>요소 가져오기</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
<p id="choice">여기에 일시를 표시한다</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
console.log(document.getElementById('choice'));
</script>
</body>
</html>
핵심 자바스크립트는 알파벳 대문자, 소문자를 구분한다
가져온 요소의 콘텐츠 변경
<section>
<p id="choice">여기에 일시를 표시한다</p>
</section>
<script>
document.getElementById('choice').textContent = new Date();
console.log(document.getElementById('choice').textContent);
</script>
textContent = new Date(); // 현재 일시 표시
요소의 콘테츠를 변경하는 textContent
document.getElementById(ID명).textContent = 변경하고 싶은 문자열;
Ex) String
document.getElementById('choice').textContent = '테스트입니다';
Ex) 가져온 요소의 콘텐츠만 끍어와서 콘솔에 출력한다.
<script>
document.getElementById('choice').textContent = new Date();
console.log(document.getElementById('choice').textContent);
</script>
textContent는 프로퍼티 ~ 객체의 상태를 나타낸다
window나 document 같은 모든 객체는 메스 외에도 프로퍼티(property)를 가지고 있다.
○○객체의 □□는 ☆☆이다
○○객체의 □□를 ☆☆로 한다
□□를 프로퍼티, ☆☆를 프로퍼티 값 이라고 할수 있다
일반적으로 프로퍼티 값은 읽고/쓰기가 가능하다(읽기 전용인 프로퍼티 존재)
<p id="choice"></p>의 textContent를 newDate()으로 한다
<p id="choice"></p>의 textContent 프로퍼티를 변경하고 있는 것이다.
** Element 객체
document.getElementById('ID명') 으로 가져온 요소는 Element 객체라는 독자적인 메서드와 프로퍼티를 가진 객체로 취급
textContent는 사실 Element 객체의 프로퍼티 중 하나
** 객체 정리
자바스크립트 프로그램을 작성하거나 코드를 이해하기위해서 ' 객 체 ' 가 무엇인지 이해하는 것이 매우 중요하다
브라우저를 구성하는 부품이나 HTML문서 그리고 이번에 사용한 일시 나 몇 번이고 등장한 문자열은 자바스크립트에서 모두 객체로 취급된다
객체에는 window 객체, console 객체, document 객체 등이 있으며 각각 고유의
메서드(객체에 xx해라, 하고 지시한다)
프로퍼티(객체의 상태를 나타낸다)
메서는 반드시 뒤에 ()를 붙여야한다. (0안에 매개변수를 지정할 수 있는것도 있다.
또한 프로피티는 객체가 가지고 있는 값을 일거나 변경할 수가 있다
요소변경 메소드 한개더
write // 가독성과 유지보수 어려움때문에 사용안함
<section>
<p id="choice">
<script>
document.write(new Date());
</script>
</p>
</section>
'Front-End > JavaScript' 카테고리의 다른 글
| 입력 내용에 따라 동작 변경하기 - 변수 (0) | 2017.03.11 |
|---|---|
| 자바스크립트 문법 - IF 문 (0) | 2017.03.08 |
| JS 소스코드 작성방법 (0) | 2017.03.07 |
| JS 기본 문법 (0) | 2017.03.07 |
| 자바스크립트 정체 (0) | 2017.03.04 |
