문제: i 찾을 수 없다. 해결: bx(); 함수 실행 하기 전에 변수를 할당한다.

bx()
function bx() {
  set();
}
let i = 1;
function set() {
  console.log(i);
}

DOM 생성되면 실행하는 코드?

<ul class="list">
  <li class="item">01</li>
  <li class="item">02</li>
  <li class="item">03</li>
  <li class="item">04</li>
  <li class="item">05</li>
</ul>

window.addEventListener('load', loadWork);
function loadWork() {
  const ul = document.querySelector('ul');
  console.log(ul);
};

시작이 나오고 내용물이 나오고 끝이 나온다.

// 셋타임아웃
console.log('시작');
setTimeout(function () {
  console.log('끝')
}, 5000);
console.log('내용물');

스크롤 인터랙션 하기 전에 퍼센트 값 구하는 코드

// 퍼센트 값 구하기
let resultContents;
let width = 2000;  
let contents = 50;
resultContents = contents / width * 100;
console.log(resultContents);

var i = 0;
var a = []
while (i < 10) {
  var p = prompt('');
  console.log(p);
  if (p === null) {
    break;
  }
  a.push(p);
  i++;
}

var b = prompt('한글 또는 영어를 입력해주세요.');
var a = {
  한글: '일',
  영어: 'one',
}
if (b in a) {
  console.log(a[b]);
} else {
  console.log('다시 입력하기');
}

실습 02

var myName = {
  남성: '홍길동',
}
var 성별 = '여성';
function a() {
  if (성별 in myName) {
    console.log(`이름이 맞습니다.`);
  } else {
    console.log('이름이 올바르지 않습니다.');
  }
};
a();

자바스크립트 내장 객체, 속성, 메소드의 이름 사용을 피해야 합니다. 그 중에서 name 사용해봤습니다.

var name = {
  coding: 'vscode',
};
console.log(name.coding) // undefined

실습 02

aName 는 자바스크립트 내장 객체, 속성, 메소드의 이름이 아니기 때문에 사용이 가능합니다.

var aName = {
  coding: 'vscode',
};
console.log(aName.coding) // vscode

• !
• &&
• | |

&&

&& (and, 이고, 그리고) 모든 값이 true 면 true 로 나오고 하나라도 false 이면 false 가 나온다. 왼쪽부터 읽다가 false 이면 더 이상 읽지 않고 false 로 나온다.

| |

|| (or, 이거나, 또는) 여러개 중 하나라도 true 이면 true 로 나오고 모든 값이 false 이면 false 가 나온다. 왼쪽부터 읽다가 true 이면 더 이상 읽지 않고 true 로 나온다.

!

! (not, 바꾸기) true 이면 false / false 이면 true

실습 01

A && B 모든 값이 true 이면 b값을 출력한다. A && B 첫 번째가 false 이면 A값을 출력한다.

console.log(true && '안녕'); // hello
console.log(false && '안녕'); // false

재귀함수 구구단 코드

// 재귀함수 4 단 코드
function four(num4) {
  if (num4 > 100) {
    return 100;
  } else {
    console.log(4 * num4);
  }
  four(num4 + 1);
}
four(1);
// 재귀함수 8 단 코드
function eight(num8) {
  if (num8 > 100) {
    return 100;
  } else {
    console.log(8 * num8);
  }
  eight(num8 + 1);
}
eight(1);

재귀함수 대해서 알아봤습니다. 함수 { } 안에서 또 함수 호출 시켜준다.

function factorial (n) {
  var end = 1;
  if (n === end) {
    return end;
  } else {
    console.log(n);
    return factorial(n - 1);
  }
}
console.log(factorial(10));

실습 02

function four(num) {
  if (num > 100) {
    return 100;
  } else {
    console.log(num);
    return four(num + 1);
  }
}
four(1);

!codepen[korea-webclass/embed/KKmMaJW?defaultTab=html%2Cresult]

연산자 우선 순위 알아보았습니다.

var 홍길동 = 10;
var 고길동 = 20;
var 개길동 = 30;
if (홍길동 || 고길동 || 고길동 || 홍길동 || 홍길동) {
  console.log('참');
}
console.log(10 * 5 / 2); // 25 
console.log(10 / 5 * 2); // 4
console.log(19 - 9 + 2); // 12
console.log(10 + 5 - 2); // 13
console.log(10 % 5 - 2); // 0

var asd = 'aAb-c-d-e-f-g-h-i-j-k';
var test01 = asd.split('-'); // (-)하이픈 찾아서 잘라준다. 잘라주는 기준 값
var test02 = asd.slice(1, 2); // (시작, 끝) 끝이 숫자가 높으면 빈 문자 줍니다.
var test03 = asd.substr(1, 2); // (시작, 끝났던 시작에서 다시 시작) 끝이 숫자가 높으면 빈 문자 줍니다.
var test04 = asd.substring(1, 2); // (시작, 끝났던 시작에서 다시 시작 후 마지막 문자열 반환하지 않음) 끝이 숫자가 높으면 빈 문자 줍니다.
console.log(test01); // a ~ k 까지 배열로 담아준다.
console.log(test02); // A
console.log(test03); // Ab
console.log(test04); // A

실습 02

var fullName = '저는 코딩독학입니다.';
var Name01 = fullName.slice(3, 4);
var Name02 = fullName.slice(5, 6);
var myName = Name01 + Name02;
fullName = '저는 ' + myName + '입니다.';
console.log(fullName);

실습 03

문자열 5번째부터 시작해서 '취준' 라는 문자열 찾고 앞 글자 '취' 까지 글자 수로 반환한다.

console.log('나는 자바스크립트 공부하는 취준생이다.'.indexOf( '취준', 5 )); // 15
console.log('나는 자바스크립트 공부하는 취취준생'.indexOf( '취준', 5 )); // 16

실습 04

var 댓글 = '30자까지 작성해서 입력해주세요.';
var 대화창 = prompt(댓글);
var 입력수 = 대화창.length;
if (대화창.length > 30) {
  alert(입력수 + '자까지 작성했습니다. 다시 작성해주세요.');
} else {
  var 테스트 = 입력수 + '자까지 작성했습니다.';
  console.log(테스트);
}

포토샵으로 작업한 모바일 페이지 px값 나누기 2 해야 하는데 계산기로 하기에는 / 클릭해야 하는 귀찮음이 있어서 px값만 작성하면 바로 결과가 나오는 코드를 구현해보았습니다. 나누는값 라는 값에 나누고 싶은 숫자를 작성하면 됩니다.

function 결과값() {
  var 입력값 = prompt('몇 픽셀인가요?');
  var 나누는값 = 2;
  var 결과 = Number(입력값 / 나누는값)
  document.write(결과);
}
결과값();

0는 false이고 1는 true

console.log(1 < 0); // false
console.log(true < false); // false
console.log(true === false); // false
console.log(true > false); // true
console.log(!true > false); // false
console.log(true < !false); // false

실습 02

!하면 true 인데 false으로 바꿔줍니다. 즉 반대로 알아두면 됩니다.

console.log(!10 < 20);

실습 03

함수 실행이 끝나면 뭐라도 가져오라고 한다. 그 값이 undefined 가져온다. undefined 말고 return 으로 원하는 값을 가져온다.

var re = k();
function k() {
  var a = 'on';
  if (a === 'on') {
    console.log('실행'); // 실행
  }
  var b = a;
}
console.log(re); // undefined

실행순서 설명 0. 자바스크립트 코드 실행하기 전에 전체 코드를 훑는다.

1. var 변수 선언하고 b 라는 이름 만들고 1 라는 숫자를 담았다.
2. var 변수 선언하고 a 라는 이름 만들고 k(b); 함수를 담았다.
3. 함수가 실행하니까 k(b); 함수를 실행하면서 b 라는 이름가져와서 함수한테 전달해준다. 그리고 a 라는 이름 선언했지만 안에는 아직 값이 없어서 undefined 이다.
4. 함수 매개변수(파라미터)에 b 라는 값 전달한다.
5. 함수 안에 if 만나서 조건을 확인한다.

*if ( ) 참, 거짓으로 판단하는 문이다. 판단하지 않으면 참으로 판단한다. 6. if 문에서 'b받기'는 판단하지 않아서 참으로 판단한다. 7. 참으로 판단해서 콘솔창에 1이 나오고 함수를 끝낸다. 8. 함수 끝내고 나니 console.log(a); 기다리고 있다. 9. a의 값은 undefined 이다. k(b)라는 함수를 실행선언만 했지 값을 받아오지 않았다. 받아오려면 return으로 받아와야한다.

var b = 1;
var a = k(b);
function k(b전달받기) {
  if (b받기) {
    console.log(b받기);
  }
}
console.log(a)

끝맺음

실행순서 설명했지만 잘 했는지 모르겠다.

function 숫자더하기() {
  var 첫번째숫자 = prompt('원하는 숫자를 넣으세요') * 1;
  var 두번째숫자 = prompt('원하는 숫자를 넣으세요') * 1;
  var 단위 = prompt('원하는 단위를 넣으세요. 예) ex, km, g, ml .. 등');
  var nan = 첫번째숫자 + 두번째숫자 + '';
  if ('NaN' === nan) {
    var 다시입력 = '원하는 숫자 입력란에 숫자만 입력해주세요.';
    return console.log(다시입력);
  }
  var 결과 = (첫번째숫자 + 두번째숫자) + 단위;
  console.log(결과);
}
숫자더하기();

prompt(); 숫자 입력하면 문자열로 반환 해준다. prompt(); 함수로 입력값을 받아서 시간당 얼마 받는지 콘솔로그에 찍는 코드

var 시급 = prompt('시간당 얼마야?');
var 몇시간 = prompt('몇 시간 일해?');

function 알바() {
  var 얼마 = 시급 * 몇시간;
  if (0 === 얼마) {
    return console.log('입력창에 넣지 않았습니다. 다시 확인 후 입력해주세요.');
  }
  if ('NaN원' !== 얼마) {
    return console.log('"만원, 1만원, 1시간, 60분" 이렇게 넣으면 안돼요. 또는 한글 입력 안돼요');
  }
  console.log(얼마 + '원');
}
알바();

실습 02

console.log('2' * 2); // 4 곱하기는 문자열 숫자로 바꿔서 계산
console.log('2' + 2); // 22 더하기는 숫자가 문자열로 바꿔서 계산 
console.log(+false); // 숫자 0으로 계산
console.log(true + true); // 2
console.log(true + undefined); // NaN
console.log(true + false); // 1
console.log(true + null); // 1

실습 03

문자열이랑 숫자가 더하면 문자열으로 됩니다. 숫자가 문자열이 되어서 '1020' 되니까 ()로 한번 더 감싸줘서 ()먼저 처리하고 그 다음 문자열 더합니다.

var 숫자1 = 10;
var 숫자2 = 20;
var 대화 = '숫자 10과 20을 더하면' + (숫자1 + 숫자2) + '이 됩니다.';
console.log(대화);

전역변수: 함수 밖에서 선언한 변수는 함수 안에서도 사용 가능하고 전체 코드에서 사용 가능하다. 설명: 함수 안에 있는 일초 한시간 입력값 이름이 있는 상황이고 함수 밖에서 선언했던 변수 불러와서 값을 실행하는 코드

var 입력값 = prompt('원하는 시간을 적으세요.');
var 일초 = 60;
var 한시간 = 60;

function 초계산() {
  alert(일초 * 한시간 * 입력값);
}
초계산();

실습 02

지역변수: 함수 안에서 선언된 변수로, 함수가 실행되면 변수가 만들어지고 함수가 종료되면 소멸하는 변수 설명: 함수 안에서 선언했기 때문에 함수 안에서 불러와서 코드를 실행한다.

function 초계산() {
  var 입력값 = prompt('원하는 시간을 적으세요.');
  var 일초 = 60;
  var 한시간 = 60;
  alert(일초 * 한시간 * 입력값);
}
초계산();

실습 03

설명: 함수 밖에서 변수가 선언되었고, 함수가 실행하면 입력값을 매개변수num한테 전달해서 함수 안에서 매개변수를 사용할 수 있는 코드

var 입력값 = prompt('원하는 시간을 적으세요.');
var 일초 = 60;
var 한시간 = 60;
function 초계산(num) {
  alert(일초 * 한시간 * num);
}
초계산(입력값);

var a = 10;
a += 5; // 더하고 a한테 할당(저장)하기
a = a + 5;
console.log(a);

var b = 10;
b -= 5; // 빼고 a한테 할당(저장)하기
b = b - 5;
console.log(b);

var c = 10;
c *= 5; // 곱하고 a한테 할당(저장)하기
c = c * 5;
console.log(c);

var d = 10;
d /= 5; // 나누고 a한테 할당(저장)하기
d = d / 5;
console.log(d);

var e = 10;
e %= 100; // 나누값 a한테 할당(저장)하기
e = e % 5;
console.log(e);

실습 02

console.log(8 == '8'); // true
console.log(8 === '8'); // false
console.log(8 == 8); // true
console.log(8 === 8); // true
console.log(8 == 'ok'); // false
console.log(Number('ok')); // NaN 내가 바꿔봤는데 숫자가 아니고 문자야
console.log(8 == {a:1}); // false
console.log(8 == [8]); // true
console.log('1, 2, 3' == [1, 2, 3]); // false
console.log('1, 2, 3' == function(){}); // false
console.log('function(){}' == function(){}); // true
console.log('k' == a()); // true
function a(){return 'k'}
function b() {
  return 'kkk';
}
var c = b
console.log(c === b); // true 주소값(함수코드) 같은거야