Intro to Programming with JavaScript Seminar, Fall 2017 semester Week 1: Value, Type, Operator Led by Jeongbae Oh, in conjunction with YCC (Yonsei Computer Club) @ Yonsei University This seminar intends to introduce newcomers to programming using JavaScript, one of the most versatile languages of the modern world.

1. Introduction to Programming
with JavaScript
Week 1: Value, Type, Operator
Jeongbae Oh
YCC JavaScript Seminar
2017.09.18

2. 세미나 개요
•세미나 내용
•JavaScript, HTML, CSS 문법에 대한 기초적인 지식
•상기 기술들을 활용한 아주 간단한 웹앱 만들기
•세미나 목표
•자바스크립트가 대충 어떻게 돌아가는지 알게 됨
•앞으로 자바스크립트, 혹은 프로그래밍을 계속해서 배우고 싶을
때 어떻게 해야 할지 알게 됨

3. 세미나 개요
• 수강 대상
• 프로그래밍을 처음 접하는 사람들...이었으나 이미 잘하시는 분들이 많은 것 같아요.
• 내용이 너무 쉽다거나 하면 언제든지 알려주세요!
• 시간/장소
• 2017-2학기 매주 월요일 오후 6시~7시, 8주간 주 1회 (총 8회)
• 중간고사/기말고사 기간에는 열리지 않습니다.
• 가급적 위 시간에 열되, 부득이한 사정으로 일정 변경시 미리 공지드리겠습니다.

4. 세미나 일정
1주차(9/18) : 값, 자료형, 연산자
2주차(9/25) : 함수
3주차(10/16) : 조건문, 반복문
4주차(10/30) : 오브젝트, 배열
5주차(11/6) : HTML/CSS
6주차(11/13) : 실습
7주차(11/20) : 실습
8주차(11/27) : Bootstrap, jQuery 소개
매주 진도와 수강생들의 희망에 따라 변경될 수 있습니다.
(제가 모르는거 하자고 하시면 저도 배워와야 하니 너무 어려운거 하자고 하지 말아주세요)

5. 주의사항
•저는 전문가가 아닙니다.
•제 설명이 틀릴 수도 있습니다. 혹은 이해를 돕기 위해 일부러 약간 틀리게
설명할 수도 있습니다. 제 설명과 다른 믿을 만한 자료에 나온 내용이 상충
하면 그 자료를 믿으세요.
•제가 모르는 질문은 답변을 바로 드리지 못할 가능성이 높습니다.
다만 찾아보고 다음 시간에 알려드리도록 노력은 해보겠습니다.
•만약 세미나 내용이 기대보다 쉬워서 재미가 없으시면... 죄송합니다...
•본 세미나의 강의안은 가급적 영어로 작성하였습니다.
•이는 좋은 자료들이 대부분 영어로 되어있기 때문에 영어로 배우는 것이 더
유리하기 때문입니다.
•그래도 중요한 용어는 한국어를 병기하였습니다.

6. JavaScript?
•1995년 넷츠케이프(Netscape)에 다니던 Branden Eich
에 의해 10일만에 개발됨. (Java와는 아무런 상관도 없음)
•당시에는 넷츠케이프 브라우저에 동적인 요소를 추가하기
위한 간단한 스크립트였음.
•이후 웹의 급격한 발전에 힘입어 점차 브라우저들에 탑재
되었으며, 현재는 웹의 사실상 표준 기술이 되었음.
•현재는 프론트엔드 뿐만 아니라 서버, 데이터베이스 관리,
앱 개발 등 다양한 분야에서 활용되고 있음.
https://en.wikipedia.org/wiki/Brendan_Eich#/media/File:Brendan_Eich_Mozilla_Foundation_official_photo.jpg
https://commons.wikimedia.org/wiki/File:Unofficial_JavaScript_logo_2.svg

7. GitHub Language Rank (Q2, '17)
https://madnight.github.io/githut/

8. JavaScript vs...?
• Python: Big data, AI, Back-end (Django, Flask, etc.)
• Java: Big data, AI, Back-end (Spring), Android, embedded,
etc.
• C/C++: Big data, AI, High-performance applications,
embedded, drivers, etc.
• JavaScript: Front & Back-end (MEAN), mobile/desktop
apps (React, Electron)

9. How to Practice JavaScript
1. Chrome Developer Tools
(Ctrl + Shift + J or Cmd + Option + J)

10. How to Practice JavaScript
2. repl.it (https://repl.it/languages/javascript)
* REPL: Read-Eval-Print Loop

11. Value
• Value (값): Fundamental building block of JavaScript
• Primitive type (기본형/원시형): Built-in, immutable
• Object (객체)
• Array (배열)

12. Primitive Types
• Number
• String
• Boolean
• undefined/null
• Special numbers

13. Number
• Number object:
no int, long, float, double types
• Safe range: -(253 - 1) to (253 - 1)

14. String
• String object: no char type
• Defined by series of characters
within double quote ("") or single
quote ('')
• Concatenate

15. Escape Character
• is called an escape character.
• Escape character allow various operations within a string.
• "
• '
•

16. Escape Character
•
• n
• t

17. Boolean
• Falsy (considered false when
evaluated as Boolean)
• false, 0, -0, "", null,
undefined, NaN
• All others are Truthy (considered
true when evaluated as Boolean)
• true, 1, "abc", Infinity,
[], {}, ...

18. undefined/null
• undefined: 변수가 정의된 상태에서 값이
할당되지 않음
• null: 값이 없는 혹은 일부러 값이 없는 상태
로 정의된 상태

19. Special Numbers
• Positive/Negative 0
• Positive/Negative Infinity
• NaN (Not a Number)

20. Automatic Type Conversion
• Unlike many other languages such as
Java, JavaScript automatically changes
the type of variable according to the
value assigned.
• Therefore, type casting is unnecessary.

21. Variable
• "Container" of values
• Declared/initialized by using "var"
• var is not always necessary. But when in
doubt, always use it.
• A value is "assigned" to a variable using an
assignment operator (=).
• When a variable is assigned to another
variable, a new container is created, and
essentially separates the two.
(Call by value)

22. Operators
• Arithmetic
• Assignment
• Comparison
• Logical

23. Arithmetic
• +
• −
• *
• /
• %
• ++
• --
• **

24. Assignment
• =
• +=
• -=
• *=
• /=
• %=
• **=

25. Comparison
• == (loose)
• === (strict)
• != (loose)
• !== (strict)
• >, >=
• <, <=
• When in doubt, always use strict

26. Implicit Type Coercion
• Under certain conditions, JavaScript implicitly converts
types to the "expected" outcome.
• Therefore, 1 and "1" can be considered "loosely" equal,
vice versa.
• This can cause problems when evaluating values, so be
careful.
• Using strict comparison helps, but not always.

27. Explicit Type Coercion
• To Number
• To String

28. Logical
• && (AND)
• || (OR)
• ! (NOT)

29. Other Operators
• Unary Operator (일항연산자)
• typeof 1; typeof "Hello world";
• -a, a++, a--
• Binary Operator (이항연산자): +, -, *, /, ...
• Ternary Operator (삼항연산자)
• (condition)? true: false

30. Expression/Statement
• Expression (식): combination of values (literals) and operators
• Value and expression are equivalent (i.e. expression can
come where value can)
• Statement (문): combination of expressions
• Expressions are separated by semicolon ( ; )
• ; is not always necessary. But when in doubt, always use it.
• Block (블록): combination of several statements
• Separated by braces ( { } )

31. Comments
• Un-interpreted section of
source code
• One-line comment: //
• Multi-line comment: /* */
• Anything within comment
is ignored