티스토리

점미의 스터디

검색하기

블로그 홈

점미의 스터디

wjaal-study.tistory.com/m

점미 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

WEB2 - JavaScript - 파일로 쪼개서 정리 정돈하기 파일로 쪼개서 정리 정돈하기 - https://opentutorials.org/course/3085/18856 여러개의 html파일에서 공통적으로 사용하는 스크립트 영역이 있을 수 있다. 영역에서 수정이 필요할 때 모든 html에서 각 각 수정이 필요하다.이런 작업은 html이 수십개 있을 경우 관리하기 어려우며 실수를 할 확률도 높아진다. 이런 작업의 불편함을 줄이기 위해 영역을 스크립트 파일인 js파일로 만들어서html파일에서 불러오도록 설정한다.이렇게 하면 js파일만 수정하게 되면 해당 js파일을 가지고 있는 html문서들은 자동으로 그 js파일을 참조하게 된다. 공감수 0 댓글수 0 2019. 1. 3.
WEB2 - JavaScript - 객체 활용 객체 활용 - https://opentutorials.org/course/3085/18885 객체의 프로퍼티 나누기var Body = { //변수 Body안에 함수 두개를 선언 하였는데 setColor, setBackgroundColor 이 것도 프로퍼티 이기 때문에 함수가 끝나는 시점에 콤마로 프로퍼티를 나누어줘야 한다.setColor:function(color){document.querySelector('body').style.color = color;},setBackgroundColor:function(color){document.querySelector('body').style.backgroundcolor = color;}} 공감수 0 댓글수 0 2019. 1. 2.
WEB2 - JavaScript - 객체예고, 객체 객체예고 - https://opentutorials.org/course/3085/18884객체 - https://opentutorials.org/course/3085/18853 객체 쓰기와 읽기[결과화면] 객체와 반복문 생성된 객체에 어떤 데이터가 있는지 모두 가져오는 방법Iterate[결과화면] 프로퍼티와 메소드 IterateProperty & Method 공감수 0 댓글수 0 2019. 1. 2.
WEB2 - JavaScript - 함수의 활용 함수의 활용 - https://opentutorials.org/course/3085/18883 WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages i.. 공감수 0 댓글수 0 2018. 12. 27.
WEB2 - JavaScript - 함수예고, 함수 함수예고 - https://opentutorials.org/course/3085/18882함수 - https://opentutorials.org/course/3085/18851 함수의 기본 문법에 관한 예제이다.Function Basic Parameter & Argument Return 매개변수(parameter)와 인자(argument) 매개변수와 인자는 아래와 같은 개념으로 생각하면 된다. 입력 : 매개변수출력 : 인자Function Basic Parameter & Argument Return 리턴 Function Basic Parameter & Argument Return [결과화면]맨 아래의 script 코드에 대한 결과화면이다. 공감수 0 댓글수 0 2018. 12. 27.
WEB2 - JavaScript - 배열과 반복문의 활용 배열과 반복문의 활용 - https://opentutorials.org/course/3085/18850 WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpa.. 공감수 0 댓글수 0 2018. 12. 27.
WEB2 - JavaScript - 반복문, 배열과 반복문 반복문 - https://opentutorials.org/course/3085/18827 특정 코드를 반복해야 할 때 반복문을 사용하여 간편하게 반복시킬 수 있다. Loop[실행결과]Loop12323234 배열과 반복문 - https://opentutorials.org/course/3085/18828 배열안의 내용을 반복문으로 하나씩 꺼내서 반복해주는 예제이다. Loop & Array Co workers [결과화면]Loop & ArrayCo workersegoingleezchedurutaeho 공감수 0 댓글수 0 2018. 12. 26.
WEB2 - JavaScript - 반복문 예고, 배열 반복문 예고 - https://opentutorials.org/course/3085/18881배열 - https://opentutorials.org/course/3085/18825 배열이 왜 필요한가? - 배열자체로는 필요성을 알기 힘들다. 반복문과 함께 쓰면 필요성을 더 쉽게 찾을 수 있다.- 연관된 데이터를 잘 정리정돈하여 담아두는 수납상자이다. 배열의 문법 ArraySyntax get add count 공감수 0 댓글수 0 2018. 12. 26.
WEB2 - JavaScript - 리팩토링(refactoring) 리팩토링(refactoring) - https://opentutorials.org/course/3085/18801 리팩토링은 코드를 더 용이하고 효율적인 코드로 수정하는 작업이다. (중복된 코드를 간결하게 작업하는 것도 포함)아래 코드는 this를 사용한 예제이다. WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of.. 공감수 0 댓글수 0 2018. 12. 24.
WEB2 - JavaScript - 조건문, 조건문의 활용 조건문 - https://opentutorials.org/course/3085/18800 if문 뒤에는 Boolean타입인 true, false가 온다.그리고 true, false 둘 중 어떤것이 선택되느냐에 따라 다른 코드가 실행 된다. Conditional statementsProgramIF-true IF-false 조건문의 활용 - https://opentutorials.org/course/3085/18878 if문을 사용하여 버튼을 제어하는 예제이다.WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, protot.. 공감수 0 댓글수 0 2018. 12. 24.
WEB2 - JavaScript - 조건문 예고, 비교연산자와 Boolean 데이터 타입 조건문 예고 - https://opentutorials.org/course/3085/18879비교연산자와 Boolean 데이터 타입 - https://opentutorials.org/course/3085/18798 비교연산자는 Boolean 데이터 타입을 출력한다. Comparison operators & Boolean===1===1 1===2// true, false값을 합하여 Boolean 타입이라고 한다. 1<2 1<1 공감수 0 댓글수 0 2018. 12. 21.
WEB2 - JavaScript - 프로그램, 프로그래밍, 프로그래머 프로그램, 프로그래밍, 프로그래머 - https://opentutorials.org/course/3085/18876 각 단어의 정의프로그램 - 순서프로그래밍 - 순서를 만드는 일프로그래머 - 순서를 만드는 사람 HTML은 프로그램 언어지만 프로그래밍 언어라고 하지 않는다.왜냐하면 순서와 관련된 언어가 아니기 때문이다.JavaScript언어는 사용자와 상호작용하는 언어이기 때문에 사용자가 행위를 가하는 순서에 맞춰서 작동하게 된다.그래서 프로그래밍 언어라고 한다. HTML - 프로그램 언어JavaScript - 프로그램 언어, 프로그래밍 언어 공감수 0 댓글수 0 2018. 12. 19.
WEB2 - JavaScript - 제어할 태그 선택하기 제어할 태그 선택하기 - https://opentutorials.org/course/3085/18792 버튼을 클릭 하였을 때 body태그의 style속성이 바뀌도록 하는 태그WEB HTML CSS JavaScript JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web cont.. 공감수 0 댓글수 0 2018. 12. 19.
WEB2 - JavaScript - CSS 기초 CSS 기초 - https://opentutorials.org/course/3085/18789 style속성 아래 h2태그에 디자인적으로 태그를 꾸미고 싶다면 style을 추가하여 css언어를 사용하면 된다.~~~ style 태그 div, span은 어떠한 기능도 없다. 그러므로 특정한 내용을 style로 꾸미고 싶을 때 해당 태그들로 감싸서 style속성을 줄 수 있다.하지만 div로 감싸게 되면 줄바꿈이 되므로 줄바꿈이 없는 span으로 감쌀수도 있다. ~~~ 만약 특정한 내용이 여러개가 있어서 그 내용들을 모두 바꾸고 싶다면 일일히 바꿔줄 수 없다.그럴 때는 아래와 같이 사용하면 된다.head태그에 style태그를 넣고 class가 js인 태그에 대해서 속성을 바꿔주도록 하면 된다.class를 선택.. 공감수 0 댓글수 0 2018. 12. 19.
WEB2 - JavaScript - 웹브라우저 제어 웹브라우저 제어 - https://opentutorials.org/course/3085/18872 자바스크립트를 이용하여 웹브라우저를 제어할 수 있다. 아래는 html에서 body부분의 스타일을 변경해주는 코드이다.이것은 웹브라우저의 스타일을 변경해줄 수 있지만 한번 코드를 작성하면 웹브라우저에서 다른 동작은 취하지 않기 때문에 정적이다. 자바스크립트를 이용하면 사용자가 버튼을 클릭하였을 때 body부분의 스타일을 변경하게끔, 동적으로 만들 수 있다. 진행방법은 다음 게시물로 이어진다. 공감수 0 댓글수 0 2018. 12. 18.
WEB2 - JavaScript - 변수와 대입 연산자 변수와 대입 연산자 - https://opentutorials.org/course/3085/18871 변수 - 바뀔 수 있는 값 아래에서 x,y는 변수이다.x의 값을 바꾸면 x+y의 값은 변한다.여기서 = 은 대입 연산자이다. 변수를 왜 쓰는가?: 변수를 쓰는 이유는 아주 많지만 그 중 하나는 사람의 실수를 줄이기 위해서 사용한다.많은 양의 내용 속에 어떤 값을 바꿀 때, 변수를 사용하면 많은 양의 내용에서 어떤 값을 찾을 필요가 없다.어떤 값의 변수의 내용을 변경해주기만 하면 된다. 공감수 0 댓글수 0 2018. 12. 18.
WEB2 - JavaScript - 데이터타입 - 문자열과 숫자 데이터타입 - 문자열과 숫자 - https://opentutorials.org/course/3085/18870 데이터타입은 자료형이다.자바스크립트에는 아래와 같은 데이터타입이 있다.Number, String이라는 데이터 타입을 확인해본다. BooleanNullUndefinedNumberStringSymbol Number는 산술연산자를 사용할 수 있다.아래와 같이 +, -, *, /을 사용한다. 1+1 = 22-1 = 12*2 = 42/2 = 1 연산을 콘솔창에서 확인 할 수 있다. String은 "", '' 사이에 문자를 입력한다.toUpperCase()는 문자열을 대문자로 변경해준다.indexOf()는 해당문자가 있는 위치를 숫자로 알려준다.trim()은 공백을 없애준다. 아래는 문자열을 어떻게 사용할.. 공감수 0 댓글수 0 2018. 12. 18.
WEB2 - JavaScript - HTML과 JavaScript의 만남 2 (이벤트, 콘솔) HTML과 JavaScript의 만남 2 (이벤트) - https://opentutorials.org/course/3085/18782 이벤트는 사용자와 상호작용하는데 핵심적인 역할을 한다. 이벤트는 사용자가 어떠한 행동을 취했을 때 브라우저가 그것을 캐치해서 브라우저에서 보여주는 것이다.클릭을 했을 때, 어떤 일이 일어난다.텍스트를 입력했을 때, 어떤 일이 일어난다.키보드에서 어떤 키를 눌렀을 때, 어떤 일이 일어난다.여기서 어떤 일을 자바스크립트로 제어하는 것이다 HTML과 JavaScript의 만남 3 (콘솔) - https://opentutorials.org/course/3085/18869 어떤 가벼운 코드를 실행해야 하는 경우 html파일을 만드는 것이 아닌 콘솔을 이용하여 코드를 테스트할 수 있.. 공감수 0 댓글수 0 2018. 12. 17.
WEB2 - JavaScript - HTML과 JavaScript의 만남 1 (script 태그) HTML과 JavaScript의 만남 1 (script 태그) - https://opentutorials.org/course/3085/18778 HTML에 어떻게 JavaScript언어를 넣을 수 있을까?-> 이부분은 JavaScript언어로 인식된다. 왜 JavaScript를 사용하나?-> HTML과 다르게 사칙연산을 할 수 있기 때문이다. 1+11+1 빨간부분 - JavaScript코드를 실행시키면 javascript라는 문자와 숫자2가 출력된다.->숫자에 사칙연산을 시키면 그것을 계산할 수 있는 능력이 있다. 파란부분 - HTML코드를 실행시키면 1+1라는 문자와 1+1라는 문자가 출력된다.->HTML은 아무리 사칙연산을 적어도 계산되지 않고 적은 그대로의 내용만 출력할 수 있다. 공감수 0 댓글수 0 2018. 12. 14.
자바스크립트 기본 - 참조 참조 - https://opentutorials.org/course/743/6507 복제 아래결과는 1이된다. var a = 1;var b = a;b = 2;console.log(a); // 1 위의 예제를 그림으로 표현하면 아래와 같다.b는 복제된 상태이므로 b의 값, 즉 복제본을 아무리 바꿔도 원본은 바뀌지않는다는 개념이 복제이다.복제는 원시데이터타입에서 동작한다. 참조 var a = {'id':1};var b = a;b.id = 2;console.log(a.id); // 2 위의 예제를 그림으로 표현하면 아래와 같다.a는 객체이므로 복제가 이루어지지 않고 a,b가 같은 값을 바라보는 참조가 발생한다. 함수와 참조 아래는 원시데이터타입을 인자로 넘겼을 때의 동작 모습니다. Case1var a = 1;.. 공감수 0 댓글수 0 2018. 12. 12.
자바스크립트 기본 - 데이터 타입 데이터 타입 - https://opentutorials.org/course/743/6579 원시 데이터 타입 데이터 타입이란 데이터의 형태를 의미한다. 데이터 타입은 크게 두가지로 구분할 수 있다. 객체와 객체가 아닌 것. 그럼 객체가 아닌 것은 무엇일까? 숫자문자열불리언(true/false)nullundefined 객체가 아닌 데이터 타입을 원시 데이터 타입(primitive type)이라고 한다. 그 외의 모든 데이터 타입들은 객체다. 래퍼객체 원시 데이터 형을 객체처럼 다룰 수 있도록 하기 위한 객체를 자바스크립트는 제공하고 있는데 그것이 레퍼객체(wrapper object)다. 아래는 문자열을 객체처럼 사용할 수 있는 예제이다.var str = 'coding';console.log(str.leng.. 공감수 0 댓글수 0 2018. 12. 12.
자바스크립트 기본 - Object Object - https://opentutorials.org/course/743/6578 Object 객체는 객체의 가장 기본적인 형태를 가지고 있는 객체이다. 다시 말해서 아무것도 상속받지 않는 순수한 객체다. 자바스크립트에서는 값을 저장하는 기본적인 단위로 Object를 사용한다. Object 객체가 가지고 있는 prototype은 모든 객체가 공통적으로 사용할 수 있다. Object의 확장을 통한 예제이다.Object.prototype.contain = function(neddle) { //contain은 사용자가 지정한 함수이다. for(var name in this){ //this는 메소드가 소속되어있는 객체를 의미한다. contain에서 소속되어있는 객체는 o이므로 o를가리키거나, conta.. 공감수 0 댓글수 0 2018. 12. 12.
자바스크립트 기본 - 표준 내장 객체의 확장 표준 내장 객체의 확장 - https://opentutorials.org/course/743/6475 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체이다.객체들은 아래와 같다. ObjectFunctionArrayStringBooleanNumberMathDateRegExp 내장객체에 어떠한 기능을 추가하는 방법이 있다. var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba'); //Array에 있는 값들이 랜덤하게 나올 수 있게 해야한다.function getRandomValueFromArray(haystack){ var index = Math.floor(arr.length*Math.. 공감수 0 댓글수 0 2018. 12. 7.
자바스크립트 기본 - prototype prototype - https://opentutorials.org/course/743/6573 prototype을 통해서 자바스크립트는 상속이라는 개념을 제공하고 있다. function Ultra(){}Ultra.prototype.ultraProp = true; function Super(){}Super.prototype = new Ultra(); //Ultra가 Super의 부모가된다. function Sub(){}Sub.prototype = new Super(); //Super가 Sub의 부모가 된다. var o = new Sub();console.log(o.ultraProp); // o는 Sub객체를 담고 있는 객체인데 Sub는 Ultra에게 상속받고 있기 때문에 ultraProp라는 값을 가지고.. 공감수 0 댓글수 0 2018. 12. 7.
자바스크립트 기본 - 상속 상속 - https://opentutorials.org/course/743/6572 상속(inheritance)이란 원래객체가 가지고 있는 기능을 상속받는 객체가 사용할 수 있다는 뜻이다. 자바스크립트에서 상속의 사용법을 알 수 있는 예제이다.(->이렇게 사용하면 상속이되는구나 라고 이해하는 예제)이예제는 부모객체와 자식객체의 기능이 같은 예제이다.function Person(name){ this.name = name;}Person.prototype.name=null;Person.prototype.introduce = function(){ return 'My name is '+this.name; } function Programmer(name){ //Programmer생성자를 만들었다. this.name.. 공감수 0 댓글수 0 2018. 12. 7.
자바스크립트 기본 - this this - https://opentutorials.org/course/743/6571 this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다. this는 전역객체인 window와 같은 것을 확인 할 수 있다. function func(){ if(window === this){ //웹브라우저 자바스크립트에서 전역객체의 이름이 window이다. document.write("window === this"); }}func(); //결과값은 window ===t.. 공감수 0 댓글수 0 2018. 12. 6.
자바스크립트 기본 - 전역객체 전역객체 - https://opentutorials.org/course/743/6577 전역객체(Global object)는 특수한 객체다. 모든 객체는 이 전역객체의 프로퍼티다. function func(){ alert('Hello?'); }func(); // window.func()와 같은 의미이다.window.func(); //window는 객체라는 의미이며 func은 속성이 함수이기때문에 메소드이다. window는 전역객체이다.func();와 window.func();는 모두 실행이 된다. 모든 전역변수와 함수는 사실 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주된다. 자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티임을 알 수 있다. v.. 공감수 0 댓글수 0 2018. 12. 6.
자바스크립트 기본 - 생성자와 new 생성자와 new - https://opentutorials.org/course/743/6570 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 아래는 객체, 프로퍼티, 메소드를 생성한 예제이다.var person = {} //비어있는 객체를 만든다.person.name = 'egoing'; //객체에 name프로퍼티를 만들고 'egoing'문자열을 넣는다는 뜻이다. person.introduce = function(){ //introduce프로퍼티안에 메소드가 담겨있는 것이다. return 'My name is '+this.name; //this는 메소드가 포함되어 있는 객체인 person이며 thi.. 공감수 0 댓글수 0 2018. 12. 6.
자바스크립트 기본 - 객체지향 프로그래밍 객체지향 프로그래밍 - https://opentutorials.org/course/743/6553 객체지향 프로그래밍(Object-Oriented Programming)은 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이다. 이 객체들을 마치 레고 블럭처럼 조립해서 하나의 프로그램을 만드는 것이 객체지향 프로그래밍이라고 할 수 있다. 다시 말해서 객체지향 프로그래밍은 객체를 만드는 것이다. 따라서 객체지향 프로그래밍의 시작은 객체란 무엇인가를 이해하는 것이라고 할 수 있다. 말이 어렵게 느껴지는 이유는 그것은 아직 객체 지향에 대한 체험이 없기 때문이다. 객체지향 프로그래밍을 학습하는데 장애 중의 하나는 번역이다. Ob.. 공감수 0 댓글수 0 2018. 12. 5.
자바스크립트 기본 - 함수의 호출 함수의 호출 - https://opentutorials.org/course/743/6550 아래는 기본적으로 함수를 정의하고 호출하는 방법function func(){}func(); 아래는 함수를 호출하는 특이한 방법이다.function sum(arg1, arg2){ return arg1+arg2;}alert(sum.apply(null, [1,2])) // sum은 함수이기때문에 자바스크립트가 가지고 있는 메소드를 가질 수 있다. apply는 자바스크립트의 내장메소드이다. sum.apply(null, [1,2])을 사용하면 sum(1,2)으로 함수를 호출한 것과 같은 결과이다.sum.apply(null, [1,2]) 이것은 sum(1,2) 이것과 같은 결과 이므로 간단하게 함수를 호출할때는 사용하는 것을.. 공감수 0 댓글수 0 2018. 12. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.