Zin0's 개발 기록 공간 Zin0's 개발 기록 공간

Java Script/MDN 정리

• 자바스크립트 구성요소 ~ 함수는 값을 반환한다

  Java Script/MDN 정리 2020. 7. 26. 19:06

  반환 값이란 let myText = 'The weather is cold' let newString = myText.replace('cold', 'warm') console.log(newString) // Should print "The weather is warm" // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with the replacement made replace() 메소드의 작동 원리 'cold' substring을 찾는다. 해당 substring을 'warm'으..

  Read More
• 자바스크립트 구성요소 ~ 함수 만들기

  Java Script/MDN 정리 2020. 7. 25. 00:09

  Active learning: Let's build a function 본격적으로 시작하기 앞서, 기본적인 함수를 만들어봅시다.. function-start.html 파일을 연습하고있는 컴퓨터에 복사하여 저장합니다. HTML 구조는 매우 간단합니다. — body 태그에는 한 개의 버튼이 있습니다. 그리고 style 태그에 메시지 박스를 위한 CSS 블럭이 있습니다. 그리고 비어있는 `` 엘리먼트에 연습할 자바스크립트 코드를 앞으로 쓰겠씁니다.. 다음으로 아래의 코드를 script 엘리먼트에 써봅시다. function displayMessage() { } 마지막으로 아래의 코드를 중괄호 안에 작성합니다. const html = document.querySelector('html'); cons..

  Read More
• 자바스크립트 구성요소 ~ 함수-재사용 가능한 블록

  Java Script/MDN 정리 2020. 7. 24. 23:19

  함수 vs 메소드 메소드(Methods) Built-in browser functions String의 replace, split, Math의 pow, random , Array의 join 등과 같은 빌트인 함수들 Object 안에 정의된 functions 함수(functions) 일반적으로 생각하는 function 사용자 정의 함수 예시 function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); for (var i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = &#39;rgba(255,0,0,0.5)&#39;; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math..

  Read More
• 자바스크립트 구성요소 ~ 반복문

  Java Script/MDN 정리 2020. 7. 24. 00:56

  나를 계속 붙잡아라 counter 특정 값으로 초기화 된다. 루프의 시작점 exit condition loop가 멈추는 기준이 되는 종료 조건 iterator 끝나는 조건에 도달할 때까지 일반적으로 counter를 각각의 연속된 루프에서 조금씩 증가시킨다. ( 연산을 진행함 => 감소, 곱셈, 나눗셈 등 가능) 수도 코드loop(food = 0; foodNeeded = 10) { if (food = foodNeeded) { exit loop; // We have enough food; let&#39;s go home } else { food += 2; // Spend an hour collecting 2 more food // loop will then run again } } 루프의 표준 for (in..

  Read More
• 자바스크립트 구성요소 ~ 조건문

  Java Script/MDN 정리 2020. 7. 24. 00:12

  Active Learning : 간단한 달력 만들기 링크 var select = document.querySelector(&#39;select&#39;); var list = document.querySelector(&#39;ul&#39;); var h1 = document.querySelector(&#39;h1&#39;); select.onchange = function() { var choice = select.value; let days = 31; // ADD CONDITIONAL HERE if(choice === "February") { days = 28; } else if(choice === "April" || choice === "June" || choice === "September" || ..

  Read More
• 자바스크립트 첫걸음 ~ 바보같은 이야기 생성기

  Java Script/MDN 정리 2020. 7. 23. 22:46

  시작하기 HTML 예제 파일이 있는 사이트(grab the HTML file)로 이동하여 파일을 카피하여 자기 컴퓨터에 디렉토리을 새롭게 만들고 파일이름 index.html로 저장한다. 이 안에는 예제를 위한 CSS가 포함되어 있다. 또 다른 가공전의 텍스트가 있는사이트 (page containing the raw text) 로 가서 별도의 브라우저 탭으로 열어 놓아라. 이것은 나중에 필요하다. 프로젝트 설명 "랜덤한 이야기 만들기(Generate random story)" 버튼을 누를 때 마다 꾸며진 이야기(silly stories)를 만들어야 한다. "Enter custom name"필드에 값이 입력되어있지 않을 경우 기본 이름을 Bob으로 지정한다. "랜덤한 이야기 만들기(Generate rando..

  Read More
• 자바스크립트 첫걸음 ~ 배열

  Java Script/MDN 정리 2020. 7. 23. 20:23

  배열 배열 만들기var sequence = [1, 1, 2, 3, 5, 8, 13]; var random = [&#39;tree&#39;, 795, [0, 1, 2]]; 위와 같이 배열 안에 모든 항목을 한번에 저장할 수 있다. (배열 안에 배열도 가능) 유용한 배열 Method 문자열을 배열로, 배열을 문자열로 변환하기 split() var myData = &#39;Manchester,London,Liverpool,Birmingham,Leeds,Carlisle&#39;; var myArray = myData.split(&#39;,&#39;); myArray; join() var myNewString = myArray.join(&#39;,&#39;); myNewString; 조인 안에 문자열 파라메터를 ..

  Read More
• JavaScript 첫걸음 ~ 문자열 제대로 다루기

  Java Script/MDN 정리 2020. 7. 23. 17:05

  Strings as objects 자바스크립트의 모든 것은 객체다. 변수가 문자열 객체 인스턴스되면, 수많은 속성과 메서드를 사용할 수 있다. String 객체 페이지에서 목록 확인. 문자열 길이 찾기 length 프로퍼티를 사용할 수 있다. var browserType = &#39;zin0&#39;; browserType.length; 결과는 4를 리턴한다. 특정 문자열 찾기 대괄호 표기법을 이용해서 문자열 안의 문자를 구할 수 있다.browserType[0]; browserType[browserType.length-1]; z와 0이 리턴된다. 문자열 내부의 하위 문자열 찾기 및 추출 큰 문자열 안의 작은 문자열(하위 문자열)을 찾고 싶을 때, indexOf()를 사용해서 찾을 수 있다.browserT..

  Read More