Javascript& React study
-
생활코딩 5강 실습Javascript& React study 2018. 3. 28. 22:58
생활코딩 5강 실습에서는 데이터타입 - 문자열과 숫자에 대해 알아보았습니다. 자바스크립트 데이터 타입에는 총 6가지가 있고 객체가 있다. Number-숫자String-문자열 alert(12);라고 콘솔창에 입력을 하면 브라우저에 12라는 경고창이 뜨게 된다. alert(1+1);을 하게 되면 경고창에 2가 뜨게 된다. 소스를 치기 귀찮으면 콘솔창에 수식을 넣는다 예)1+1=2 여기서 +는 왼쪽의 값과 오른쪽의 값을 더하여 하나의 값을 만든다.이것을 이항연산자라 한다.(산술연산자)(+,-,*,/) ""와 ''안에 있는 문자를 문자열이라 한다. 해당 소스에.length를 치게 되면 해당 글자의 숫자를 알려준다. str.toUpperCase()라는 소스는 console.log('alphabet'.toUpper..
-
생활코딩 5강Javascript& React study 2018. 3. 28. 21:59
생활코딩 5강에서는 주석에 대해 공부하였습니다. 해당 코드를 입력하고 브라우저에 실행시켜봅시다아무것도 뜨지 않습니다. 실행이 되지 않은 웹 브라우저 해당 console을 확인해보면 해당 소스의 오류를 확인해볼 수 있는데 Test.html:8이란 뜻은 Test.html파일에서 8번째 줄에서 오류가 나온다는 뜻입니다. 해당 Test.html:8을 클릭하면 오류가 나는 소스를 확인할 수 있다.여기서 주석,comment은 자바스크립트 문법에 어긋나는 코드이다. 주석,comment에 //주석,comment를 붙이게 되면 오류가 뜨지 않게 된다.회색으로 표시된것은 //주석,comment까지 주석으로 표시가 된다. 아까 있었던 오류코드가 나오지 않게 된다.이는 아까 자바스크립트 문법에 맞지 않았던 코드가 주석이라는 ..
-
생활코딩 4강 실습Javascript& React study 2018. 3. 26. 22:04
생활코딩 4강 실습에서는 HTML과 JavaScript의 만남 3 (콘솔)에 대해 공부하였습니다. 사진에 보이는 콘솔은 구글 개발자 도구에 있는 콘솔로이 콘솔을 이용하면 파일을 만들지 않고도 바로 자바스크립트를 실행할 수 있다. 데이터를 처리해야 할 경우 이 콘솔창을 사용한다. 이렇게 긴 문장이 몇글자인지 궁금하다면 우선 따옴표로 묶어줘야 한다. 이 따옴표 사이에 있는것을 문자라 한다. 이 문자의 숫자를 알려주는 것이 바로 .length라 한다.숫자를 확인하고 싶다면 alert으로 묶어주고 enter를 친다.그러면 화면에 경고창으로 숫자가 뜨게 된다. 자바스크립트를 이용한다는 것은 이미 만들어진 웹사이트에서 자신이 필요한 것들을 간단하게 코드를 작성하여 해결을 할 수 있다. 콘솔을 통해 자바스크립트를 실..
-
생활코딩 4강Javascript& React study 2018. 3. 26. 21:43
이번 생활코딩 4강에서는 변수에 대하여 공부하였습니다. 변수의 선언 변수:Variable 컨테이너로 값을 유지할 필요가 있을 때 사용한다변하는 것이 가능하다는 뜻의 변수 (대명사) var-변수를 선언하겠다var a = 1; ( a라는 변수를 생성한 것) var a = 1;을 하고 alert(a);를 하게 되면 경고창에 1이 나오게 된다 var a = 10;을 하고 alert(a);를 하게 되면 경고창에 10이 나오게 된다그러므로 a는 어떤 값을 담는 그릇이 되는것이고 어떤 값도 담길 수 있기 때문에 이것은 변하는 수 즉 변수이다 var a =1;var b =2;alert(a+b);는 3이 된다. a=1 b=2 1+2=3 //은 주석(comment)으로 코드에 부가적인 설명을 쓰거나 사용하지 않는 코드를 ..
-
생활코딩 3주차 실습Javascript& React study 2018. 3. 23. 00:17
생활코딩 3주차 실습은HTML과 JavaScript의 만남 2 (이벤트)에 대해 공부하였습니다. 소스코드를 입력하고 을 입력하면버튼이 만들어지게 됩니다. (버튼이 만들어지는 모습) 버튼에 이름을 넣고 싶을 경우 value="원하는 이름"을 넣으면 됩니다. (버튼에 이름이 만들어진 모습) 버튼을 누르면 hi라는 경고창이 뜨게 만들고 싶다면 onclick="alert('hi')"라는 코드를 넣는다. onclick에서는 반드시 js가 와야한다.("alert('hi')")사용자가 클릭을 했을때 자바스크립트 코드인 "alert('hi')"를웹브라우저가 동작할것입니다 라고 설정함 이를 사건(이벤트)라고 한다. (경고창에 hi가 나오는 모습) 라고 입력하면 텍스트 창이 뜨게 된다. (텍스트 창이 뜬 모습) oncha..
-
생활코딩 3주차Javascript& React study 2018. 3. 22. 23:41
생활코딩 3주차에서는 숫자와 문자에 대한 수업을 진행하였습니다. html소스를 넣고 tab키를 누르면 html의 기본적인 탬플릿이 나오게 됩니다. 이 기본적인 소스에 body부분으로 가서 바로 스크립트 소스를 넣고 실행시키면 됩니다. script를 입력하고 tab키를 누르면 기본적인탬플릿이 나오게 됩니다. (탬플릿이 나온 소스코드의 모습) alert();은 함수의 영역이므로 지금 강의에서는 다루지 않습니다. 괄호 안에 들어있는 1이라는 영역은 alert이 경고창이라는의미이므로 경고창이 뜨게 되면 1이라는 글씨가 뜨게 됩니다. [이러한 숫자 1을 가리켜 정수라고 한다] [실수로 쓰고자 할때는 x.x이라고 한다.] 1이 나온 모습 정수를 더하고 싶을때는 ()안에 더하고 싶은 정수를 넣고 +. (더한 정수가 ..
-
생활코딩 2강 실습Javascript& React study 2018. 3. 22. 00:24
생활코딩 2강 실습에서는 HTML과 JavaScript의 만남 1 (script 태그)에 대해 공부하였습니다. 새로운 파일에서 기본 html소스 코드를 만들어봅시다. 스크립트 부분에 hello world를 넣으면화면에 hello world가 표기됩니다. 부분은 헤더 부분이며이 소스를 쓰게 되면 타이틀 글씨가 크게 나오게 됩니다. 스크립트 소스를 쓴 hello world와쓰지 않은 hello world는 어떤 차이가 있을까요? 스크립트를 쓴 소스는 동적으로 변화하는 반면쓰지 않은 소스는 그대로 표시가 되게 됩니다. (예시를 보면 이해가 잘 되실겁니다.)
-
생활코딩 2강Javascript& React study 2018. 3. 22. 00:03
생활코딩 2강에서는자바스크립트 실행방법과 실습환경에 대하여 공부하였습니다. 1생활코딩에서는 구글 크롬 개발자 도구를 사용하고 있다. 2,텍스트를 편집할 수있는 에디터를 사용할것 (아톰 사용) 아래 코드를 복사한다. 여기서 이 자바스크립트입니다. 그러므로 실습을 할 경우 안에 코드를 작성해야 합니다. 그리고 자바스크립트를 제외한 나머지 부분을 html부분이라고 합니다. 설정시 html파일로 저장하고 파일형식은모든 파일에 인코딩은 utf-8로 저장해야 합니다. 해당 코드를 저장하고 html파일을 클릭하면이 페이지가 뜨게 됩니다. [크롬 개발자 도구 사용방법] 오른쪽 부분이 개발자 도구입니다. 콘솔이라고 표기 되어있는 부분이소스를 넣고 수정하는 부분입니다. 위 소스를 넣고 실행시키면hello world라는 글..