inCoding JS

2016. 09. 24.

1

JSClass가 없음.

그러나 OOP는 가능하다. (DOM / windows Object 등)

�소문자 엄격구분

작은따옴표 습관이 좋다(PHP와 같이 사용시 유리)

변수는 camalCase로 한다.(특수문자는 _, $ 가능)

null / unde�ned 형 존재, 0포함한 세개 제외한 것은 true로치환됨 (null은 의도적 값, default는 unde�ned)

2

데이터형: String, Number, Boolean

x++ vs ++x (파이썬에는 없는 개념) (파이썬에서는 그냥 x+=1로 하라고 함.)

문자열은 +로 합 가능. string+number --> string

||(or), &&(and), !(not)

== vs === (== : value check / ===: value & type check)

if ( true/false check ){ code execute if it is true. }

else에는 조건 존재 X (elif 없음)3

var score = 100; alert(90<score<100); // 불가능하다!!! 90<=score && score>=100; // 이것처럼 써야함

Python에서는 위와 같은 방식이 가능하지만 JS에서는 불가능.

90<score<100; alert(-100<score<-50); //score=-75넣으면 false나온다. 1<-50으로..

위와같이 하는 경우에 앞쪽(90<score)이 먼저 계산되어 1<100이 되기 때문에 true가 반환된다.

while문은 break조건 분기를 잘 짜자.(while블럭 빠져나가기)

continue은 while블럭을 빠져나가지 않고 다음실행으로.

조건 분기를 통해 빠져나가야 하는 경우에는 continue 필요X4

var name = prompt("이름을 알려주세요: ")

prompt는 String으로 값을 반환한다.

alert(msg); // 알림창 console.log(msg); // 브라우저 콘솔에 출력 document.write(msg); // 단순 브라우저에 추가

for문에서 조건식의 실행 이후에 증감식을 실행한다.

for(var i=2; i<=9; i++){ for(var j=1; j<=9; j++){ document.write( i+'*'+j+'='+(i*j)+'</br>' ) // 괄호 안이면 줄 바꿔도 괜찮다. } }

5

객체의 type을 알고싶다면 typeof

typeof(someObject) // 객체의 타입 검사

terminal에서 js compile하고싶으면 Node.js를 쓰자

$ node test.js

단, node에서 실행시 document객체가 존재하지 않는다. (즉, document.write, alert등의 사용 불가능!)

Python의 print()는 JS의 console.log()다.

6

함수 안에 있는 변수는 외부에서 접근이 불가능하다.

function Sum(var1, var2){ var someThing = var1 + var2; return someThing; } var result = Sum(1,2) // 3

var로 선언되지 않은 변수는 항상 global변수로 사용되고, strict mode에서는 ReferenceError가 생긴다.

var someThing = 'SomeThings' // local var someThingGlobal = 'GlobalVar???' // global var

7

JS는 클래스가 없다!(드든)

함수를 마치 클래스처럼 써보려면...

function(){ this.settle = 'settle?' }

JS의 최상단 객체는 window

그래서 window객체는 window.객체()라고 해도 되고 객체() 라고 해도 된다.

window.open() == open()

8

간단한 Array

list = ['a','b','c','d'] list2 = ['e','f','g'] function print(vars){ console.log(vars) } print(list) print(list.reverse()) print(list) print(list.sort()) print(list+list2)

9

Navigation Bar #1

css로 hover기능 이용 (No JS)

.menu{ position: fixed; left: -250px; width: 300px; top: 0; height: 100%; background: black; transition: all 300ms; /*여기에 넣어야 제�로 동작함*/ } .menu:hover{ left:0; }

10

Navigation Bar #2

JS로 div 클릭시 나타나도록. addClass 함수 이용

$.('.menu').click(function(){ $.('.menu').addClass('open') })

or

function AddClass(){ $('.menu').addClass('open') } $('.menu').click(AddClass)

11

Navigation Bar #3

JS 이용해 조건식으로 클래스 넣어주고 끄기

function MenuToggle(){ if($('.menu').hasClass('open')==true){ $.('.menu').removeClass('open') } else { $('.menu').addClass('open') } }

jQuery이용해 넣고빼기

function MenuToggle(){ $('.menu').toggleClass('open') } $('.menu').click(MenuToggle) 12