2023.02.03 7일차 JavaScript

JavaScript

javascript로도 서버프로그래밍을 할수잇다. node등 만약 이 과정에 javascript엿으면 이거만 두세달햇을듯.
그런데 그정돈 아니고 화면에 쓸정도 자세하게 배우진 않음. 하지만 이거도 양이 많고 어려움.
어렵고 빠르게 지나감.
프로그래밍 언어임. 또 w3schools여기서 배울것임. https://ko.javascript.info/ 더 자세히 배우고싶다면 여기 커리큘럼따라가보자.
그냥 쓰기에는 코드가 지저분함. jquery로 간결하게 작성할 수 있음.
react가 점점 늘어나고잇음. jsp는 점점 줄어드는중

JavaScript is the world's most popular programming language. 처음에는 브라우저에서만 작동햇는데 이제 서버에서도 작성한다.
javascript나올때 java가 인기가 많아서 이름을 따옴. 그렇지만 그냥 전혀다른언어임

문서구조를 변경할때 사용하는 것이 javascript이다.
attribute 에 작성할수도있고 script element안쪽에 작성된다.

1. javascript

자바스크립트안에서는 대소문자 구분을 잘해야한다.

<button onclick="document.getElementById('demo').innerHTML = Date()">클릭!!</button>
<p id="demo"></p>

2. javascript-2

속성에 너무 많이 적으면 지저분해져서 보통은 script element안에 작성한다.

<button id="btn1">클릭!!</button>
<p id="demo"></p>

---

<script>
    document.getElementById("btn1").addEventListener("click", function(){
        document.getElementById('demo').innerHTML = Date()
    }); 
</script>

3. javascript 주석

/* css 주석 */
<!-- html 주석 -->
// 자바스크립트 한 줄 주석
// 단축키 : ctrl + /
/*
여러줄 주석
여러줄 주석
*/
역시나 주석은 코드보기하면 보이니 중요한 정보를 작성하지 말자.

4. JavaScript log

console.log("출력할 내용"); 개발자도구 -> console에서 보기

몇번째 줄에 의해서 코드가 출력되었는지도 알려준다. 04log.html:15
log만치고 툴팁창에서 ㅁlog를 작성하면 다 작성해준다.

5. statement (명령문, 실행문)

자바스크립트 프로그램은 명령문들로 구성되어 있다.
하나의 의미있는 실행 코드를 의미한다.
1.변수, 값, 연산자, 식, 키워드 등으로 구성되어 있다.
2.대부분 ;으로 끝난다. ;은 생략 가능하지만 끝나는걸 보여주기 위해 작성하는게 좋음. 결국엔 일관성있게 작성하는게 중요하다.
3.작성된 순서대로 실행된다. (제어문 배우기 전)

console.log("어떤 정보 출력!"); 을 보면 콘솔에 출력해달라는 하나의 의미있는 명령문임.
console.log("첫번째 실행문");
console.log("두번째 실행문");
console.log("세미콜론 생략 가능")
console.log("하지만 수업 중에는 세미콜론 꼭 씀");

하나의 명령문은 여러줄로 작성될 수 있다. 보통 연산자 앞에서 엔터 입력
document.getElementById("demo").innerHTML
= "Hello JavaScript";

6. variable

변수(variable) : 값을 저장한 식별자(id)
var(키워드) a(식별자)
var a; //a라는 이름의 변수 선언
var b; //b라는 이름의 변수 선언

= 대입(할당) 연산자(assignment)
오른쪽에 있는 값을 왼쪽에 대입(할당, assign)
a=3;
console.log(a);
a=4;
console.log(a);
a=5;
console.log(a);

b=11;
console.log(b);
b=3.14;
console.log(b);
b="hello";
console.log(b);

7. variable - 2

최근에는 var 대신 let을 사용한다.
let: 변수 선언시 사용하는 키워드
let a;
let b;

a= 99;
aa = 900;

b = 7;
b = 77;

변수 선언과 값 할당을 하나의 명령문으로 작성가능하다.
let c = 88;
let d = 99;

8. constant(상수)

const타입을 가지며 상수이다. 값을 바꿀 수 없다.
//변수
let a = 3;
a = 4;

상수(constant)
값이 변하지 않는 식별자 자바의 static final 하는 것 과 같은듯.
const b = 5;
b = 6; //오류
오류가 난다음부턴 실행문들이 실행되지 않으니 주의하자!!
그럼 let을 써야하나 const를 써야하나? 일단 const를쓰고 값이 변할 가능성이 있으면 let를 쓰자.

9. 변수 선언 시 주의할 점

var a = 3; //예전 방식
let b = 4; //변수
const c = 10; //상수
d = 11; //선언 없이 사용가능하지만 금지!!!

console.log(a);
console.log(b);
console.log(c);
console.log(d);
혼자 공부햇을때는 window객체에 전역변수로 선언하는 거라고 배움.
구분해서 사용하도록 하자

10. 변수명 작성 규칙

영문대소문자, 숫자, _, $의 조합으로만 사용가능
const $ = 3;
let _ = 9;
_ = 11;
let hello = "hi";
let hello_ = "greeting";
let HELLO = "hola";
다 다른 값이다.

그러나 관습이라는게 존재한다.
변수명 작성 관습
lowerCamleCase : 소문자로 시작하고 여러 단어 조합될 경우 두번째 이후 단어의 앞글자만 대문자로 작성한다.
let car_name = "kia";
->관습에 어긋남 안되는 거는 아님!!
let carName = "hyundai"; ->관습에 따른것

css에서 - 쓴거는 케밥case라고함 -> 꼬챙이로꿰어진느낌

11. 타입

js의 자료형은 총 8개가 있다.
boolean, null,undefined, number, bigint, string, symbol, object이 있다.

let a = 3; //number
let b = "hello"; // string
let c = true; // boolean
let d = {}; //object
let e; // undefined

1.number 말그대로 숫자
let f = 5;
let g = 3.14;
2.string (문자열)
let h = "javasript";
let i = 'html';
3.boolean(논리형)
let j = true;
let k = false;
3.object 객체
let l = {};
let m = {name: "john", age: 22};
4.undefined null값
let o;
let p = undefined;

12. number(숫자)

let a = 3;
console.log(a); //3
a=5;
console.log(a); //5
a = 0.111;
console.log(a); //0.111

표현가능한 범위 -(2^53 - 1) ~ (2^53-1) 까지 표현이 가능하다.
a = 9007199254740991;//최대 표현가능
더큰수쓰려면 bigint 사용하면된다.

특이한 숫자들
0으로 나누면 무한대가 나온다 음수를 나누면 -무한대
//Infinity
let e = 1/0;
console.log(e);
//-Infinity
let f = -1 / 0;
console.log(f);

NaN (Not A Number) 숫자가아님 오류인 것은 아니니까 의도한거라면 그대로 써라.
let h = 15 % 0;
console.log(h);

13. stirng(문자열)

let a = "hello"; -> 따옴표로 문자열 표현
let b = 'hello'; -> 작은 따옴표 가능
let c = "I'm ironman"; -> 큰따옴표 내에 작은 따옴표 작성 가능
let d = 'I am "ironman"'; -> 작은따옴표 내에 큰따옴표 사용가능
큰따옴표안에 큰따옴표가 있으면 문장이 나뉜다고 인식함.
사용하려면 역슬래쉬 적어주기.
let e = "I am "ironman"";
let g = "Ia am \tironman"; -> \t 한탭
let h = "I am \nironman"; -? \n 새로운 줄
역슬래쉬 자체를 표현하고 싶을때 \두번써준다.
let j = "abc\nef";

14. string - 특수기호 template literal

template literal 물결표랑 있는거 `(back tick)
let a = "hello";
let b = 'hello';
let c = hello;
셋다 표현 가능하다.
back tick 의 장점은
1."와 '을 바로 사용 가능하다는 것이다.
let d = `hello "my" 'world' `;
2.새로운 줄을 escape character \ 역슬래쉬 없이 사용할수있다.
let g = "hello\nworld";
let h = `hello
wolrd`;
3.문자열 내에서 변수(variable)나 식(expreesion) 사용 가능
let i = "john";
let j = `hello ${i}`;
console.log(j); //hello john
4.${}사이에 식도 넣을 수있다.
let k = 99;
let l = 88;
let m = `${k}와 ${l}을 더한 값은 ${k+l}`;
console.log(l); // 99와 88을 더한 값은 187

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
더 많은 내용은 검색해보자.

15. boolean(불린, 부울 , 부리언, 논리형)

boolean 은 2개의 값만 가질 수 있다. (true , false)
let c = true;
c = false;
굉장히 중요한 타입이다. 참 거짓 있다 없다. 어떤코드를 실행할지 말지 결정한다.
연산자와 제어문을 사용할때 사용함.

16. undefined

undefined : 값이 없음을 표현한다.

let a;
console.log(a); // undefined

값이 있다가 없어질 수도 있다.
let b = 3;
b = undefined;
console.log(b);// undefined

null : 객체가 없는 것을 표현한다. undefined와는 다르다.
let c = null;
console.log(c); // null

17. object

object : 여러 값(속성 property)를 갖는 data type
변수는 각각 하나의 값만 가짐.
let name = "john"; //하나의 값
let age = 30; //하나의 값

한번에 여러가지 값을 저장하고 싶을 때 사용한다.
a객체는 name 속성과 age속성을 갖는다.
let a = {name:"jane", age:40}; //여러값

console.log(name); //john
console.log(age); //30
a의 name을 출력해달라 / a의 age를 출력해달라라고 지정해줘야함
console.log(a.name); //jane
console.log(a.age); //40

값을 변경하려면?
name = "donald";
console.log(name); //donald

a.name = "trump";
console.log(a.name); //trump

새로운 속성(property)을 추가하고 싶다.
a.address = "seoul";
console.log(a.address); //seoul

없는 걸 출력하면
console.log(a.birth); //undefinded

2023.02.03 후기

어제 사용할때는 직접짜는게 편할거라 생각했는데 grid를 보니 매우매우매우 편하다. 비율도 알아서 조절이 가능하다.
css의 grid와는 다른 것임을 잘 알아두자.
디자인을 심각하게 고려하지 않는 정도라면? 간단한 사이트를 만들어낼 수잇으것 같다.

javascript가 등장하고 배우기 시작햇다.

https://cheershennah.tistory.com/231
var let const의 차이점을 알아보자
var 중복선언 가능 재할당도 가능 -> 유연하나 코드 길어지면 헷갈려서 오류발생가능성있음.
let 중복선언 불가. 재할당 가능.
const 상수 중복선언 불가. 재할당 불가능
차이를 구분해서 사용하자. var은 왠만하면 사용하지 않도록 하자.