본문 바로가기 메뉴 바로가기

Cho's study 웹공부정리

메뉴보기
  • 분류 전체보기 (89)
    • Three.js (3)
      • 튜토리얼 (2)
    • 스마트웹 개발2021 (42)
      • UIUX 콘셉트 기획 (3)
      • 프로그래밍 언어활용 (39)
    • 생활코딩 (16)
      • 자바스크립트 (16)
    • 노마드코더 (20)
      • 자바스크립트 (20)
    • 프로그래머스 (4)
      • 코딩테스트 (4)
    • Vue.js (1)
      • 카카오맵 (0)
    • typescript (2)
흔적남기기
검색하기 폼

최근 글

댓글

태그

  • 자바스크립트 반복문
  • typescript-eslint
  • 자바스크립트 실습환경
  • 자바스크립트 실행방법
  • 자바스크립트 변수
  • three.js
  • 자바스크립트 주석
  • 자바스크립트 조건문
  • 자바스크립트 숫자와 문자

흔적

  • 다녀간 사람들
  • 오늘 온 분
  • 어제 온 분
공지사항
링크
«   2025/07   »
일 월 화 수 목 금 토
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
글 보관함
분류 전체보기에 관한글 (89)
#2-5 첫번째 조건문!! If, else, and, or

if-else if else 는 많은 프로그래밍 언어에 있고 if()안에 조건문을 추가한다. else 는 조건문이 거짓일 경우 실행된다. if ( 10 === 5 ){ console.log("hi"); } else { console.log("ho"); } //"ho" if ( "10" === 10 ){ console.log("hi"); } else { console.log("ho"); } //"ho" === 는 정확한 조건연산을 실행한다. 만약 조건이 참이 아닐경우 "ho"를 출력하게된다. 피연산자 if( 10 > 5 && "nicolas" === "nicolas" ){ console.log("yes"); } else { console.log("no"); } //yes if( 10 > 5 || "nico..

노마드코더/자바스크립트
#2-4 Events and event handlers

이벤트란? 자바스크립트는 html과 css 를 바꾸고 싶어서 만들어지지는 않았다. 자바스크립트는 이벤트를 반응하기 위해 만들었다. window.addEventListnener("resize",handleResize); function handleResize(){ console.log("I hanve been resized"); } winodw 요소에 화면을 resize 할때마다 handleResize 함수를 실행하는 이벤트를 추가 시켰다. dom 요소에 이벤트를 추가할 수 있고, 해당 이벤트가 발생하면 콜백함수가 실행된다. 이벤트 객체 window.addEventListnener("resize",handleResize); function handleResize(event){ console.log(even..

노마드코더/자바스크립트
#2-3 Modifying the DOM with JS

자바스크립트를 이용해서 HTML, CSS 를 조작할 수 있다. const title = document.getElementById("title"); title.innerHTML ="HI From JS"; title.style.color = "red"; .querySelector 메서드를 이용해서 DOM 요소에 접근할수 있다. const title = document.querySelector("#title"); title.innerHTML ="HI From JS"; title.style.color = "red"; '#아이디명' 을 이용하면 ID이름 참조, '.클래스명' 을 이용하면 CLASS이름을 참조한다.

노마드코더/자바스크립트
#2-2 JS DOM Functions

Dom 요소접근 자바스크립트로 DOM 요소에 접근할 수 있다. console.log(document); //#document .getElemntById 메서드 등을 이용하여 접근할 수 있다. const title = document.getElementById("title"); console.log(title); //많은 속성들... title.innerHTML = "Hi! From JS"; 아이디 값으로 "title" 값을 가진 요소에 접근 했다. 그리고 title 안에 문자열을 넣었다. title 객체 속에는 innerHTML 말고도 매우 많은 속성이 있다.

노마드코더/자바스크립트
#2.1.1 More Function Fun

들어가기 자바스크립트에서는 console.log를 이용해 출력할때 "+"를 이용해서 변수나 문자열을 있는다. fucntion sayHello( str,age ){ console.log("Hello ! " + str + "you have" + age + " years of age" ); } sayHello("Nicolas", 15); 템플릿 문자열, 리턴 값 fucntion sayHello( str,age ){ console.log(`Hello ! ${str} you have ${age} years of age`); } const greetNicola = sayHello("Nicolas", 15); // Hello ! Nicolas you hane 15 years of age undefined + 나 , ..

노마드코더/자바스크립트
#2-1 너의 첫번째 함수! (Your first JS Function)

console.log 우리는 console.log()를 이용해서 문자열 등을 출력한다. console.log를 출력해보자 함수란? 어떤걸 수행하려는 한 부분으로, 원하는 만큼 쓸 수 있다. 한 코드 조각으로 당신이 원하는 것을 쓸수 있다. console.log("Hello Nicolas"); console.log("Hello Jun"); console.log("Hello Liyn"); console.log("Hello Dal"); 함수 없이는 같은 코드를 반복해서 써야한다 하지만 함수를 쓴다면 반복할 필요가 없다. fucntion sayHello( str,age ){ //파라미터로 str 인자를 전달해준다. console.log("Hello ! ",str ,"you have",age," years of ..

노마드코더/자바스크립트
#1-10 Organizing Data with Objects

배열과 객체가 다른점 배열은 리스트형으로 정의 하고 Object는 각 value에 이름을 줄수 있다. 객체를 사용하는 이유 const nicoInfo = ["Nicolas", "55", true, "Seoul"]; console.log(nicoInfo);//"Nicolas", "55", true, "Seoul" 만약 개인정보를 저장하고자 하면. 정렬된 형태로 데이터를 저장할수 없다. 해당 코드는 효율적이지 않다. 객체사용 const nicoInfo = { name : "Nico", age : 33, gender:"Male", isHandsome:true favMovies: ["Along the gods", "LOTR", "Oldboy"], favFood: [ { name:"Kimchi", fatty:fl..

노마드코더/자바스크립트
#1-9 Organizing Data with Arrays

Array 데이터를 저장하는 곳으로 리스트 같이 저장한다.. 배열의 필요성 const monday = "Mon"; const tue = "Tue"; const wed = "Wed"; const thu = "Thu"; const fri = "Fri"; console.log(monday, tue, wed, thu, fri); 다음과 같이 변수로만 데이터를 저장하면 데이터를 불러오기가 불편하다. 배열 사용 const someting = "someting"; const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; console.log(daysOfWeek); stirng 사이에 ,를 넣으면 array가 된다. 배열은 Array[index]형태를..

노마드코더/자바스크립트
Three.js 설치 와 그외것들

Thress.js 설치 https://threejs.org/ Three.js – JavaScript 3D Library threejs.org 해당 사이트에서 download 메뉴를 들어간다. 다운로드를 하면 합축파일이 나올텐데, 압축해제를 한후 build폴더에 있는 자바스크립트 파일중 원하는 것을 사용하면 된다. 나는 three.min.js 를 사용했다. Node.js 에서 Three.js 사용

Three.js/튜토리얼
이전 1 2 3 4 5 ··· 10 다음
이전 다음

티스토리툴바