javascript는 4.0에서 업데이트 멈춤 => es5로 발전
1. 기초
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript - 기초</title>
</head>
<!-- 여기에 <script defer>써도 배열같은거 받을때 안먹음 스크립트는 밑에쓰기 -->
<body>
</body>
<!-- <script>는 상단과 하단에 쓸 수 있는데 여기에 하는것 추천 //상단은 오류가 날 수도 있음 -->
<script src="./js1.js?v=3"></script>
<script>
console.log("테스트코드");
</script>
</html>- <script> 는 상단과 하단에 쓸 수 있는데 웬만하면 하단에 쓰기
console.log("js 파일 정상로드");
var a = "홍길동";
a = "구나영";
var login = a + "님 환영합니다.";
console.log(login);
var b = 50;
var c = 25;
var sum = b + c;
console.log(sum);
var point = 5000;
var sum2 = point * 2 + 10000 * 2;
console.log(sum2);- Javascript의 주석
- // 한줄주석
- /* 여러줄주석 */
- var : 변수를 선언하는 선언문
- js는 var만 쓴다
- let, const 는 js가 아니다 =>ES(ECMA script es5, es6)
- "" : 문자값
- consol.log() : 결과값을 임시 도구틀에 출력하는 역할
- + : 문자와 문자를 결합, 숫자를 계산하는 기능 => 숫자에 " "쓰면 문자로 붙여버림 주의
😊응용문제
55000원 상품가격이 20% 할인된 가격을 출력
var product = 55000;
var sale = product * 0.8;
console.log(sale);=> 44000
2. 조건문 if
var userid="hong";
var userpw="a123456";
if(userid == "hong"){
console.log("동일한 아이디입니다.");
}
else{
console.log("아이디가 다릅니다.");
}
if(userpw == "a123456"){
console.log("패스워드가 확인되었습니다.");
}
else if(userpw != "a123456"){
console.log("패스워드가 다릅니다.");
}
//아이디와 패스워드를 모두 검토 조건문 (if문 안에 if문)
if(userid =="hong"){ //아이디 체크
if(userpw == "a123456"){
console.log("로그인 하셨습니다.");
}
else{
console.log("패스워드가 다릅니다.");
}
}
else{
console.log("아이디가 다릅니다.");
}
var a = 15.120;
var b = 150;
var c = "홍길동";
var d = true;
console.log(typeof(a));
console.log(typeof(b));
console.log(typeof(c));
console.log(typeof(d));
if(a > b){
console.log(a+"값이 큽니다.");
}
else if(a < b){
console.log(b+"값이 큽니다.");
}
else{
console.log("두 값이 같습니다.");
}- 자료형 : number, string, boolean(true, false), object(배열)
- typeof() : 자료형
😊응용문제
다음 숫자를 계산하여 어느 값이 작은 값인지 출력
단, 변수는 2개만 사용
1. 25 * 6 + 11 + 42
2. 33 + 7 * 14 * 8
if(num1 < num2){
console.log(num1 + " 값을 가진 숫자 1번이 더 작음");
}else if(num1 > num2){
console.log(num2 + " 값을 가진 숫자 2번이 더 작음");
}else{
console.log("두 숫자가 같음");
}=> 203 값을 가진 숫자 1번이 더 작음
1~120의 숫자 임의로 변수에 입력
다음과 같이 결과가 콘솔로그로 출력
10미만의 숫자입니다.
10이상의 숫자입니다.
45이상의 숫자입니다.
100이상의 숫자입니다.
var num = 5;
if(num >= 100){
console.log("100이상의 숫자입니다.");
}else if(num >= 45){
console.log("45이상의 숫자입니다.");
}else if(num >= 10){
console.log("10이상의 숫자입니다.");
}else if(num >= 1){
console.log("10미만의 숫자입니다.");
}else{
console.log("범위 밖의 숫자입니다.");
}=> 10미만의 숫자입니다.
나머지값을 이용하여 짝수, 홀수를 구분
var n = 102;
if(n % 2 == 0){
console.log("짝수값입니다.");
}else if(n%2!=0){
console.log("홀수값입니다.");
}=> 짝수값입니다.
3. 논리연산자
var mid = "kim";
var mpass = "a1234";
if(mid == "kim" && mpass == "a1234"){
console.log("로그인 성공");
}else{
console.log("로그인 실패");
}- 논리 연산자 : &&(and), ||(or)
- 논리 연산자를 사용하는 이유 : 여러가지의 조건을 복합적으로 체크하는 역할
😊응용문제
사용자가 임의 숫자를 하나 입력
숫자의 입력 범위는 1~150
논리연산기호를 사용하여 다음과 같이 임의 숫자에 맞는 결과 값을 출력하는 코드를 작성
1~50 범위 숫자입니다
51~100 범위 숫자입니다
101~150 범위 숫자입니다
숫자는 1~150 범위만 가능합니다
var rnum = 1100;
if(rnum>=1 && rnum<=50){
console.log("1~50 범위 숫자입니다");
}else if(rnum>=51 && rnum<=100){
console.log("51~100 범위 숫자입니다");
}else if(rnum>=101 && rnum<=150){
console.log("101~150 범위 숫자입니다");
}else{
console.log("범위 밖의 숫자입니다.");
}=> 범위 밖의 숫자입니다.
4. 반복문 for
var a = 10;
console.log(a);
a++; //1씩 증가
console.log(a);
var b = 10;
console.log(b);
b++; //1씩 감소
console.log(b);
var c = 5;
console.log(c);
c = c + 1;
c += 1;
console.log(c);
var d = 0;
console.log(d++); //변수++ : 출력후 +1
console.log(++d); //++변수 : +1 후 출력
var z;
for(z=1;z<=10;z++){ //오름차순
console.log(z);
}
var k;
for(k=10;k>0;k--){ //내림차순
console.log(k);
}- for문 사용 : 상품출력, 게시판 리스트, 배너, 장바구니, 댓글출력...
- for(시작값;범위값;증감)
😊응용문제
for문을 이용하여 다음과 같이 출력되도록 코드를 작성하시오
숫자 25~17까지 출력되는 반복문
var i;
for(i=25;i>=17;i--){
console.log(i);
}
반복문(for)를 이용하여 다음과 같은 결과가 나오도록 코드를 작성
1~10 모든 숫자를 합한 결과값을 출력
var h=1;
var sum=0;
for(h=1;h<11;h++){
sum+=h;
}
console.log(sum);=> 55
반복문 + 조건문 : 1 ~ 10까지 숫자 중 6 ~ 8까지 출력
var ff;
for(ff=1;ff<11;ff++){ //1~10까지 반복
if(ff>=6&&ff<=8){ //6~8이라면
console.log(ff); //출력
}
}
1~10 짝수만 출력
var e;
for(e=1;e<11;e++){
if(e%2==0){
console.log(e);
}
}
1~20 숫자 반복문 중 짝수, 홀수 각각의 최종 합계 출력
var hh;
var osum=0;
var esum=0;
for(hh=1;hh<21;hh++){
if(hh%2==0){ //짝
esum+=hh;
}else if(hh%2==1){ //홀
osum+=hh;
}
}
console.log("1~20 홀수들의 합 : "+osum);
console.log("1~20 짝수들의 합 : "+esum);
4. 반복문 while
var a = 1;
while(a<11){
console.log(a);
a++;
}
var b = 10;
while(b>0){ //역순
console.log(b);
b--;
}- while(범위){증감}
- 증감 안할시 loop => 서버 사망
var c=1;
while(c <=9){ //while문으로 7단
console.log(7 + "*" + c + "=" + 7*c);
c++;
}
var d=1;
while(d<11){ //1~10에서 홀수만 출력
if(d%2==1){
console.log(d);
}
d++;
}
😊응용문제
while문과 조건문을 이용하여 다음과 같은 결과가 되도록 코드를 작성
1~100 숫자중 5의 배수만 출력
var e=1;
while(e<101){
if(e%5==0){
console.log(e);
}
e++;
}
사용자가 직접 2개의 숫자를 입력시 반복문으로 작동되는 코드
단, 첫번째 입력값보다 두번째 입력값이 더 큰 숫자를 무조건 입력
var no1 = 5;
var no2 = 17;
if(no1 >no2){
console.log("숫자값을 잘못 입력하셨습니다.");
}
else if(no1 == no2){
console.log("두 숫자값이 같으므로 다시 입력하세요.");
}
else{
while(no1 <= no2){
console.log(no1);
no1++;
}
}
5. 반복문 do~while
var a =1;
do{
console.log(a);
a++
}while(a<6);
var b = 5;
do{
console.log(b);
b--
}while(b>0);
var c = 20;
do{
if(c%2==0){ //나머지가 0일때(짝수일때)
console.log(c);
}
c--
}while(b>0);- do{증감}while(범위)
😊응용문제
do~while문으로 다음과 같이 출력되는 코드 작성
구구단 9단 중 짝수값만 모두 합친 결과값을 출력
var n=1;
var n9=0;
var sum = 0; // 짝수 합계
do{
n9=9*n; //9단 계산 결과
if(n9%2==0){ //결과값에 대한 짝수조건
sum+=n9; //짝수값 누적
}
n++;
}while(n<=9);
console.log(sum);=> 180
do~while문 이용하여 코드 작성
1~100 숫자중 8의 배수중 60이상인 숫자만 출력
var i=1;
do{
if(i%8==0){
if(i>=60){
console.log(i);
}
}
i++;
}while(i<=100);