bookmark_border자바스크립트 반복문

자바스크립트 반복문

  • While
    • 조건이 참인 동안 코드블록을 반복
    • 반복 횟수가 불명확한 경우 주로 사용

while(조건) {
코드블록
}

var a = Math.floor(Math.random() * 10);
var b = Math.floor(Math.random() * 10);
var answer;

while (answer != (a + b)) {
  answer = prompt(a + '+' + b + '= ?');
}
console.log("정답입니다.");
  • For
    • 배열안의 요소를 하나씩 꺼내며 반복
    • 배열의 길이만큼 처럼 반복 횟수가 명확한 경우 주로 사용

for(var{변수}of{배열}) {
코드 블록
}

var scores = [90, 92, 84, 98, 70];
var sum = 0;

for (var score of scores) {
  sum += score;
}
console.log("총점: " + sum);
console.log("평균: " + (sum / scores.length));
  • 가장 큰 수를 반환하는 함수
function max(arr) {
  var _max = -99999; // 아주 작은수
  for (var i of arr) {
    if (i > _max) {
      _max = i;
    }
  }
  return _max;
}      
console.log("가장 큰 수는 " + max([5, 7, 10, 2, 8]) + "입니다.");
  • 배열을 화면에 출력하기
<ul id="list"></ul>
<script>
  var list = document.getElementById("list");
  var products = ['데스크탑', '모니터', '노트북', '스피커', '마우스'];

  var html = '';
  for (var product of products) {
    html += '<li>' + product + '</li>';
  }
  list.innerHTML = html;
</script>

과제 : 전달 받은 배열 중 가장 큰 수를 반환하는 자바스크립트 함수를 작성해보세요.

bookmark_border자바스크립트 조건문

자바스크립트 조건문

  • if
  • if~else
  • if ~else if~else
var score = prompt("성적을 입력하세요.");

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("D");
}
  • switch
  • break
var language = prompt("언어를 입력해주세요.");

switch(language) {
  case "korean":
    alert("안녕하세요.");
    break;
  case "english":
    alert("Hello.");
    break;
  case "spanish":
    alert("Hola.");
    break;
  default:
    alert("지원하지 않는 언어입니다.");
    break;
}

bookmark_border자바스크립트 함수

자바스크립트 함수

함수 정의

  • 특정 기능을 하는 구문(알고리즘,로직)을 독립된 형태로 만드는 것
  • 변수에 저장할 수 있는 한가지 자료형
  • 함수 구조 형식 : var {함수명}=function(){//저장할 코드 }
  • 축약 형식 : function{함수명}(){//저장할 코드 }
  • 함수 실행 : {함수명}()
var sayHello = function () {
  console.log('Hello~');
}
sayHello();

// 같은 코드
function sayHello() {
  console.log('Hello~');
}

함수에 값 전달하기

  • 함수에 저장된 코드를 실행할 때 값을 전달할 수 있음
  • 매개변수 사용 함수 형식 : function{함수명}(값1,값2,…){}
  • 값1,값2,…매개변수라고 함
  • 코드 블럭 안에서 전달 받은 값 사용 가능
  • 함수에 전달하는 값을 함수 인자라고 함
function square(x) {
  console.log(x * x);
}
square(2);
square(0.1);

값을 반환하는 함수

  • 함수의 실행 결과를 반환
  • 함수 코드 블록 안에서 return{값} 형식 사용
  • 반환된 값은 다른 표현식들과 같은 취급
function square(x) {
  return x * x;
}
var vaule = square(4);

함수를 인자로 전달받는 함수

  • 함수의 인자로 함수명을 전달
  • 함수 내부에서 전달받은 함수를 실행
  • ex) setInterval(tick, 1000);
function operator(x, y, func) {
  return func(x, y);
}

function add(a, b) { return a+b; }
function substract(a, b) { return a-b; }

console.log(operator(4, 2, add));
console.log(operator(4, 2, substract));
<script>
  var element = document.getElementById("text");

  setTimeout(function() {
    element.innerText = '삭제됨';
  }, 3000);      
</script>

배열 객체의 함수

CRUDHTTP 메서드URI
책들의 목록을 표시GET/books
책 한권의 정보를 표시GET/books/{id}
새 책을 생성POST/books
책을 수정PUT/books/{id}
책을 삭제DELETE/books/{id}
var balls = ['축구공', '야구공', '배구공', '농구공'];
balls.forEach(throwBall);

function throwBall(ball) {
  console.log(ball + '을(를) 던졌습니다.')
};

var numbers = [1, 2, 3, 4, 5];
var twice = numbers.map(function(value, index) {
  return value*2;
});
console.log(twice);

var even = numbers.filter(function(value, index) {
  return value % 2 == 0;
});
console.log(even);

이벤트

자바스크립트 이벤트

  • 사용자의 입력을 처리
  • HTML태그 마다 다양한 이벤트가 발생됨
  • click, focus, blur
  • 이벤트 처리기는 이벤트 발생 시 실행할 함수를 전달받음

이벤트 처리기 등록

  • 자바스크립트로 html요소를 선택한 뒤 addEventListener 함수를 호출
  • 형식 : addEventListner(이벤트이름, 실행할 함수)
    • 첫 번째 인자-이벤트의 이름
    • 두 번째 인자-이벤트가 발생했을 때 실행할 함수

Click이벤트

  • HTML 요소를 마우스로 클릭하거나 터치 디바이스에서 터치시 발생
  • 마우스 이벤트 중 하나로 mousedown, mouseup 이벤트 발생 후에 발생됨
  • 버튼 뿐만 아니라 모든 HTML요소에서 이벤트가 발생되고 이벤트 처리기를 등록할 수 있음
var button = document.getElementById("button");
var element = document.getElementById("count");

var count = 0;
button.addEventListener('click', function() {
  count++;
  element.innerText = count + '회 클릭';
});

bookmark_border자바스크립트 객체

자바스크립트 객체

객체의 정의

  • 객체의 구성:
    • 속성(Property)
    • 메써드(Method)
  • 객체는 키와 값의 쌍으로 복합 정보를 저장
  • 객체 저장 형식
    • { “키1”: “값1”, “키2”: “값2”, … (생략) }
  • 객체의 요소에 접근 방식
    • {객체명}.{키} 형식
  • 객체의 한 키/값 쌍을 프로퍼티라 함
var student = {
   "name":"홍길동", "id":"219xxx", "gender":"남성", "address":"포항시 북구"
}
student.name
student.id
student['name']

var students = [
 {'name':'홍길동', 'id':'219xxx'},
 {'name':'김아무개', 'id':'218xxx'},
 {'name':'최xx', 'id':'220xxx'}
}
student[2].name
var id_name = student[1].id + ' ' + student[1].name

중첩 객체

• 객체의 프로퍼티의 값으로 객체를 가질 수 있음
• 객체 안에 다른 객체 저장 가능

var student = {
   name: {
          first: '군오',
          last:'김'
   },
   class: ['자바스크립트', '파이썬']
}
student.name.last + student.name.first

내장 객체 : Math, Date

  • 자바스크립트에서 자주 사용하는 기능을 미리 구현해 놓은 객체
  • Math, Number, Date, Array, Set 등 다양한 내장 객체가 존재
  • Math
    • 수학적인 상수와 함수를 가진 객체
코드 설명
Math.PI 원주율
Math.abs(x) x 의 절대값
Math.ceil(x),
Math.round(x),
Math.floor(x)
x의 올림,
반올림,
버림
Math.sqrt(x) x 의 제곱근
Math.max(x, y, …),
Math.min(x, y, …)
인수 중 가장 큰수,
가장 작은수
  • Date
    • 날짜와 시간을 다루기 위한 객체
코드 설명
var today = new Date() 변수 today 에 현재 날짜, 시간을 저장
var someday = new Date(‘2019-06-03’) 변수 someday 에 2019년 6월 3일을 저장
today.getFullYear() today 에 저장되어 있는 날짜의 4자리 연도를 반환
today.getMonth() today 에 저장되어 있는 달을 나타내는 0에서 11 사이의 수를 반환. 0은 1월
today.getDate() today 에 저장되어 있는 날짜의 ‘일’을 반환
today.getDay() today 에 저장되어 있는 날짜의 요일을 나타내는 0에서 6 사이의 수를 반환. 0은 일요일

전자시계 만들기

<p id="text" class="content"></p>
<script>
  var element = document.getElementById("text");
  var tick = function() {
    var now = new Date();
    var time = now.getHours() + '시' + 
                now.getMinutes() + '분' +
                now.getSeconds() + '초';
  
    element.innerText = time;
  };
  setInterval(tick, 1000);
</script>

bookmark_border자바스크립트 배열

자바스크립트 배열(Array)

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
let index = cars.indexOf("Volvo");

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
fruits.push("Kiwi");

var students = ['김xx', '최xx', '박xx', '이xx']
students[Math.floor(Math.random()*students.length)]

let a = Math.floor(0.60); > 0
let d = Math.floor(5.1); > 5
let e = Math.floor(-5.1); > -6
let f = Math.floor(-5.9); > -6

Html문서에 자바스크립트 코드 포함

  • JavaScript HTML DOM Document
  • document.getElementById: 결과가 하나
  • document.getElementsByTagName, document.getElementsByClassName: 결과가 다수
<!DOCTYPE html>
<html>
<body>
  <p id="my_text" class="content"></p>
  <script>
    var element1 = document.getElementById("my_text");
    var element2 = document.getElementsByTagName("p");
    var element3 = document.getElementsByClassName("content");

    console.log(element1);
    console.log(element2);
    console.log(element3);
  </script>
</body>
</html>

> 크롬 console 결과
<p id="my_text" class="content"></p>
HTMLCollection(1)
HTMLCollection(1)

<!DOCTYPE html>
<html>
  <head><title>7-2</title></head>
<body>
  <p id="my_text" class="content"></p>
  <script>
    var element = document.getElementById("my_text");
    var name = prompt("이름을 입력하세요");
    document.innerText = name + "님, 안녕하세요."
  </script>
</body>
</html>

bookmark_border지식의 원천은 무엇인가?

지식의 원천은 무엇인가?

지식의 원천은 무엇인가? : 로크 : 타불라 라사(feat. 데카르트)

  • 근대철학 : 합리론과 경험론의 대립
    • 합리론 : 데카르트, 스피노자, 라이프니츠
    • 경험론 : 로크, 버클리, 흄
    • 이 둘은 칸트에 의해 통합되고 헤겔로 이어짐.
  • “지식이라는 것이 어떻게 생겨나는가?”
  • 데카르트의 본유관념
    • 아이작 아시모프의 런어라운드 소설속 로봇의 3원칙
    • 인간에게도 로봇의 3원칙과 같은 펌웨어가 있을까?
    • 데카르트는 인간도 태어날때부터 가진 원리 3가지를 제시
      • 기하학 및 수학적 원리
      • 도덕적원리
      • 신이 존재한다는 관념
  • 로크의 타불라 라사
    • 본유관념 같은 것은 없다고 생각
    • 인간이 태어날 때는 백지상태이고 경험을 통해 관념과 지식이 생긴다고 주장
    • 백지상태 : 타블라 라사(tabula rasa, 빈 서판)
  • 인간 오성론
    • 단순관념
    • 복합관념과 지식
    • 1차 성질과 2차 성질
  • 표상적 실재론
    • 사과는 진짜로 있는 것일까?
    • 내 머릿속에 떠오르는 이미지(현상)에 불과하지 않을까? : 관념론
    • 사과는 동그란데 이는 1차 성질이다. 존재하지 않는 것이 이 성질을 가질 수 없으니 이 사과는 나의 외부에 ‘존재’한다. : 실재론
    • 소박실재론 : 사과는 나의 외부에 실제로 존재하며, 그것고 내가 지각하는 대로 존재한다.
    • 표상적 실재론 : 2차 성질인 사과의 빨간색은 내게 빨간색으로 지각되는것. 이는 진짜 모습은 아니며, 그렇게 나에게 ‘표상’된 것.
    • 로크 : 자연권 사상, 삼권분립 제도, 저항권 등 정치철학자로서 자유민주주의 제도를 확립하는 데 매우 중요한 역할.

강박적 미니멀리스트 : 흄 : 자신까지 갖다 버린 미니멀리스트

  • 나라별 철학자들의 특징
    • 프랑스: 설명충, 독일: 진지충, 영국: 깔끔충
  • 인상과 관념
    • 말 + 날개 -> 날개달린 말
    • 결국 모든 관념의 근원은 바로 인상
    • 인상은 우리가 직접 본것, 감각자료로 받아들인 것, 경험한 것 -> 경험주의
  • 흄의 알고리즘
    • 우리가 가지고 있는 지식은 명제로 표현
    • 명제는 분석명제와 종합명제가 있다.
    • 총각과 고양이
    • ‘총각은 남자다’ : 분석명제
    • ‘고양이가 양탄자 위에 앉아 있다’ : 종합명제
    • ‘이 사과가 존재한다’
      사과를 경험한적 있고, 당연히 인상을 가지고 있다. 그러나, 이는 ‘사과에 대한 인상’이 아니라, ‘빨갗고 동그랗고 시큼하다’는 인상이다. 따라서 이는 무의미한 명제.
    • ‘나는 존재한다’, ‘신은 존재한다’ : 무의미한 명제
    • ‘당구공의 충돌이 운동의 원인이다’
      당구공의 충돌은 수백번 보았지만, 그것이 ‘필연적으로’ 당구공을 움직이게 하는것을 본적은 없다. : 무의미한 명제
  • 흄의 입장과 칸트의 해법
    • 흄의 입장 : ‘물리법칙은 필연적인 법칙’이라고 주장할 철학적 근거가 없다.
    • 칸트의 입장 :
      • 흄의 책을 읽고 독단의 잠에서 깨어났다고 감탄했지만, 물리학이 필연적 법칙이라고 믿음.
      • 물리법칙은 흄이 말하는 것처럼 심리적인 것이 아니고, 인간이 외부세계를 구성하면서 나오는 것이며, 인간은 자신이 구성한 대로 세계를 경험할 수밖에 없기에, 결국 물리법칙은 필연적인 법칙.
  • 당연한 건 당연한게 아니다

코페르니쿠스적 전환 : 칸트 : 순수이성비판 1

  • ‘서양철학에서 칸트 이전의 철학은 모두 칸트로 흘러 들어가고, 칸트 이후의 철학은 칸트로부터 흘러나온다.’
  • 순수이성비판의 의미
    • 신은 존재하는가, 존재하지 않는가?
    • 우주는 유한한가, 무한한가?
    • 시간의 시작이 있는가, 없는가?
    • 인간에게 영혼이 있는가, 없는가?
    • 자연의 모든 사건은 인과법칙을 따르는가, 아니면 자유롭게 일어나는가?
    • ‘비판’이라는 말은 ‘인간 이성의 능력에 한계를 긋겠다’는 의미
    • 그러나, 인간은 이런 문제를 해결할 수 없지만, 그렇다고 회피할 수도 없는 운명에 처해 있다
    • 인간이 이런 형이상학적 문제를 해결할 수 없다면, 인간이 알 수 있는것은? : 수학, 기하학, 물리학.
  • 코페르니쿠스적 전환
    • 어떤 카메라가 좋은가?
    • 어떤 카메라가 사물을 있는 그대로 재현할까?

      어떤게 좋다 말할 수 없다.
    • 인간의 사물 인식 : 인간은 인간의 방식으로만 인식
    • 이 사과는 내가 없으면 둥글고 빨갛고 매끄러운 모습으로 존재하지 않는다.
    • ‘사물’이 아니라 ‘대상(對象)’ 이라는 말을 씀
      • 내 앞에 마주 서 있는 상태
      • 수동적 인식이 아니라, 나의 인식구조가 대상을 구성
      • 내가 대상을 내 방식대로 구성
    • 칸트의 의문 : (경험하기도 전에 아는)선험적 종합판단이 어떻게 가능한지 의문
      • 나의 인식은 항상 참 : 내가 대상을 구성하고 인식했기 때문에 일치할수밖에 없다. 따라서 선험적 종합판단은 참.
    • 초월철학
    • 카메라가 자신의 내부 구조를 찍을 수 없음
    • 카메라가 찍은 사진을 분석하여 카메라 내부를 추측

직관 없는 개념은 공허하다 : 칸트 : 순수이성비판 2

  • 인식 체계 (인식 프로세스)
  • 인간의 인식체계가 어헉기에 이런 식으로 대상을 인식하는 걸까?
  • 감성, 구상력, 지성의 세단계를 거침
  • 감성
    • 감성 : 감각자료를 받아들이는 능력
    • 모든 감각자료는 시간과 공간의 형식속에서 받아들임
    • 감성의 형식 : 감각자료를 받아들일 때 그것을 정리하는 형식
    • 그림 액자
      • 사과, 책, 자동차 장난감, 하나씩 제거하고 마지막 액자까지 제거 해도 남는것 : 공간
      • 공간 제거 : 우리의 상상속에서 조차 제거할 수 없음.
    • 베이스 기타 드럼 소리
      • 베이스, 기타, 드럼 소리 하나씩 제거해도 남는것 : 시간
      • 시간 제거 : 우리의 상상속에서 조차 제거할 수 없음.
  • 구상력
    • 사과나무의 일부장면들만 보여줘도 사과나무를 인식
      • 이전에 본 감각자료를 기억했다가 다시 떠올릴 수 있는 능력
      • 이미지의 파편을 종합하는 이 능력은 구상력의 극히 일부
    • 구상력 : 여러 종류의 감각자료를 모아서 동시에 인식하도록 해주는 능력
  • 지성
    • 구상력을 통해 정리된 감각자료에서 배경을 분리하고, ‘4개, 사과, 빨갛다’라는 개념을 붙인 다음 이 개념들을 결합
    • 이것을 ‘판단’이라고 함
    • 판단은 아무렇게 하는 것이 아니라 일정한 규칙을 따름
    • 이것을 ‘범주’라고 함
    • 12 범주표
      • 4개, 사과, 빨갛다
      • 전체성, 긍정성, 실체/속성, 현실성
      • 모든 사과는 빨갛다
  • 경험론과 합리론의 종합
    • 칸트의 인식론
    • 경험 + 이성
    • 내용없는 사고는 공허하고, 개념없는 직관은 맹목적이다.
    • "비둘기는 공기의 저항이 없으면 더 잘 날 수 있을 것 같지만, 사실 공기가 없으면 비둘기는 날 수 조차 없다."
    • 인간은 경험없이 생각의 힘 만으로 화려한 지식을 만들 수 있을것이라고 생각하지만, 사실 경험 없이는 그 어떤 지식도 만들 수 없다.
    • 공허 :
  • 물자체와 현상계
    • 물자체의 세계와 현상의 세계
    • 사과(물자체)는 존재하지 않는다. 심지어 말할 수 조차 없다.
      • 존재하는 모든 것은 내 머릿속에 구성한 대상일 뿐
      • 칸트는 초월적 관념론자
    • 칸트에게 있어서 경험된 것은 실제로 존재하는것
      • 경험적 실재론

bookmark_border진리란 무엇인가?

진리란 무엇인가?

간단한 게 답이다 : 오컴의 윌리엄 : 오컴의 면도날

  • 중세 철학자 BIG3 : 토마스 아퀴나스, 둔스 스코투스, 오컴의 윌리엄
  • 오컴의 면도날
    • 두가지 원칙
    • 1. 어떤 현상을 설명할 때 불필요한 가정을 해서는 안된다.
    • 2. 어떤 현상을 설명하는 여러 이론들이 있다면, 그 중에서 가장 단순한 이론이 옳을 가능성이 높다.
    • ex) 천동설(주전원 도입)과 지동설

“All things being equal, the simplest solution tends to be the best one.”

William of Ockham

bookmark_border자바스크립트 변수와 연산자

자바스크립트 변수와 연산자

자바스크립트 소개

  • 웹 브라우저에서 동작하는 스크립트 언어
  • HTML 요소 조작, 사용자 입력 처리 가능
  • 가장 인기있는 프로그래밍 언어
    • 앱 개발
    • 서버측 프로그램 개발
    • 사물인터넷 개발 등
    • 다양한 방면에서 이용됨
  • 자바스크립트의 장점
    • 웹 브라우저에서 코드 작성 및 실행가능
    • 데이터베이스부터 앱까지 모두 개발 가능
    • 타 언어에 비해 배우기 쉬움

변수의 정의와 사용

  • 크롬 > F12 >Consol > 입력, Shift+Enter (줄바꿈)
var a = 10
var b = 3
var c = (a + b) / 2
console.log(c)

var name = "자바스크립트"
console.log(name)

연산자 종류와 사용

var name = "자바스크립트" + "배우는" + "시간입니다"
console.log(name)

console.log('10' + 5) // 문자로 인식
> '105'

var trueOrFalse = true
console.log(trueOrFalse)

var speed = 80
var speedLimit= 100

speedViolation = speed >= speedLimit
> false

bookmark_borderPreparing for the Beijing Winter Olympics

Preparing for the Beijing Winter Olympics

  • But these latest Games are not without controversy – that’s disagreement or argument about something people have strong feelings about. 
  • The Winter Olympics have not been around as long as the Summer Olympics, so do you know when the first Winter event took place?
  • discipline in this context is a particular way of doing a sport.
  • The BBC’s China correspondent
  • despite the coronavirus headaches, despite the alleged human rights abuses, despite the allegations from a former Chinese Olympian
  • being in full swing – so, at its highest level of activity – its busiest. 
  • controversy – disagreement or argument about something people have strong feelings about.
  • for the athletes the clock is ticking, meaning time is running out to prepare.
  • Looks like I need to brush up on my Winter Olympics knowledge
  • metaphorically

bookmark_border진리는 절대적인가, 상대적인가?

진리는 절대적인가, 상대적인가?

아무것도 존재하지 않는다 : 고르기아스 : 극단적 회의주의

  • 회의주의
    • 종교적 회의주의 : 어떤 신이나 종교도 믿지 않는다.
    • 과학적 회의주의 : 초능력, 미신, 수맥, 점, 굿 등과 같은 의사과학(사이비과학)을 믿지 않는다.
    • 철학적 회의주의 : 진리의 존재 자체를 믿지 않는다.
  • 회의주의자 3인방
    • 피론 : 확실한 진리인지 알 수 없으니 판단중지. ‘피론주의’
    • 프로타고라스 : 절대적 진리나 도덕은 없으며, 모든 진리와 도덕은 상대적일뿐.
    • 고르기아스 : 진리 따위는 없다. 있다고 해도 그것을 알 수 없다.
  • 고르기아스
    • 아무것도 존재하지 않는다. – 존재
    • 설령 어떤 것이 존재한다고 하더라도, 우리는 그것을 알 수 없다. -인식
    • 설령 그것을 알 수 있다 하더라고, 우리는 그것을 전달할 수 없다. – 언어
      빨간색 사과 설명 : 감각질의 문제
    • 회의주의 그 자체가 모순 : ‘진리는 존재하지 않는다’는 진리가 존재한다는 것을 믿는것.

노예 소년의 기하학 : 소크라테스 : 산파술과 상기설

  • 산파술 : 사람들은 이미 지식을 가지고 있지만 잊어 버린 것인데, 자기는 그 지식을 ‘상기’할 수 있도록 도와줄 뿐.
  • 노예 소년에게 기하학적 지식을 상기시켜 줌.
  • 자연철학 > 인간 중심의 철학

동굴 밖은 위험해 : 플라톤 : 동굴의 비유와 이데아의 세계

  • 철학자 BIG 5 : 플라톤, 아리스토텔레스, 토마스 아퀴나스, 칸트, 헤겔
  • 플라톤의 동굴 안(현실세계, 가시계)과 동굴 밖(이데아 세계, 가지계)의 비유.
  • 매트릭스 밖은 위험해! : 검증되지 않은 빨간약을 먹을까? (도를 아십니까? 빨간약 드셔보실래요?)
  • 어떤 것이 진짜 매트릭스 세계인가?
    • 빨간약을 먹고 매트릭스 밖을 나갔더라도, 그곳이 제2의 매트릭스 세계가 아니라는 보장이 있는가?
    • 오히려 매트릭스 밖이 가짜일 수 있지 않을까?
  • 감각 세계 vs. 이성 세계
  • 감각이 믿을만 한가? 이성은 믿을 만 한가?
  • 이는 앎의 문제가 아니라 믿음과 선택의 문제가 아닐까?