회고록 블로그
[공부 복습] 생활코딩 JavaScript 입문 강의 복습 (1) 본문
[공부 필기] 생활코딩 JavaScript 입문 강의 필기 (1)
오리엔테이션 (1) JavaScript는 처음 웹브라우저를 제어하기 위함으로 고안되었음. (2) 하지만 현재에는 JavaScript를 웹서버에서도 사용할 수 있도록 하는 기술이 등장함 (node.js가 대표적) => 자바스크
cinnamonc.tistory.com
2021-04-07 작성>
위의 글에서 계획했었던 '공부 방향'에 맞춰 일단 한번 쭉 강의를 들었고
이제 자바스크립트의 한챕터 한챕터 강의를 세세하게 들으면서 문법을 익히고 있다.
실습 위주로 따라가면서 강의 내용에서 추가로 알게된 내용들을 위의 글에 추가하고 있지만...
소스코드(실습하면서 써보고 있는 코드)까지 추가하기에는 스크롤 압박이 너무 커서 (ㅜㅜ)
소스코드는 따로 빼서 이 글에 적기로 했다.
문자의 표현
(1) String에서 사용할 수 있는 명령 : substring 메소드 실습
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Practice</title>
</head>
<body>
<input type="button" value="버튼" onclick="getWord()">
<script>
var sentence = "안녕하세요. 반갑습니다.";
function getWord() {
alert(sentence.substring(0, 5));
}
</script>
</body>
</html>(2) String에서 사용할 수 있는 명령 : indexOf 메소드 실습
// HTML
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>"안녕하세요. 반갑습니다."에서<br/>
"안녕" 찾기</p>
<input type="button" value="find 안녕" onclick="getWord()">
<!-- 버튼 클릭 시 출력 결과 : "안녕"이 존재합니다. -->
<script src="./script8.js"></script>
</body>
</html>
// script8.js
var sentence = "안녕하세요. 반갑습니다.";
function getWord() {
var num = sentence.indexOf("안녕");
if (num !== -1){
alert('"안녕"이 존재합니다.');
}
else {
alert('"안녕"이 존재하지 않습니다.');
}
}조건문
(1) prompt와 조건문 실습
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>"안녕하세요. 반갑습니다." 문장에서 원하는 값 찾기</p>
<input type="button" value="문자 찾기" onclick="getWord()">
<script src="./script8.js"></script>
...// script8.js
var sentence = "안녕하세요. 반갑습니다.";
function getWord() {
var word = prompt("찾고 싶은 문자를 입력해주세요.");
var result = sentence.indexOf(word);
if(result !== -1){
alert("찾는 값은"+(result+1)+"번째에 있습니다.");
}
else{
alert("찾는 값이 없습니다.");
}
}반복문&배열
(1) 반복문과 배열 실습
...
<h1>1반 등록하기</h1>
<p>이름1: <input type="text" name="student-name"><br/>
이름2: <input type="text" name="student-name"><br/>
이름3: <input type="text" name="student-name"></p>
<input type="button" value="등록하기" onclick="registStudent()">
<script src="./script8.js"></script>
...// script8.js
var student = ['Kim', 'Lee', 'Park'];
registStudent = function(){
let newstudents = document.getElementsByName('student-name');
for(let i=0; i<newstudents.length; i++){
if(newstudents[i].value !== ''){
student.push(newstudents[i].value);
}
}
console.log("현재 1반의 학생은"+student+"입니다.");
}
함수(function) 실습
# 함수명, 변수명 정하는게 제일 어렵다. #
(1) 함수 만들기 실습 + 인자(argument)와 매개변수(parameter) 입력하기 실습
* [스크랩] Number와 parseInt의 차이에 관한 글 스크랩: dororongju.tistory.com/71
[자바스크립트] 형변환 Number() 와 parseInt() 의 차이
Number(str) / parseInt(str) Number(str) 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔줍니다. 아래의 코드는 '1234' 라는 문자열을 1234 라는 숫자로 형변환하여 변수 num에 담는 코드입니다. 1 var num..
dororongju.tistory.com
// Function 공부 실습
var num1 = Number(prompt("첫번째 숫자를 한개 입력해주세요."));
var num2 = Number(prompt("두번째 숫자를 한개 입력해주세요."));
var oprt = prompt("적용하고 싶은 사칙연산을 입력하세요. (더하기(+), 빼기(-), 곱하기(*), 나누기(/) 중 택 1)");
var result = 0;
function add(argNum1, argNum2){
document.write("설명: 두 수를 더한 값<br/>");
return (argNum1+argNum2);
}
function minus(argNum1, argNum2){
document.write("설명: 두 수를 뺀 값<br/>");
return (argNum1-argNum2);
}
function multiply(argNum1, argNum2){
document.write("설명: 두 수를 곱한 값<br/>");
return (argNum1*argNum2);
}
function division(argNum1, argNum2){
document.write("설명: 두 수를 나눈 값<br/>");
return (argNum1/argNum2);
}
if(oprt === "더하기" || oprt === "+"){
result = add(num1, num2);
}
else if(oprt === "빼기" || oprt === "-"){
reult = minus(num1, num2);
}
else if(oprt === "곱하기" || oprt === "*"){
result = multiply(num1, num2);
}
else if(oprt === "나누기" || oprt === "/"){
result = division(num1, num2);
}
else{
alert("잘못된 입력입니다");
}
document.write(result);(2) return 값은 하나만 받을 수 있고, 여러개인 경우 가장 처음에 만나는 retrun 값이 전달
(return을 만나면 값을 전달해주고 함수가 종료되기 때문)
// Function 공부 실습
var num1 = 10;
var num2 = 20;
function Practice(number1, number2){
var result1 = number1 * number2;
return result1; // 이부분
var result2 = number1 + number2;
return result2;
}
alert(Practice(num1, num2));
(3) 다양한 함수 정의 실습
* function 함수명([인자]...) { 코드 } 형태로 사용하는 경우 : 선언적 함수
* 나머지 밑의 두 개의 경우 : 인자 함수
/* 선언적 함수 */
var num1 = 10;
var num2 = 20;
// 함수 정의하는 방법 : 1번째
// 함수 정의 후 함수 호출
function multiply(number1, number2){
var result1 = number1 * number2;
return result1;
}
alert(multiply(num1, num2));/* 우변이 익명함수 */
var num1 = 10;
var num2 = 20;
// 함수 정의하는 방법 : 2번째
// 함수명을 '변수처럼 앞에' 적기
multiply = function(number1, number2){
var result1 = number1 * number2;
return result1;
}
alert(multiply(num1, num2));/* 익명함수, 정의와 동시에 실행 */
var num1 = 10;
var num2 = 20;
// 함수 정의하는 방법 : 3번째
// 함수명을 지정하지 않으며, 함수를 정의함과 동시에 실행하는 방법
(function(number1, number2){
var result1 = number1 * number2;
alert(result1);
})(num1, num2);
// 마지막에 괄호(와 인자값) 잊지 말 것
배열(array) 실습
(1) 배열을 alert 함수의 인자로 하여 실행해보면 아래와 같이 쉼표(,)로 구분되어 배열 안의 데이터를 출력
(2) 배열 안에 있는 문자형 데이터는 큰따옴표나 작은따옴표로 표시
// 배열 공부 실습
var id = ['guest1', 'guest2', 'guest3'];
var name = ["게스트1", "게스트2", "게스트3"];
alert(id);
alert(name);(3) 함수의 return 값이 배열([student1, student2, student3])이라고 했을 때
변수 member에 리턴한 배열을 넣고, 배열 인덱스를 이용해 접근 가능
function get_members(){
return ['student1', 'student2', 'student3'];
}
var members = get_members();
document.write(members[0]);
document.write(members[1]);
document.write(members[2]);(4) 배열과 반복문 함께 사용하기 실습
- 코드설명: 사용자에게 입력받은 ID에 사용할 수 없는 특수문자(!, @, #, $)가 들어가면 해당 특수문자를 없애고 ID를 만들어줌
var id = prompt("아이디를 입력해주세요");
var unableChar = ['!', '@', '#', '$'];
function check_id(userID){
var transform_id = userID;
for(var i=0; i<unableChar.length; i++){
while(transform_id.indexOf(unableChar[i]) != -1){
//indexOf : 문자열 안에서 특정 문자 찾기
// 문자가 존재하면 위치를 양수값으로 리턴, 존재하지 않으면 -1 리턴
transform_id = transform_id.replace(unableChar[i], '');
// replace 특정 문자 변경
}
}
return transform_id;
}
document.write("당신의 변환된 아이디는 "+check_id(id)+" 입니다.");
(5) 자바스크립트도 2차원, 3차원 배열을 생성할 수 있는지 모르겠음
* C언어처럼 [[a, b], [c,d]] 등의 형태로 2차원 배열을 만들 수는 없어보임
* 2차원 배열 만드는 것은 아래 능력자님의 글 참고
[문돌이의 IT]자바스크립트 2차원 배열 이해하기
문돌이식으로 자바스크립트 개념을 쉽게 알고 넘어가자. 글로 배우는 코딩이 아니라 직접 해보면서 몸으로 체득하는 것을 목표로 삼으면 된다. 배열 안에 또 다른 배열이 들어 있는 모습을 2차
improver.tistory.com
(6) push, concat, unshift, splice 실습
// 배열 push 메소드 실습
var member = ['kim', 'lee', 'park', 'choi', 'you'];
document.write("아무것도 적용하지 않은 순수 데이터 : "+member+"<br/>");
// push : 하나의 데이터만 추가 (마지막 인덱스에)
member.push('yang');
document.write("<b>push(yang 추가)</b> 실행 결과 : "+member+"<br/>");
// concat : 여러개의 데이터 추가 (마지막 인덱스에)
member.concat('lim', 'song');
document.write("<b>concat(lim, song 추가)</b> 실행 결과 : "+member+"<br/>");
// unshift : 가장 앞에(인덱스 : 0번) 하나의 데이터 추가
member.unshift('oh');
document.write("<b>unsift(oh 추가)</b> 실행 결과 : "+member+"<br/>");
//splice 실습
var originArr = ['kim', 'lee', 'park', 'choi', 'you'];
var Arr1 = ['kim', 'lee', 'park', 'choi', 'you'];
var Arr2 = ['kim', 'lee', 'park', 'choi', 'you'];
var Arr3 = ['kim', 'lee', 'park', 'choi', 'you'];
document.write("원 데이터 : "+originArr+"<br/>");
// splice : 직접 써봐야할 듯
// 값을 추가하는 것 뿐만 아니라 삭제되는 데이터가 있으면 그 삭제되는 데이터를 리턴해줌
Arr1.splice(1, 0, '0');
document.write("splice(1,0,'0') 실행 결과 : "+Arr1+"<br/>");
Arr2.splice(1, 2, '1', '2');
document.write("splice(1,2,'1','2') 실행 결과 : "+Arr2+"<br/>");
Arr3.splice(2, 1, '3','4','5');
document.write("splice(2,1,'3','4','5') 실행 결과 : "+Arr3+"<br/>");
(7) shift, pop 실습
var member = ['kim', 'lee', 'park', 'choi', 'you'];
...
document.write("<br/>");
document.write("현재 member 배열의 데이터 : "+member+"<br/>");
member.shift();
document.write("<b>shift(인덱스 0 데이터 삭제)</b> 실행 결과 : "+member+"<br/>");
member.pop();
document.write("<b>pop(마지막 인덱스의 데이터 삭제)</b> 실행 결과 : "+member+"<br/>");
객체(Object) 실습
(1) 객체를 생성하는 방법
(2) for...in문을 이용하여 객체의 값 접근하는 방법 실습
* 배열에서도 for...in문 사용 가능 (만약 배열이었을 경우 key = 0, 1, 2, ...)
// 객체를 가져오는 방법
document.writeln(class1['Sue']);
document.writeln(class2['Ju'+'ne']);
document.writeln(class3.Cindy+"<br/>");
// doucment.writeln(class2.'Ju + ne') // 오류 발생
// 반복문으로 객체를 하나씩 가져오는 방법
for(key in class1){
document.writeln("키는 "+key+"이고, 값은 "+class1[key]+"입니다. <br/>");
}
document.write("<br/>");
// valye 값만 가져오는 방법
document.write("class2의 value 값만 확인하기 <br/>");
for(key in class2){
document.writeln(class2[key]);
}
document.write("<br/>");
// key 값만 가져오는 방법
document.write("class3의 key 값만 확인하기 <br/>");
for(key in class3){
document.writeln(key);
}
(3) 객체 안에 함수 혹은 배열 추가하기 실습
* 객체 안에 함수를 선언 및 정의할 때 인자(num1, num2)를 전달 받아서 계산하는 형태로도 정의할 수 있다는 점,
* 객체 안에 함수에게 줄 인자는 해당 함수가 속해있는 객체의 다른 데이터(class1, class2 등)도 가능하구나..
// 객체 실습 연습
var midScore = {
'class1' : {'Kim' : 70, 'Lee' : 40, 'Park' : 100},
'class2' : {'Choi' : 35, 'Lim' : 17, 'Song' : 50},
'avgFunc' : function(num1, num2){
var avg = num1+num2;
avg = avg / 2;
alert(avg);
}
}
// 접근 방법 1
alert(midScore['class1']['Kim']); // 결과 70
// 접근 방법 2
alert(midScore.class2.Choi); // 결과 35
midScore['avgFunc'](midScore.class1.Kim, midScore['class2']['Choi']); // 결과 52.5
(4) 객체 안에 있는 함수를 호출할 때에는 소괄호 잊지말기 + this 사용 실습
// 객체 실습 연습
var midScore = {
'class1' : {'Kim' : 70, 'Lee' : 40, 'Park' : 100},
'class2' : {'Choi' : 35, 'Lim' : 17, 'Song' : 50},
'avgFunc' : function(){
var avg1 = 0
var avg2 = 0;
for(var name in this.class1){
avg1 = avg1 + this.class1[name];
}
for(var name in this.class2){
avg2 = avg2 + this.class2[name];
}
console.log(avg1, avg2);
}
}
midScore.avgFunc(); // 괄호 잊지 말 것
모듈 실습
(1) 실습을 해보기 위하여 모듈화 하지만 아래와 같은 단순,간단한 코드는 모듈화 불필요
// main.html
...
<meta charset="utf-8">
<script src="welcome.js"></script>
</head>
<body>
<script type="text/javascript">
// 모듈 실습
alert(welcome());
</script>
...// welcome.js
function welcome(){
return 'Hello';
}
[유의] 자바스크립트 API
(1) 자바스크립트에는 크게 두 가지의 API가 있음
* 자바스크립트 자체에서 지원하는 API
* 동작하는 호스트 환경에서 제공하는 API
(2) math, 정규표현식 등은 자바스크립트 자체에서 제공하는 API.
(3) 자바스크립트가 동작하는 호스트 환경(웹브라우저, Node.js, 구글 앱스 스크립트 등)에서 제공하는 API는 추가로 학습해야 함.
e.g.) 웹브라우저를 자바스크립트로 제어하는 것과 관련된 강의 등
정규표현식
(1) 자바스크립트: 정규표현식 '찾고자 하는 문자'를 지정하는 방법
* 여기에서 RegExp 객체는 이미 자바스크립트가 만들어질 때 만들어져 있었던 내장 객체
-> 임의로 객체명 변경 불가
//방법 1
var pattern1 = /a/; // 찾고자 하는 문자는 슬래쉬 안에 넣는다
//방법 2
var pattern2 = new RegExp('a'); // 찾고자 하는 문자를 RegExp 객체 안에 넣는다
(2) 일반적인 정규표현식에 대하여 공부
ㄱ. zvon 활용하기
- zvon.org/comp/r/tut-Regexp.html#Pages~Contents
Regular Expressions Tutorial @ZVON.org
zvon.org
<zvon 공부하기>
- Page 1 : 정규표현식은 대소문자를 구분함 (대소문자 구분 없도록 하고 싶다면 설정을 바꾸는 등 방법 필요)
- Page 2 : 띄어쓰기(스페이스, 탭, 엔터)를 구분함.
* 알게된 사실1. 패턴(찾고자 하는 문자)에 HTML 태그가 들어가도 문제없음 (e.g. 아래 코드에서 <br/> 태그)
* 알게된 사실2. "Hello<br/>"이 찾고자 하는 문자일 때, 문장에 "Hello <br/>"와 "Hello<br/>"이 있다면 결과가 전혀 다름
* 알게된 사실3. 패턴(찾고자 하는 문자)을 출력해보면 슬래쉬(/)가 붙어있음
(패턴을 의미하는 변수 pattern1을 초기화 할 때 슬래쉬를 앞.뒤로 붙이는 이유가 이거였나봄)
- Page 3 : 특수문자 ^ → 찾고자 하는 문자가 문장에서 시작점에 등장하는지 확인할 수 있음
* '^who'와 같이 사용은 가능하지만 'who^' 로는 사용 불가
* 아래 코드의 결과로 보아 특수문자 '^'는 문자열의 맨 처음에 찾고자 하는 문자가 있는지 확인할 때 사용하는 듯 함
var pattern1 = /^who/; // 찾고자 하는 문자는 슬래쉬 안에 넣는다
var pattern2 = new RegExp('who^'); // 찾고자 하는 문자를 RegExp 객체 안에 넣는다
document.writeln(pattern1.exec('who is who')); // 결과 who
document.writeln(pattern2.exec('who is who')); // 결과 null
document.writeln(pattern1.exec('who is that')); // 결과 who
document.writeln(pattern1.exec("what's the matter? who is her?")); // 결과 null- Page 3 : 특수문자 $ → 찾고자 하는 문자가 문장의 끝에 등장하는지 확인할 수 있음
var pattern1 = /who$/;
var pattern2 = new RegExp('$who');
document.writeln(pattern1.exec('who is who')); // 결과 who
document.writeln(pattern2.exec('who is who')); // 결과 null
document.writeln(pattern1.exec('who is that girl, who')); // 결과 who
document.writeln(pattern1.exec("what's the matter? who?")); // 결과 null- Page 4 :특수문자가 필요하다면 백슬래쉬(\)를 이용함 (아래 처럼)
// Hello<br/>을 찾고자 하는 문장으로 지정하고 싶다면?
var pattern = /Hello<br\/>/; // 백슬래쉬 이용- Page 5 : 온점(.)은 어떤 아무 문자나 찾고 싶을 때 사용할 수 있음 (띄어쓰기, 숫자, 영문자 등 모두 가능)
* 온점을 입력한 개수 : 문자열의 앞에서 부터 해당 개수 만큼 문자 찾아낼 수 있음
var pattern1 = /./;
var pattern2 = new RegExp("...");
document.writeln(pattern1.exec("Hello Everyone"));
document.writeln(pattern2.exec("Hello Everyone"));
- Page 6 : 문장에서 단순히 온점(.)을 찾고 싶다면 역슬래쉬 이용
* Case 3번은 이해를 못했음
- Page 7 : 대괄호([])를 이용하면 대괄호 안에 있는 문자를 모두 찾을 수 있음
- Page 8 : 마이너스 부호(-)를 이용하면 범위를 설정할 수 있음 (e.g. [c-e]
- Page 9 : 만약 대괄호([])와 특수문자 '^'를 함께 사용하면 대괄호 안에 있는 문자 외의 다른 문자들을 찾을 수 있음
(즉 대괄호 안에 있는 문자를 제외하고 다른 문자를 찾게 된다는 의미)
- Page 10 : 대체 텍스트를 설정할 수 있음 (특수문자 | 를 이용함)
* e.g.) ..(id|esd|nd)ay
: 앞에 아무 문자 두개 있고 -> 그 다음에 나오는 문자가 id이나 esd이나 nd이고 -> 그 다음에 나오는 문자가 ay인 문자
- Page 11 : 특수문자 '*'는 0개 이상 문자가 반복되는지, 특수문자 '+'는 1개 이상 문자가 반복되는지, 특수문자 '?'는 문자가 0개 혹은 1개인지 확인 시 사용할 수 있음
- Page 15 : 중괄호({})를 이용해서 문자반복 개수를 구체적으로 설정할 수 있음
* e.g.) [els]{1,3}
: e, l, s에 해당하는 문자를 찾고 -> 그 문자 뒤에 또 e, l, s에 해당하는 문자가 있는지 찾고 -> 또 그 문자가 있는지 찾고 -> ... -> 그렇게 최소 1개, 최대 3개까지 확인할 수 있음
- Page 18 : '\w'는 임의의 문자를 의미함. 어떤 프로그래밍 언어에서는 인식되지 않아서 [A-z0-9_]를 대신 사용하기도 함
- Page 19 : "\W"는 단어가 아닌 데이터를 의미함. 영문자(A-Z, a-z), 숫자(0-9), 언더바(_)가 아닌 데이터(콜론, 세미콜론, @, $, %, ^, 띄어쓰기 등)를 의미함
ㄴ. 정규표현식의 특수 문자 공부하기
www.tcpschool.com/javascript/js_regularExpression_application
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
ㄴ. 정규표현식의 플래그 공부하기 (g, i, m, y 등)
www.tcpschool.com/javascript/js_regularExpression_concept
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
(3) 정규표현식 실습
- http/https 로 시작하는 URL 외에도 http/https가 생략된 URL도 정규표현식으로 표현해보고 싶었으나
그러면 아래와 같이 모든 문자, 특수문자가 함께 잡혀버림
- 마지막 단어가 com, kr, net 등으로 끝나는 정규표현식을 작성해볼까 고민해봤으나 디렉터리 경로, 파일명, 파라미터 등이 붙으면 추출할 수 없다는 단점이 있어서 포기
- 우선 보류해놓기로 하고 http/https로 시작하는 URL만 추출하기로 함
var urlPattern = /(http:|https:)([\/]{2})[A-z0-9-+_=!@#%&?,.:;]*/gim;
var urlSample1 = "네이버는 http://www.naver.com 입니다. 구글은 http://google.co.kr 입니다.";
var urlSample2 = "티스토리는 https://www.tistory.com입니다.";
var urlSample3 = "정규표현식에 대해서 참고한 글은 www.tcpschool.com/javascript/js_regularExpression_concept입니다.";
document.write(urlSample1.replace(urlPattern, function(url){
return '<a herf="'+url+'">'+url+'</a>';
})+"<br/>");
'2. 프로그래밍 언어 공부 > JavaScript' 카테고리의 다른 글
| [공부 필기] 생활코딩 JavaScript 입문 강의 필기 (3) (0) | 2021.04.18 |
|---|---|
| [공부 복습] 생활코딩 JavaScript 입문 강의 복습 (3) (0) | 2021.04.17 |
| [공부 복습] 생활코딩 JavaScript 입문 강의 복습 (2) (0) | 2021.04.12 |
| [공부 필기] 생활코딩 JavaScript 입문 강의 필기 (2) (0) | 2021.03.22 |
| [공부 필기] 생활코딩 JavaScript 입문 강의 필기 (1) (0) | 2021.03.11 |
