• Home
  • About
    • on Weekend photo

      on Weekend

      𝙎𝙩𝙪𝙙𝙮𝙞𝙣𝙜

    • Learn More
    • Instagram
    • Github
  • Archive
    • All Posts
    • All Tags
    • All Categories
  • Categories
    • Problem Solving
    • TIL
    • Study
    • Etc
    • 필사
  • Projects

12.22 웹개발 강의 정리

22 Dec 2020

자바스크립트

자바스크립트는 타입이 중요하다. 객체 변수와 필드 값, 메소드를 상속받아 사용할 수 있기 때문이다.

property

변수를 선언할 때 property key는 빈 문자열을 포함하는 모든 문자열을 의미하고, property 값은 모든 값을 사용할 수 있다.
자바에서 객체생성하는 거와 같다. 클래스를 사전에 정의하고, new 사용해서 인스턴스 생성하듯 객체를 생성하면 된다. 자바스크립트는 완전한 객체 지향이라서 클래스라는 개념이 따로는 없다.
키값은 무조건 문자열로 들어간다.

function Person2(name,gender) {
  var married = true; //private
  this.name=name;
  this.gender = gender;
  this.sayHello = function() {
    console.log('name:' + this.name);
  }
}

생성자 함수 이름은 대문자로 기술하는게 암묵적인 규칙이다.
new라고 하면 주솟값이 생기는데, 각각이 주소니까 this를 사용하게 된다.

프로퍼티 메서드는 대부분 퍼블릭으로 구현되어 있다. 그러나 생성자 함수 내에서 일반 변수는 private이 된다. 그러므로 외부에서는 참조가 불가능하다. 생성자 함수 내에서는 자유롭게 접근하고 허용이 가능한데, 외부에서는 쉽게 안되는 경우가 있다.
변수는 private, this붙은 애들은 public이 된다. 일반변수같은 경우에는 외부에서 접근이 안된다.

new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 일반 변수는 참조가 안된다.

프로퍼티 삭제

delete 연산자를 이용해서 객체의 프로퍼티를 삭제! delete 변수.key값;

for ~ in

데이터 값을 반복해준다. per2에 있는 내용을 출력하고 싶을 경우에는, 객체의 이름을 써주시면 하나씩 하나씩 가져와서 그 안에서 데이터를 출력을 해준다.
객체에서 데이터를 꺼내 올 때는 순서가 보장이 안되고, 배열은 순서가 정해져 있다.
for(변수 in 객체) 라고 선언, 그 안에는 당연히 반복하는 문장을 써주면 된다.

전역객체와 래퍼객체
  • 전역객체 : 어디서든지 함수를 사용할 수 있고 객체에 접근하기 위해서는 this를 쓴다
  • 래퍼객체 : 어딘가에 쌓여있다. 문자열이라면 문자열 안에 객체가 아니어도 뭔가를 쓸 수 있듯이. new라고 해서 스트링이라는 객체 안에 특정 문자열을 넣으면 자동 변환을 해준다던지. 이렇게 감싸서 전달할 때 쓰는게 래퍼객체
서버단 연결 전 HTML 프로젝트 만듦

화면 전체에 스크롤 달기 + 네비게이션 두 가지 방법

  1. 바디부분 자체에 스크롤타입이라고 스크롤 달기
  2. 네비게이션 바
스크롤 => overflow

자동으로 넘어가면 스크롤을 해주겠냐 등등 css에 overlow 속성이 있는데 내용이 너무 커지면 지정된 영역에 맞지않을 때 스크롤막대를 추가해준다거나 등의 기능을 사용할 수 있다.

  • 상세한 js 코드는 Bootstrap4 에서 가져오면 된다. BE를 개발할거니까
  • 이크마(ECMA) : 클래스 타입이나 let 타입도 이크마5로 넘어가면 사용할 수 있다. 곧 넘어갈 것으로 생각하신다함.
문서객체모델(dom)

html에 js 연동해서 할건데 웹문서 기반으로 쉽게 하려고 만들어진 모델.
태그를 자바스크립트에서 사용할 수 있는 객체로 만든 것. 문서 객체를 조작한다는 말은 결국 태그를 조작한다는 의미이다.

문서객체모델기본용어

-요소노드
-텍스트노드 : 화면에 출력되는 문자열

-정적생성
-동적생성
-문서객체모델

문서 객체를 선택하는 메서드

1개 선택

  • document.getElementById : 아이디로 1개
  • document.querySelector 여러개 선택
  • document.getElements… (element 뒤에 s붙은 놈들)


backend Share Tweet +1