# 자잘한 강의 내용 기록
#1.1 Super Powers of JS
JavaScript 는 브라우저에서 대체 불가능한 언어이다.
단순히 홈페이지를 구현하는것이 아닌 많은 인테렉티브 디자인 또한 구현 가능하다.
#1.2 ES5, ES6 ES..WTF?
JavaScript는 언어, ECMAScript 는 Specification 이다.
ES5 = ECMAScript5
ES6 = ECMAScript6
: 버전이랑 어떤걸 배워야 할지 걱정하지 않아도 된다. 그냥 강의의 자바 스크립트를 배워랏
자바스크립트는 매우 기능 집중화 되어있어 누군가 업데이트를 하면 모든 브라우저에서 작동을 하게 된다.
JS 는 Specification 인데 체계 메뉴얼과 같다. (ex :메뉴얼 이렇게 하면 이렇게 해야합니다~, 오류 나면 이 경고를 띄어야 합니다~)
바닐라 자바스크립트는 JavaScript의 한 종류로 Library 없는 것을 이야기 한다.
(화장이나 도움이 없는 날것의 JavaScript)
#1.3 VanillaJS
<바닐라 자바스크립트를 왜 배워야 하는가에 대한 설명>
왜 바닐라 자바 스크립트를 배우는가? 기초 공부를 위해
(이걸 배우면 나중에 화장이랑 도움이 추가된 JS를 할 수 있을거야. 여기서 화장은 라이브러리랑 frameWork)
바닐라 스크립트를 배우고 다음 자바스크립트로 넘어가는게 좋을것
Why? JavaScript 에 진짜 JavaScript에 재능이 있는 사람을 찾을수가 없어. 반면 리액트나 Jquery를 아는 사람들은 찾기 쉽다. Libray 나 FrameWork 에 대한 전만가들 또한.
라이브러리나 프라임워크만 아는것을 만약 포토샵을 예시로 알려주면 포토샵을 잘 다루는건 동등하지만 사진은 잘 못찍는것 , 기구는 잘 하지만 사진을 잘 못찍고 색의 구성, 색상에 대한 이해도는 없는것과 같아.
Vanilla JS is a fast, lighweight, cross-platform framwork for buiddin incredible, powerful JavaScript applicions. Facebook, Google, YouTube, Yahoo, Wikipedia, Widow Live, Twitter, Amazon, eBay, Microsoft, Tumblr, Appl, Pinterest, PayPal ... Netflix..
Ready to try vanilla Js?
Vanilla JS
Vanilla JS Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is smal
vanilla-js.com
다른 언어에 비해 자바스크립트는 굉장히 빠르다. 120만개가 넘는 Operation 을 1초에 가능.
자바스크립트를 하면 다른 언어 리액트나 업무를 하면서 마주하는 거의 모든 Library 를 이해 할 수 있게 될것이다.
모든 웹의 베이스가 되는 언어이기 때문에.
이언어는 예쁘지 않고 답답한 부분이 굉장히 많을것
#1.4 Hello Word with Javascript
노마드씨는 Reple 사용하는편
1. css. 파일 추가하기
index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
</head>
<link rel="stylesheet" href="index.css"/>
<body>
<h1>
This works!
</h1>
</body>
</html>
Index.css
body {
background-color: peru;
}
h1 {
color: white;
}
output
2. javaScript 추가하기
jscipt 태그는 body 의 맨 아래에 넣어야 한다.
<script src="index.js"/> // 이렇게 닫으면 안됨
<script src="index.js"></scipt> // 이렇게 해야함
index.html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
</head>
<link rel="stylesheet" href="index.css"/>
<body>
<h1>
This works!
</h1>
<script src="index.js"></script >
</body>
</html>
index.js
console.log('Im Working. Im Js, Im beautiful, Im worth it')
output
HTML CSS에 JavaScript 파일을 추가하는건 매우 쉽고 심플하다.
심플한 이유, 모든 웹브라우저에 JavaScript 가 설치되어있기 떄문에.
보통 소프트 웨어 제품을 만들때 Haskell 이라는 언어를 사용했다고 가정하면 소프트웨어가 만들어 졌고 내가 오픈을 해야할때 언어마다 다르지만내 Haskell 을 설치해야 한다. 그리고 이런점이 가장 귀찮을텐데 JavaScipt 경우에는 아무도 다운로드를 할 필요 없다. 이미 브라우저에 구성되어 있다.
#1.5 What are we learning
"내가 JavaScript 를 배우면 Python도 배울 수 있게 될까?.. Ruby 는? 얼마나 달라?"
"너가 배우는건 단순한 JS 언어가 아닌 모든 언어에 일맥 상통하는 컨셉"
"컨셉은 대충 비슷, Function, Variable, if, event, Class, Objects, Arrays 등등"
so, do not worry!
# JavaScript
console.log('I am working')
# python
print('eheheh')
#1.6 Your first JS Variable(변수!)
Variable is something that change or that can be changed.
program language 는 모두 따라야하는 규칙이 있는데 JavaScript 의 경우에는 너가 문제를 만드는 것을 허용해.
JavaScript는 자식을 훈육하지 않은 아빠와 같아.
몇가지 주의
모든 introductions 은 다른 라인에 있다.
모든 expressionS 한줄에 있어야 한다. expression 이 끝나는 곳엔 ';'
이유, 두 종류의 변수가 있기 떄문에
<변수 사용절차>
Create
Initialize
Use
때로는 create 와 iniailize 를 함께 한다.
let a = 221;
'히히 짱잼'
#1.8 Data Type on JS
주석 처리
// Single Line
/* multiple Line
*/
/* String
const what = "Nicolas";
*/
/*Bloolean
const what = true;
*/
/*
const what = 666;
*/
// Float
const what = 55.1;
변수를 선언할때는 기본으로 const 사용 너가 필요할때까지 let 사용 하지 않도록
String is
techterms.com/definition/string
String Definition
String A string is a data type used in programming, such as an integer and floating point unit, but is used to represent text rather than numbers. It is comprised of a set of characters that can also contain spaces and numbers. For example, the word "hambu
techterms.com
boolean 은 이진법 0 or 1(true) , 소문자 , "" 사용 하지 않는다.
#1.9 Organizing Data With Arrays
camel case is
const monday = "Mon";
const tue = "Tue";
const wed = "Wed";
const thu = "Thu";
const fri = "Fri";
console.log(monday, tue, wed, thu, fri);
/*
텍스트, true/false, numers, floats 만 넣을수 있다.
*/
const daysOfWeek = ["Mon", "Tus", "Wed", "Thu", "Fri"];
console.log(daysOfWeek);
console.log(daysOfWeek[2]);
/* undefinded
console.log(daysOfWeek[43]);
*/
/* 서로 다른 타입끼리 저장 가능
*/
const something = "Something!"
const daysOfWeek2 = ["Mon", true ,"Tus", 2 ,"Wed", "Thu", 1.1 , "Fri", something];
console.log(daysOfWeek2);
console.log(daysOfWeek2[8]);#1.10 Organizing Data with Objects
Object 와 Array 가 다른것은 Obejct 에는 각 Value에 이름을 줄수 있다.
Array 는 브라켓 []
Object 는 컬리 브라켓 {}
const nicoInfo = {
name : "Nico" ,
age : 33,
gender : "Male",
isHandsome : true,
favMovies : ["Along the gods", "LOTR", "Old boy"] ,
favFood :
[
{
name : "kimchi",
fatty : false
},
{
name : "Cheese burger",
patty : true
}
]
}
console.log(nicoInfo.gender);
nicoInfo.gender = "Female";
console.log(nicoInfo);
console.log(nicoInfo.favFood[0].name);
'Java Script, HTML, CSS' 카테고리의 다른 글
| [Vue] 실행 모드(운영/개발)와 환경 변수 분리하기 (0) | 2022.04.21 |
|---|---|
| [클론코딩 요약/노마드코더] 바닐라 JS로 크롬 앱 만들기 - #2 PRACTICE (0) | 2021.02.09 |
| 자바스크립트 데이터 타입 정리 (0) | 2021.01.10 |
| CSS, HTML - gradient 색상 코드 사이트 (유용한 사이트) (0) | 2020.07.21 |
| FontAwesome 이용하여 HTML Icon 추가하기 (0) | 2019.11.03 |
