본문 바로가기
Frontend/엘리스 SW 엔지니어 트랙

[ 엘리스 SW 엔지니어 트랙 ] 8일차

by YWTechIT 2021. 11. 4.
728x90

📍 8일 차 11.4. 목.(온라인 강의)

오늘은 온라인 강의로 JS 기초문법을 배웠다. 어제 배운 내용에서 크게 벗어나지 않는 내용이었고 추가로 배운 것은 JS로 입력받는 방법과 match 정규식에 대해서 배웠다.

❏ 자바스크립트 소개

  1. 자바스크립트란 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어 (HTML 은 웹사이트의 구조를 짜고, CSS 웹사이트를 꾸며주고, JS 는 사용자와 상호작용할 수 있게 만들어준다.)
  2. 자바스크립트 사용분야 : IoT(예: 전동커튼), 하이브리드 앱(예: 네이버 앱), 서버 개발(node.js)

❏ 자바스크립트 변수

  1. 변수란? 데이터를 담는 공간
var fruit;  // 변수 선언: 데이터를 담을 공간을 생성하는 것
fruit = "apple";  // 변수 초기화: 생성된 변수에 공간을 생성하는 것

var fruit = "apple";  // 변수 선언 및 초기화
  1. 데이터 변경: 변수 fruit 의 데이터를 apple 에서 banana로 변경했지만 변수는 이미 앞서 선언되었으므로 var로 다시 선언할 필요가 없다.
var fruit = "apple";
fruit = "banana";
  1. 변수 데이터 확인: console.log()
var fruit = "apple";
console.log(fruit);
  1. 변수 생성 시 주의 사항
// 변수명은 숫자로 시작 할 수 없음 
var 1str; 

// 변수명은 최대한 자세하게 작성 
var randomNumber; 

// 의미가 불명확한 단어들의 조합은 피해야 함 
var tmax;
  1. 자바스크립트 사용 방법: <script> 태그 안에 src 속성 값으로 js 파일을 입력 후 html파일과 연동
<body>
    <script src="index.js"></script>
</body>
  1. 변수 데이터 확인 방법: 우 클릭 후 크롬 개발자 검사 or F12
  2. document.write() : 변수의 데이터를 웹 화면에 출력하는 코드
  3. document.writeln() : 출력 값 사이에 공백을 넣는 코드

 

728x90

❏ 자바스크립트 데이터 타입

  1. 데이터 타입: 초콜릿도 다양한 종류가 존재하듯, 변수에 전달되는 데이터 타입에도 여러 가지 타입이 존재한다.
  2. 데이터 타입의 종류: string, number, boolean, function, object, undefined, null, array
  3. 문자열(string)
var str1 = "Hello";
var str2 = 'i am';
var str3 = "27";  // 숫자가 아닌 문자열

// var str4 = "Elice'; // 혼용 불가
var str5 = "He's a boy";
var str6 = 'He\'s a boy';  // 감싸주는 따옴표와 동일한 따옴표를 붙이려면 따옴표 앞에 `\`를 붙여주자.
  1. 숫자(number)
var num1 = 10;
var num2 = -10;
var num3 = 3.14;
var num4 = Number.MAX_SAFE_INTEGER  // 9007199254740991
var num5 = Number.MIN_SAFE_INTEGER  // 9007199254740991
  1. 함수(function)
// 함수 표현식
var func1 = function(){
    console.log("func1");
}  // 함수 생성

func1();  // 함수 호출

// 함수 선언식
function func2(){
    console.log("func2");
}

// 매개변수: width, height
var area = function(width, height){
    return width * height;
}

// 함수 호출 및 인자 전달
area(10, 20);

// 함수 데이터 호출방법
var result = area(10, 20);
console.log(result);

console.log(area(10, 20));
  1. 배열(array): 비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리
var fruit = ["사과", "배", "수박"];
console.log(fruit);

// 데이터 좌표값(index) 작성, 첫번째 좌표값은 0
console.log(fruit[0]);

// 배열 데이터 변경하기
fruit[0] = "포도";
  1. 객체(object): 프로퍼티, 메서드, 데이터로 구성, 여러 종류의 데이터 타입 삽입 가능
var student = [
    name : "AYW",
    age : 27,
    stack : ["JS", "TS"],
    sum : function (num1, num2) { return num1 + num 2};
]

// 객체 데이터 출력하기
console.log(student.name);
console.log(student["name"]);

// 객체 데이터 변경하기
student.name = "AYJ"
console.log(student.name);
  1. undefined: 변수 안에 데이터를 입력하지 않은 상태(데이터가 없는 것)
  2. null: 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태(빈 데이터를 지정한 것)
var unde;
var empty = null;
  1. boolean: true, false
var t = true;
var f = false;

❏ 자바스크립트의 프로퍼티와 메서드

  1. 프로퍼티, 메서드: js에서 사용자를 위해 사전에 작성된 편의 기능
  2. 문자열 메서드
var str1 = "Hello World";
str1.length;  // 문자열 길이 11
str1.charAt(0);  // 문자열 추출
str1.split(' ');  // 공백 기준으로 문자를 나누고 배열에 담는 메서드
  1. 배열 메서드
var fruit = ["사과", "배", "포도"];
fruit.length;
fruit.push("딸기");  // 배열 뒤에 데이터 삽입
fruit.unshift("레몬");  // 배열 앞에 데이터 삽입
fruit.pop();  // 배열 뒤의 데이터 제거
fruit.shift();  // 배열 앞의 데이터 제거
  1. math 의 수학 연산 메서드
Math.abs(-3) // 절대값
Math.ceil(0.3) // 올림
Math.floor(10.9)  // 내림
Math.random()  // 임의의 숫자 출력
  1. 문자를 숫자로 변환하는 메서드
parseInt("20.6")  // 정수 형태의 20 변환
parseFloat("20.6")  // 실수 형태의 20.6 변환
  1. 자바스크립트 출력 시 역 슬래시(\)의 출력과 \n 같은 이스케이프 시퀀스를 구분하기 위해서는 앞에 \ 를 붙여준다.

❏ 자바스크립트로 입력받기

const readline = require("readline");
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

// 한번 입력 받고 출력
rl.on("line", (line) => { 
    // 한 줄씩 입력받은 후 실행할 코드
    // 입력된 값은 line에 저장된다.
		console.log(line)
    rl.close(); // close가 없으면 입력을 무한히 받는다.
});
rl.on('close', () => {
    // 입력이 끝난 후 실행할 코드
})

// 입력이 한 줄 공백으로 주어질 때 
let input = [];
rl.on("line", function (line) {
  input = line.split(" ");
	r1.close();
}).on("close", function () {
  console.log(input);
});

❏ 자바스크립트 `match` 정규식 사용하기

1. 다음 문자열 중 `e`의 개수는 몇 개인가?

let lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias iste tempore voluptatem architecto pariatur obcaecati provident sint neque. Ratione debitis officia quo? Vero tempora sequi laborum maxime fugiat fuga sapiente?" 

// 정규식 
console.log(lorem.match(/e/g).length);
👉🏽 23

// 반복문
let cnt=0;
for (let x of lorem){
	if(x === "e") cnt++ 
}
console.log(cnt);
👉🏽 23
반응형
저작자표시

'Frontend > 엘리스 SW 엔지니어 트랙' 카테고리의 다른 글

[ 엘리스 SW 엔지니어 트랙 ] 10일차  (0) 2021.11.06
[ 엘리스 SW 엔지니어 트랙 ] 9일차  (0) 2021.11.05
[ 엘리스 SW 엔지니어 트랙 ] 7일차  (0) 2021.11.03
[ 엘리스 SW 엔지니어 트랙 ] 6일차 (2주차: 자바스크립트 I - 연산자, 기초 개념)  (0) 2021.11.02
[ 엘리스 SW 엔지니어 트랙 ] 5일차  (0) 2021.10.30

관련글

댓글

티스토리툴바