일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- CSS
- 바닐라 JS로 크롬 앱 만들기
- axios-mock-adapte
- 생활코딩
- 코딩독학
- HTML 파일구조
- jest
- 노마드 코더
- 노마드코더
- 바닐라 JS로 그림판 만들기
- 웹 브라우저 구조
- 코딩일기
- javascript
- canvas js
- JS
- canvas image
- typescript
- 코코아톡 클론코딩
- react
- queryprovider
- next.js
- negative margin
- JAVA Script
- 프론트엔드
- tailwindcss
- 웹 브라우저 렌더링
- canvas
- tanstack-query
- HTML
- clone coding
- Today
- Total
목록JAVA Script (14)
Coding Archive
3. Events javascript가 document로 html을 불러올 수 있고 수정 추가도 가능하다. . 불러오는 함수 querySelector/ querySelectorAll 이 유용하다. element의 내부를 보고 싶으면 console.dir() 기본적으로 object로 표시한 element를 보여준다. (전부 js object임) 그 element 중 앞에 on이 붙은 것들은 event다. event : 어떤 행위를 하는 것 . 사용자의 event를 listen 해서 반응 (모든 event는 js가 listen 할 수 있음) eventListener : event를 listen 함 → js에게 무슨 event를 listen 하고 싶은 지 알려줘야 함 title.addEventListener(..
7. Functions part One function은 계속 반복해서 사용할 수 있는 코드 조각이다. 어떤 코드를 캡슐화해서 실행을 여러 번 할 수 있게 해 준다. . function 선언 방법 function 함수명() { 실행코드 } . function 실행 함수명(); *argument(인수)를 보내야 하는데 인수란 함수를 실행하는 동안 어떤 정보를 함수에게 보낼 수 있는 방법이다. function sayHello() { console.log("Hello my name is"); } sayHello(); // Hello my name is 8. Functions part Two 함수의 구성 요소를 살펴보면 ex) funtion plus(x, y) { console.log(x + y) } 위 함수에..
#1 INTRODUCTION three.js는 javascript로 3D를 구현하게 해주는 라이브러리로 데이터 시각화도 구현이 가능하다. javascript 기술을 좀 더 깊게 배우고 싶다면 프레임워크로 넘어가면 된다. → 프레임워크는 쉽게 말해 내가 하려는 일을 도와주는 도우미이다. (ex. React Native - javascript만으로 안드로이드랑 ios앱을 만들 수 있게 해 준다. Electron - javascript와 html, css로 데스크톱 앱을 만들 수 있게 해 준다.) Replit는 브라우저를 사용하여 코드를 작성하고 앱과 웹사이트를 만들 수 있게 한다. (브라우저에 vsc 같은 프로그램을 깔 수 없을 때 사용) #2 WELCOME TO JAVASCRIPT 0. Your First..
29. 객체 예고 (object) 객체 : 서로 연관된 함수와 서로 연관된 변수들을 그룹핑해서 정리 정돈하기 위한 수납상자(폴더 같은 느낌) 객체에 속해있는 함수는 메소드(method)라고 부른다. 30. 객체 쓰기와 읽기 배열이라는 것은 정보를 담는 그릇인 동시에 정보가 순서대로 저장된다는 특징을 가진다. 반면에 객체는 순서없이 저장된다. (이름이 있는 정리정돈 상자) Object Create 31. 객체와 반복문 Iterate 32. 객체 프로퍼티와 메소드 객체 생성법 var coworkers = { "programmer" : "egoing", "designer" : "leezhe" }; 객체 불러오기 document.write("programmer : " + coworkers.programmer +..
20. 배열 (array) 배열 : 데이터가 많아짐에 따라 그 데이터 중에 서로 연관된 데이터를 잘 정리 정돈해서 담아두는 일종의 수납상자 배열을 만드는 방법: var number = ['one', 'two']; → 배열은 변수에 담는다 배열을 가져오는 방법: document.write(number[0]); → one 배열 만들고 가져오기 var coworkers = ["egoing", "leezche"]; //문자는 대괄호나 소괄호로 열고 닫음 document.write(coworkers[0]); //-> egoing 출력 배열에 들어있는 값의 개수 document.write(coworkers.length); //-> 2 출력 배열 추가 coworkers.push('duru'); coworkers.pu..
2. 수업의 목적 JavaScript가 할 수 있는 아주 중요한 측면은 사용자와 상호작용한다는 점이다. JavaScript는 사용자와 상호작용을 하는 언어이다. JavaScript가 html을 제어하는 언어이다. 웹브라우저는 한번 화면에 출력되면 자기 자신을 바꿀 수 없다.(body태그는 언제나 body태그인 것처럼!) 하지만 JavaScript를 이용하면 body태그에 style이라는 속성이 추가되면서 body태그의 디자인을 바꿔준다. →이런 특성이 웹페이지를 훨씬 더 동적으로, 다이나믹하게 만든다. 3. HTML과 JS의 만남 : script 태그 JavaScript는 기본적으로 html 위에서 동작하는 언어로 정적인 html과는 다르게 동적이다. JavaScript를 넣는 방법 웹 브라우저한테 ht..