JavaScript 썸네일형 리스트형 [JS] 데이터타입, data types, 변수 선언 let vs var, hoisting Variable, rw (read / write) : 변수 : 변경될 수 있는 값 : let을 많이 씀 let name = 'ellie'; - 해석: let이라는 키워드 이용해서 name이라는 변수를 선언(declaration)하고 ellie라는 변수의 값을 할당한다. name = 'hello'; - 해석: 다시 name 이라는 변수에 hello 라는 값을 할당하면 console에는 ellie와 hello가 나란히 출력된다. 변수가 쓰이는 원리 어플리케이션을 쓰게 되면, 어플리케이션마다 쓸 수 있는 메모리가 할당되어진다. 이 메모리는 텅텅 비어있는 박스들인데 let이라는 키워드를 이용해서 name이라는 변수를 정의하게되면 한가지의 박스를 정의할 수 있는 포인터가 생김. name이라는 변수가 가리키고 있는.. 더보기 [JS] 콘솔에 출력, script async 와 defer의 차이점 - VSC 실행 - console.log('Hello World!'); 입력 - 파일이름: " main.js " - 해당 폴더 우클릭 -> Git Bash here -> node main.js 치면 Hello World! 라고 뜬다. * IDE(Integrated Development Environment) : 효율적으로 소프트웨어를 개발하기 위한 통합개발환경 소프트웨어 어플리케이션 인터페이스이다. : 한마디로 개발도구(ex. VSC) * console API : 브라우저가 제공하는 함수. [ 자바스크립트 공식사이트 ] : developer.mozilla.org (추천) console.log() - console.log() 메서드는 "웹 콘솔에 메시지를 출력합니다." 를 의미. - 콘솔 실행 창 : ct.. 더보기 [JS] JavaScript의 역사, 현재 그리고 미래 1993 - Marc Andreessen은 Netscape 회사를 차림 - Mosaic Web Browser 만듦 1994 -Netscape Navigator (UI요소가 더 추가됨) └ HTML , CSS 로 페이지를 만듦. (정적인 웹사이트, 시장에서 80%의 점유율) Marc Andreessen은 동적인 웹사이트를 만들기 위해 고민.. 1. Java(무겁고, 단어가 어려움) 2. Brendan Eich를 스카웃해서 Scheme라는 언어를 변형해서 우리만의 새로운 언어를 만들자! - 9월, 내부적으로 Mocha라고 불렀던 새로운 언어 탄생. - 추후 LiveScript로 이름 변경 / Netscape 안에는 이해하고 실행할 수 있는 LiveScript 엔진, 즉 Interpreter가 포함해서 출시... 더보기 [JS] UI vs API & 마무리 *UI : User Interface : 사용자가 시스템을 제어하기 위해 사용하는 조작장치 *API : Application Programmming Interface : 애플리케이션을 만들기위해 프로그래밍할때 사용하는 조작장치 (ex.alert) : 모든 프로그래밍 언어에 공통적으로 적용됨. 모든 애플리케이션들은 API를 프로그래밍쪽으로, 순서대로 실행하는 것을 통해 만들어진다.API와 순서는 뗄레야 뗄 수 없는 관계. : java script로 api를 응용해서 프로그램을 만들 수 있다. JS를 마무리하며 공부 보단 실습을 추천한다. 실습보다는 프로젝트를 시작하는것이 좋다. 공부를 많이 할 수록 머리가 복잡해지기 때문이다. 자신의 프로젝트 시작할 때, 모든 개념을 총동원 하려고 하지 말아라. 최소한의 .. 더보기 [JS] 라이브러리와 프레임워크 다른사람이 만들어놓은 소프트웨어를 부품을 소비해서 내가 만들고 있는 소프트웨어에 생산자가 되는 방법을 알아볼 것이다. 키워드: library VS framework - library : 내가 만들고자하는 프로그램에 필요한 부품들이 되는 소프트웨어를 재사용하기쉽도록 돼 있는 소프트웨어. (내가 만들고잇는 프로그램의 부품을 가져오는 느낌) -framework : 만들고자 하는게 잇을때 (게임,웹,채팅 등) 만들고자 하는게 무엇인지에 따라서 그것을 만들려고 할때 공통적인것, 달라지는 것이 존재할 것인데, 이 부분을 살짝살짝 수정하는 것. (framework안에 들어가서 우리가 작업하는 것) ▶jQuery : 안정적, 생산성↑ - jQuery 이용하면 반복문 안써도 된다. 우리 대신에 jQuery가 알아서 처리.. 더보기 [JS] 파일로 쪼개서 정리 정돈하기 객체보다 더 큰 정리정돈의 도구가 있다. 📍서로 연관된 코드를 파일로 묶어서 그룹핑하는 방법. 모든 HTML1,2,3웹페이지에 버튼코드와 자바스크립트 코드 복붙해보자. 모든 페이지에 night/day라는 버튼이 생겼을 것이다. 하지만 문제가 생긴다. 만약 우리가 만드는 사이트가 1억개라면 그 값을 바꿨을 때 1억번을 바꿔야 한다는 것. ex) skyblue를 yellow로 바꾸고싶으면 color의 값을 yellow로 바꾸는 수정을 1억번 해야한다. 파일을 생성한다 ( colors.js ) colors.js 파일에 script코드 복붙한 후, 모든 웹페이지에는 로 바꿔주면 결과는 똑같지만 내부적으로는 다른 프로세스를 가지게 된다. *src : 소스 이 코드를 웹페이지에 적어만 준다면 똑같은 효과를 가진 j.. 더보기 [JS]객체의 활용 Body.setBackgroundColor('black') └ 이런 식으로 코딩하고싶으면 어떻게 해야할까? 1. var Body라는 객체에 변수를 담는다. - 프로퍼티로 setColor를 지정하고 function(함수)을 써서 코드를 담는다. var Body = { setColor:function(color){ document.querySelector('body').style.color=color; } 함수의 내용은 아래에서 가져왔다. 그리고 이 부분은 필요없으므로 지워주자. setBackgroundColor:function (color){ document.querySelector('body').style.backgroundColor=color; } - 참고 ) setBackgroundColor : 앞에.. 더보기 [JS]객체프로퍼티와 메소드 📍객체에 함수 담는 법 coworkers라는 객체에 showAll이라는 메소드를 넣고싶다하면? showAll은 함수니까 function이 쓰인다. coworkers.showAll = function(){ } 이 코드는 function showAll(){ } 과 똑같은 함수라고 보면된다. 함수를 정의할 때 1. var showAll = function(){ } 2. function showAll(){ } 둘은 똑같다. 다시 내용으로 돌아와서, showAll 이라는 함수에 저 내용을 넣는다. - showAll하면 모든 coworkers에 있는 각각의 데이터들을 interate해서 화면에 출력하는 것. 마지막으로 coworkers.showAll(); 이 코드를 적고 웹을 실행시키면 ▼아래와 같이 출력된다. 하.. 더보기 이전 1 2 3 다음
