생활코딩 WEB2 - JavaScript 회고

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

🌱 → 🌳

생활코딩 WEB2 - JavaScript 회고 본문

Client/Javascript

생활코딩 WEB2 - JavaScript 회고

BAY 2022. 4. 8. 14:42

728x90

생활코딩 web1 - html과 , web2 - CSS를 모두 듣고 드디어 JavsScript 수강을 마쳤다.

원래는 바로 React 강의를 들어보려 했으나, 복습 겸 노마드코더의 바닐라JS를 듣기로 했다.

JavaScript 복습 및 내용 정리

내용 정리

JavaScript

자바스크립트는 동적이고, html은 정적이다.

1. HTML과 JavaScript의 만남 1 (script 태그)

<h1>JavaScript</h1>
<script> 
  document.write(1+1);
</script>
<h1>html</h1>
1+1

2. HTML과 JavaScript의 만남 2 (이벤트)

<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">

alert 경고창

5. 변수와 대입 연산자

- 변수 : variable 변할 수 있는 값. ex) x,y

- 대입연산자: 우변에 있는 것을 좌변에 대입 연산 할수 있게 해주는 것 ex. =

- 상수 : constant 변하지 않는 값. ex) 1, 100, 5

- 문자열 : string 우리가 쓰는 여러가지 문자들.

cf) 실행을 유보하고 싶을 땐 shift+enter를 눌러서 그냥 띄어서 써줄 수 있음.

* console을 이용해서 여러가지 실습을 해보았음.

-> alert는 알람을 주는 이벤트.

-> 하단 코드의 의미 : alert 이하의 스트링 중 "+name+"이라고 표시된 부분은 하마로 수정되어 알람이 나오게 된다.

name = '하마;

alert("fdsklflsdfjklasjfla sflkjfiosjdflkjsd "+name+" aklfwiorfhewlfhkldsjkldskf m fkdflkdjsfklsdhfioeyfiolkdnvl,dsnklvjfkldssssssssnklFNKLDSNVDNVKLSDHFODSFKLSD KFJLKSDJFIEUWRIWFNKLWE SKLDFJIOWEUROWEFKLHFIODS SKDFHIOEWHFKL "+name+" DSNFIODHSIO")

7. CSS 기초

1) <div> : 무색 무취의 태그. 의미와 기능이 없음. css or javascript를 통해 어떤 정보를 제어하고 싶을 때 사용하는 태그.

<span>: div와 같은 특징.

두 태그의 차이는 div는 화면 전체를 쓰는 태그(줄바꿈), span은 화면 부분을 쓰는 태그(줄바꿈 ).

ex. 여기서는 div를 쓰면 패러그랩에 들어있는 자바스크립트가 한 화면 전체를 먹게 되므로 span 태그를 사용.

<span style="font-weight:bold;">자바스크립트</span>

-> 요렇게 쓰면 자바스크립트만 bold처리가 됨.

2) 하나만 바꾸는 것이 아니고 다 바꾸고 싶다?

ctrl+F를 이용해 나머지 '자바스크립트'에 해당하는 부분도 찾아서

replace하고 싶은 부분의 코드를 복사 붙여넣기로 대체해준다.

3) style은 script태그처럼 웹브라우저에게 커서가 깜빡거리고 있는 스타일로 감싸져 있는 텍스트가 css라고 웹브라우저에게 알려주는 구분자.

4) 실습2

  <head>
    <style>
      .js{
        font-weight: bold;
        color:Red;
      }
    </style>
  </head>
  <body>
<span class="js">자바스크립트</span>
  </body>

span의 선택지를 js로 지정해주고, style 태그를 통해 js 클래스 전부를 볼트 처리 및 레드색상 처리.

정리

1) style이라는 속성 ex. <span style="js">

2) style이라는 태그 ex. <style>

3) .js 선택지를 통해 여러개의 태그를 선택하는 것을 살펴봄

.js{

font-weight: bold;

color:red;

}

#first{

color:green;

}

span{

color:blue;

}

12. 조건문

우선순위: span<class<id

13.프로그램,프로그래밍,프로그래머

순서 - programming

html, css는 programming이 아님

JavaScript는 progrmming이 맞음

15. 비교 연산자와 블리언

[1. 핵심]

1) 비교연산자 === (comparison operator)

cf)==만 써도 되나 ===을 쓰는 것은 더 강력한 비교를 위함.

2) 블리언 (boolean) : 비교연산자를 통해 만들어지는 새로운 데이터 타입.

타입으로는 true와 false만 존재.

3) 조건문 ; 비교연산자와 블리언, 조건문은 서로 관련성이 깊음.

[2. 코드]

 <script>
  document.write(1===1)
 </script>

-> true 출력

-> document.write(1===1)은 웹페이지 안에 (1===1)이라는 정보는 출력하는 것.

출력하면 true라는 값이 뜬다.

1===1란? 연산자의 좌우항이 같은가를 묻는 연산자로,

비교연산자이면서 이항연산자이다.

좌우항을 비교해 데이터를 만든다. 관계에 따라 true 혹은 false 중 하나의 값이 나온다. 2가지 값을 묶어 boolean이라는 데이터 타입이라 부른다.

 <script>
  document.write(1===2)
 </script>

-> false 출력

<h3>1&lt;2</h3>
<script>
  document.write(1<2);
</script>

-> true출력됨.

부등호 (>, <)를 사용하게 되면 html의 코드로 인식하기 때문에

&lt 혹은 &gt로 표현한다.

cf) lt는 less than의 준말. 1<2는 1은 2보다 작다.라는 뜻.

gt는 greater than의 준말.

<h3>1&gt;1</h3>
<script>
 document.write(1>1);
</script>

-> false 출력됨.

1>1은 거짓. 1은 1보다 크다 (x)

&mt가 아닌 &gt에 유의.

cf. <script> 코드를 사용하는 이유: html 문서에 자바스크립트 코드를 적용 및 삽입하기 위함이다.

(내부 혹은 외부 자바스크립트 코드로 적용할 수 있다. script 코드는 내부 자바스크립트 코드로 적용하는 방법이다.) http://www.tcpschool.com/javascript/js_intro_apply

cf. 우리가 여태 살펴본 데이터 타입

1) number 숫자들. 무한히 많음.

2) string 문자열. 무한.

3) boolean 블리언. ; 단 2개의 데이터로 이뤄진 데이터 타입.

이 블리언을 통해 인류는 단순 반복에서 해방될 수 있었음.

18. 리팩토링 중복의 제거

리팩토링 : 코드의 비효율적인 부분을 효율적으로 만드는 것

프로그래밍 잘 하는 법 - 중복을 없애라!

- this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)

(1)

<input type="button" value="night" onclick="

-> input 태그 안에 id값을 지정해준 것을 삭제한다. 굳이 안 써도 대체 가능.

(2)

if(this.value === 'night'){

-> 현재 value값이 night이므로 this로 값을 써주기만 하면 됨.

if 안에 있는 코드가 사실상 자기 자신이므로 this를 쓴 것.

(3)

        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        this.value = 'day';
      } else{
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        this.value = 'night';
      }
    ">

-> value값 써주는 곳은 다 this로 표현.

이렇게 하면 input을 여러번 써도 id를 바꿔 줄 필요가 없는 편리함이 있음

- var (변수 선언하여 중복제거)

document.querySelector('body')가 계속 중복으로 나오므로

var target = document.querySelector('body')으로 target 변수를 지정해서

더 짧은 코드로 완성 가능. 이 target변수는 input태그 안에서만 유효한 변수.

cf) ctrl+D를 누르면 같은 문자열을 중복 선택해준다. (하나씩 추가되는 형태)

Ctrl+Shift+L을 누르면 커서가 위치된 문자열을 전부 선택

20.배열

array 순서에 따라 정리정돈

<script>
	document.write(array[0]);
</script>

- add

array.push('');

-count

document.write(array.length);

document.querySelectoy('a')

: 'a' tag에 해당되는 첫 번째 하나만 가져오는 CSSelector

document.querySelectoyAll('a')

: 'a' tag에 해당되는 모든 것 가져오는 CSSelector

25.함수

반복문을 사용할 수 없는 경우

(ex. 1,2,3,2,2,4,2,,이런식으로 순서가 정할 수 없을 때) 함수를 사용하면 편리함

26.함수 : 매개변수와 인자

<script>
    function sum(left,right){
        document.write(left+right+'<br>');
    }
    sum(2,3); //5
    sum(3.4); //7
</script>

위 실습 파일에서 left, right가 매개변수(parameter), 2,3,4가 인자(argument)

27.함수 (리턴)

<script>
    function sum2(left, right){
        return left+right;
    }
</script>

함수의 계산된 값을 반환하여 여러 곳에서 쓰일 수 있게 도와줌

28.함수의 활용

함수는 리팩토리하기에 적합

29.객체 예고

함수 위 트랙에 존재

set 설정하다

노트북 안에 수많은 파일을 폴더에 넣어 분류하고, 정리하듯이

수많은 함수 = 수많은 파일

객체 = 폴더

객체 안에 있는 함수는 method 라고 부름

~~이제까지 사용하고 있던 document.querySelector()에서 document는 객체, querySelector는 method였다...~~

~~왁!!!!!!!!진짜 완전 소름 완전 재밌다 미쳤다 생활코딩 최고!!!!!!~~

30.객체 쓰기와 읽기

array: 순서를 가지고 정보 저장

객체: 이름이 있지만, 순서 없는 정보 저장

<script>
    var coworkers={
        "programmer":"egoing",
        "designer":"leezche"
    };
    document.write("programmer:"+ coworkers.programmer +"<br>");
    document.write("designer:"+ coworkers.designer +"<br>");
    coworkers.bookeeper = "duru";
    document.write("bookeeper:"+ coworkers.bookeeper +"<br>");
    //객체 이름에 띄어쓰기가 있는 경우, [“이름”]으로 설정해 줄 수 있다.
    coworkers["data scientist"]= "taeho" 
    document.write("data scientist:"+ coworkers["data scientist"] +"<br>");
</script>

31.객체와 반복문

key : programmer, designer, bookkeeper, data scientist,,

for(var key in coworkers){
            document.write(key +' : '+coworkers[key]+'<br>');
        }

32.객체프로퍼티와 메소드

- 함수 정의 방법 3가지

coworkers.showAll = function(){

        }

var showAll = function(){

        }

function showAll(){
            
        }

property: 객체에 소속된 변수 ex) programmer, designer, bookkeeper, data scientist,,

method: 객체에 소속된 변수로 만든 함수 ex) showAll

34.파일로 쪼개서 정리 정돈하기

정리정돈 도구 크기: 함수< 객체< 파일

배포 및 유지보수가 매우 편리해짐

javascript에서 파일 불러오는거(외부 함수) : script

css에서 파일 불러오는거(외부 함수) : link

cash에 저장하여 서버에도 굉장히 효율적임

35.라이브러리와 프레임워크

라이브러리 : 자재, 가구 등 집에 필요한 재료

프레임워크 : 이미 집의 수도나 뼈대같은 기본적인 구조들이 있어서, 입맛대로 꾸미기만 하면 되는 것

jQuery: JS 대표 라이브러리

WEB2 JavaScript - 36.UI vs API

UI: User Interface

API: Application Programming Interface

인터페이스 : 두 시스템간의 상호작용 형식

UI : 유저 인터페이스, 사용자와 컴퓨터와의 상호작용 형식

ex) 웹사이트로 보이는 click 버튼

API : 응용프로그램 인터페이스, 응용프로그램과 컴퓨터, 운영체제와의 상호작용 형식

ex) 프로그래머가 웹 사이트에 경고창을 띄우기 위해서 사용되는 alert 함수

37.수업을 마치며

최소한의 도구로 프로젝트 진행하려고 노력해보기

- 검색 단어 추천

document : 웹 페이지에 tag 삭제하고 싶거나, 자식 tag를 추가하고 싶을 때

+ DOM(Document Object Model)

window: 웹 페이지가 아닌 웹 브라우저 자체

ajax: 웹 페이지 리로드하지 않고, 정보 변경

cookie: 웹 페이지가 리로드되어도 현재 상태 유지하고 싶을 때

offline web application: 오프라인 상태에서 웹 만들고 싶을 때

webRTC: 화상 통신 웹앱

speech: 사용자 음성 인식, 음성으로 정보 전달

webGL: 3차원 그래픽 등으로 게임을 만들고 싶으면

webVR: 가상현실

728x90

'Client > Javascript' 카테고리의 다른 글

[JavaScript] JS 기초 마무리 (0)	2022.07.15
[JavaScript] JS 기초 (0)	2022.07.13
[JavaScript] 노마드코더 바닐라JS 챌린지 3일차 (0)	2022.05.11
[JavaScript] 노마드코더 - 바닐라JS 2일차 (0)	2022.04.12
[JavaScript] 노마드코더 - 바닐라JS 챌린지 1일차 (0)	2022.04.11

'Client/Javascript' Related Articles

🌱 → 🌳

🌱 → 🌳

생활코딩 WEB2 - JavaScript 회고 본문

생활코딩 WEB2 - JavaScript 회고

JavaScript 복습 및 내용 정리

목차

내용 정리

'Client > Javascript' 카테고리의 다른 글

티스토리툴바