본문 바로가기

분류 전체보기

 (95)
WEB2 - JavaScript_7-9 웹 브라우저 제어 7. 웹 브라우저 제어 웹 페이지의 디자인은 CSS를 이용해서 바꿀 수 있다. 위처럼 작성하면 웹 페이지는 항상 검정색 배경과 하얀색 글씨를 유지한다. 웹 브라우저의 테마(배경과 글씨 색)를 '클릭했을 때'만 바꾸고 싶다면 다음 두 가지를 실행해야한다. CSS로 변경할 디자인을 작성 JavaScript로 제어하려는 태그를 선택해서 CSS를 변경 8. CSS 기초 이전에 CSS 강의를 별도로 수강했으므로 생략. 9. 제어할 태그 선택하기 웹 페이지의 테마(day & night)를 바꾸기 위한 버튼은 다음과 같이 만들 수 있다. Night 버튼만. 제어 버튼을 생성 클릭했을 때 전환을 주기 위해 onclick 값으로 JavaScript를 입력한다. 태그를 선택해서 CSS를 변경 3번의 oncl..
WEB2 - JavaScript_5-6 데이터 타입, 변수와 대입연산자 5. 데이터 타입 - 문자열과 숫자 컴퓨터 프로그래밍에서는 데이터를 효과적으로 처리하기 위해 자료형(Data type)을 분류한다. JavaScript에도 data type이 존재한다. Primitive data type: Boolean, Null, Undefined, Number, String, Symbol Objects 이 중 가장 자주 쓰이는 Number과 String을 비교 Number 숫자를 그대로 입력. 연산이 가능하다. Console에 1+1을 입력하면 결과 값으로 2를 반환. document.write(1+1) + 외에도 다른 산술 연산자를 사용해서 계산을 할 수 있다. 1 + 1 → 2 2 - 1 → 1 2 * 4 → 8 6 / 2 → 3 String 따옴표(', ") 안에 "입력..
WEB2 - JavaScript_2-4 HTML과 JavaScript의 만남 2. Script 태그 JavaScript는 HTML을 기반으로 동작한다. JavaScript를 전혀 다른 언어인 HTML과 어떻게 같이 사용할 수 있을까. : JavaScript vs HTML 텍스트는 HTML에 직접 입력해도 사용할 수 있지만 JavaScript가 HTML에 비해 동적으로 수행할 수 있는 여지가 더 많다. 1+1 3. 이벤트 (Event) JavaScript가 사용자와 상호작용하기 위한 핵심기능. onclick의 속성값을 기억하고 있다가 '클릭했을 때' 코드를 실행 위의 '클릭'처럼 웹 브라우저에서 일어나는 일중 대표적인 것을 추려 EVENT라고 한다. Example: onclick - 클릭할 때, onchange - 내용 변화가 있을 때, onkeydow..
WEB2 - JavaScript_1 수업의 목적 1. 수업의 목적 JavaScript를 이용하면 사용자의 행위에 반응하도록 만들 수 있다. (상호작용) 웹 페이지는 브라우저에 한 번 출력되면 바뀔 수 없지만 (e.g. 태그는 계속 태그를 유지) JavaScript를 이용하면 디자인에 변화를 줄 수 있다. Example 사용자가 버튼을 클릭했을 때 웹 페이지의 배경과 글씨 색을 바꿀 수 있다. night button: 배경 검정색, 글씨 흰색 day button: 배경 흰색, 글씨 검정색 input type = "button" value = "night": 글씨가 night이 써진 버튼 생성 onclick: 클릭했을 때 속성값을 실행, 속성값으로 JavaScript를 갖는다. document.querySelector('body'): 웹 페..
[생활코딩] WEB2 - JavaScript 강의소개 생활코딩 에서 제공하는 JavaScript 강의. JavaScript 학습을 시작하기 위해 선택했다. 강의주소: https://opentutorials.org/course/3085 수강기간: 2020.04.29 - 2020.05.07 수강 소감 강의 자체는 입문용으로 매우 좋았다고 생각한다. JavaScript가 어떤 느낌인지를 확실히 할 수 있었던 강의였다. 다만 아쉬웠던 점은 강의에서 전반적인 프로그래밍 언어에 대한 내용이 차지하는 부분이 꽤 됐는데 이미 다른 언어로 대략적인 개념을 배운 뒤 듣다보니 지극히 개인적으로 효율이 떨어졌던게 좀 아쉬웠다. 메인 강의에서는 객체 빼고는 크게 새로 배운게 없는 느낌. 다음 강의를 들어봐야 확실히 알겠지만 다른 프로그래밍 언어를 배웠다면 바로 생활코딩의..
생활코딩 CSS_13 라이브러리(Library) 13. 라이브러리 (Library) Fontello 특정 문자에 해당하는 이미지로 이루어진 폰트를 제공하는 사이트. 원하는 아이콘을 선택한 뒤 (여러개 선택 가능) Download webfont를 누르면 다운로드 선택 내역은 config.json 파일에 저장되고 선택 내역이 초기화 됐을 때 설정을 눌러 이 파일을 업로드하면 목록을 다시 불러올 수 있다. svg 파일을 받아서 사이트에 drag & drop 하면 나만의 아이콘 폰트를 만들 수 있다. demo.html을 열어 다운받은 아이콘 리스트를 확인 show codes를 누르면 각 이미지의 문자 값 (i.e. unicode)를 보여준다. 이 값을 복사해서 부분에 붙여 넣어 사용 할 수 있다. 아이콘을 사용하려는 html파일에 fontello.css를 링..
선형대수(HYU)_09 선형변환과 행렬 2.6 Linear Transformations Ax = b를 보는 여러가지 관점 System equation. x는 solution. b는 A의 column vectors의 linear combination. x는 linear combination의 coefficient. x가 A system에 의해 b로 변환(transform)됨 $\leftarrow$ New! 임의의 m x n matrix A가 있을 때 $Ax = b$는 A를 통해 n차원의 vector x를 m차원의 vector b로 transform 시키는 것으로 볼 수 있다. 이 때 $A(a_1x_1+a_2x_2)=a_1Ax_1+a_2Ax_2$를 만족하므로 linear transform이다. Examples $A=\begin{bmatrix} c..
CS50's Week 7_SQL 7. SQL Spreadsheets Database는 데이터(data)를 저장할 수 있는 application으로 Google Sheets 등이 이에 해당한다. 예를들어 학생들에게 좋아하는 TV show와 장르를 물어보는 Google Form을 만들어 응답을 수집한 뒤 확인하면 spreadsheets는 다음과 같은 세 개 열의 데이터를 갖는다: "Tilestamp", "title", "genres" 이를 CSV 파일로 다운받아 python으로 데이터를 분석하는 프로그램을 작성할 수 있다. 1. 파일을 열어 각 행의 TV Show 제목을 출력 # csv library를 import import csv # filename.csv를 read 모드로 열어 file에 저장 with open("filename.cs..

티스토리툴바