[수업 D-23] JS) 배경 및 작성 기초

2020.08.12(후) 5주차 3일

오늘부터 자바스크립트를 시작한다.

프론트백앤드 이런 개념 중 프론트에 해당하는 부분들을 다룰 예정

자바 스크립트 이론 및 배경

의외로 C랑 비슷한 언어. 함수 지향형언어. 잘 익혀두면 나중에 파이썬 배울때 편하다.

lib : JQuery vue react // etc

더 자세한 건 카페 JS Frame 에서 확인

나중에 프로젝트 짤 때 git, Vue(소규모, 쉬움, 후발주자 : 리액트와 앵귤러JS 장점을 섞음) react(대규모, 복잡, 기업들이 대부분 씀) 조금씩 섞어주면 좋다

OOP를 모르면 리액트, 프론트 쪽 일을 못함. 그래서 프로그래머들이 웹쪽으로 빠지기도 하는 추세다.

선생님 책추천 : 자바스크립트 코뿔소 : 자바스크립트 완벽 가이드

1) 카페 JS / jQuery 카테고리>36번 자바스크립트 기본 문법

2) Tree 트리구조
HTML root
head tag body tag
div(first child) span(next-previous sibling) a(last child)

t b (JS dom을 이용해서 제공받은 문서를 가능하게 함

사람들이 많이 안해서 차별화 가능 )

cdn spa?

1. 부트스트랩 Bootstrap

web_pro1> F_layout.html

그냥 스타일이나 cSS로 꾸미면 화면이 안 이쁘다

부트스트랩 CDN이랑 연결시키면 편리하다

[CDN : contents delivery network]

필요한 라이브러리를 사용하기 위해선, 기존엔 jar파일을 받아 내 컴퓨터에서 import 했다. 네트워크가 원활하다면 cDN을 활용하는 방법도

(1) http://bootstrapk.com/getting-started/ 접속하여 cdn 복사

2)f.layout 에 복붙

3) http://bootstrapk.com/css/#buttons 에 들어가서 bootstrap css 복사

4) <link> 를 통해 부트스트랩을 부를 수 있음

*부트스트랩은 구글이 제공하는 무료 CSS, 유료로 판매하는 CSS들도 있다.

2. 자바스크립트 작성 기초

(1) (수업 진행)인터널 : HTML 문서 내에서 작성 body

(2) (추천)이터널 : HTML 문서 외부에서 작성 head

(3) 주석 //
(4) 간이 프로그램(Function : method in java)
(5) 객체( class in Java)
이벤트, 윈도우

4)카페 JS / jQuery 카테고리>27. ECMAScript의 이해
문법이 바뀌고 있다. 자바 쪽 일을 하려면 에크마 스크립트 반드시 공부해야함

(1) var a = 10;에서 let b = 10;

(2) console.log();

var es1 = function(one , two){

return one + two;

}

var sum = es1(1 , 2);

console.log(sum);

에서

let es2 = (one, two) => {

return one + two;

}

let result = es2(1 , 2);

console .log(result);

으로

5) 참고 사이트

(1) JQuery https://jquery.com/

JS로 만든 라이브러리

'JQuery 모바일' 이걸로 앱을 짜기도 한다.

JQuery mobile 은

(2) 전자정부 표준프레임워크 by 한국정보화진흥원

삼성 SDS, LG CNS 가 양대산맥 => 스프링을 쓴다.

또 일본 미국이 다 자바관련 개발은 스프링을 쓰기 때문에 꼭 알아야만 한다.

3. 자바스크립트 시작

web_pro2> JS1

0) web_pro1 서버는 죽여버리자

1) web_pro2> JS1

(1) <body> 안에서 자바스크립트를 실행해보자.
* 인터널

(2) <script type="text/javascript">로 자바스크립트를 선언한다.

(3) 자바스크립트 에러 검사는 브라우저에 가서 하는 것이 국룰

(에러메시지가 친절하진 않으니 많이 봐야 한다. )

or 서버에서 확인 : 노드 JS

윈도우, IOS처럼 JS 를 실행하는 환경은 노드 혹은

(4) 원래 자바 스크립트 시작하면서  안에 걸어줘야 한다.
< script type="text/javascript">

</script>
왜냐하면 자바스크립트를 못 읽는 브라우저들이 있기 때문에
(5) 국룰) 검사 열어놓고 일하면 확인하기 좋음
(5) 함수형 언어는 블럭단위에 상관없이 지정된 변수값을 불러오기가 가능하다
// 자바스크립트의 =는 === 형변환없이 데이터값을 비교한다. ==는 속도가 떨어진다.

4. JAVA SCRIPT 함수

web_pro2> JS2, JS3, JS4, JS5, JS6,

<제어-논리>
web_pro2> JS2

if

switch

for

while

array

<다양한 함수들>
Web_pro2> JS3

1) 문자 함수
charAt()
indexOf('v')
indexOf('V')
subString(1,4)

2) 스타일 함수
document.write('<br>', str.strike());
document.write('<br>', str.bold().fontcolor('#ff0000').fontsize(20));

3) 수학함수
4) 날짜함수

5) 기타함수

6) 사용자 정의 함수
기본형이 없기 때문에 함수형 언어에선 가능

-- encode decode 암호화 (나중에 쓰니 알아두라고 하심)

1급함수
함수값을 argument로 줄 수 있어

7) *기타 호출 : 별도의 창을 호출

경고창
alert("경고창, 까꿍?!");

팝업창

//open("JS1.html", "대화상자", "width=300, height=200, left=200, right=200, resizable=true")

<사용자 정의 함수에 대해 더 알아보자>
Web_pro2> JS4
헤드에서 함수 만들기 (정의)

함수내에서 함수 호출 가능

바디에서 호출

<선언적함수, 익명함수 // 지역함수, 전역함수>
Web_pro2> JS5

선언적 함수(함수 객체가 메모리에 상주)

익명 함수(동적, 휘발성, 단발성)"

지역변수(험수 안, 함수내에서 조합) ,전역변수(함수 밖)

<대화상자 관련 내장함수>
Web_pro2> JS6

var irum = "홍길동";

var tel = "111-1111";

alert("이름은" + irum + "\n전화는" + tel);

console.log("이름은 " + irum + "\n전화는 " + tel);

document.write("<br>alert 수행후 출력");

알림창처럼
이름은 홍길동
전화는 111-1111이라고 뜬다.

var re = confirm("계속할까요?\n 버튼선택");

알림창처럼
계속할까요?
버튼선택이라고 뜬다. 내가 할수 있는 건 확인과 취소

document.write("<br>선택한 값은" + re);
if(re === true) doucment.wirte("<br>true");

var juso = prompt("사는 곳은?","");

document.write("<br>사는 곳은 " + juso);

알림창처럼
사는 곳은?
그 밑에 JTextArea처럼 뜨면서 내가 사는 곳을 입력할 수 있는 공간이 뜬다.
그 값을 입력하면 클라이언트에서 내가 입력한 주소를 출력 한다.

5. JAVA SCRIPT 이벤트

JS7, JS8, JS9

<이벤트>
Web_pro2> JS7
(요즘 추세에는 안 맞음)

function func1(){

var data = prompt("날짜 입력", "2020-8-12");

var arrData = data.split("-"); //java의 토큰나이트? : 글자 자르기

//document.write(data);

document.write(arrData[0] + "년 " + arrData[1] + "월 " + arrData[2] + "일 " );

}

</script>

</head>

<body>

<h2>이벤트연습 </h2>

<a href="javascript:onclick=func1();">호출 2</a><br>

(이벤트 발생했을때 찾아갈 수 있는 function()을 찾아간다.(~을 수행하라) -->)

<button onclick='func1()'>호출 3</button>
(2.그래서 핸들러를 설정(onclick) )

<input type="button" value="호출3" onclick="func1()" >
(1.비주얼 을 만들었는데 이벤트, 핸들러를 설정 안함 ( like 컴포넌트, 자바 리스너) )

</body>

* 웹에선 onclick을 많이 쓴다.
* 자바 스크립트는 찾아가고 제이쿼리는 CSS의 selector 를 ...? (다 못 받아적음)

<이벤트2>
Web_pro2> JS8
(추세!!!!)))

<body>에서 ID를 설정하여 스크립트에서 ID 환경을 구성하고, 이를 다시 호출하는 방식

function func1(){ :
ajax처럼 하기(?) : Dom을 쓰고 innerFunction을 쓰면
서버와는 상관없이 클라이언트에서 일이 벌어짐
(각각의 클라이언트가 각자 일하게 할 수 있음)
document.getElementById("test2").innerHTML = tag2;
바디태그 내에서. id(test2)를 받을거야.
=======

function func1(){

//alert("1");

var tag1 = "이름 : <input type ='text' name = 'irum'>";

var tag2 = "나이 : <input type ='text' name = 'nai'>";

1. JTextarea 처럼 내가 직접 입력하는 부분들이 생김
2. body에서 호출할 변수 설정

document.getElementById("test1").innerHTML = tag1;

document.getElementById("test2").innerHTML = tag2;

}

function func2(){

//alert("2");

var str1 = "<b style='font-size:24px'>일반 메세지로 전환</b>";

var str2 = "<b style='font-size:34px'>나도 전환</b>";

document.getElementById("test1").innerHTML = str1;

// HTML로 출력

document.getElementById("test2").innerText = str2;

// 문자열 그대로 다 출력

* Spa : 책상위에 다 올리고 일하듯
다른 페이지로 안 넘기고 하나의 페이지로 다 처리하는 것 ==> 부분데이터 ajax ==> JAVA SCRIPT
* div 각각의 엘리멘트를 구분하기 위해 하는것

<이벤트 처리 3>
Web_pro2> JS9

<body>에서 하나의 출력 DIV(id = "show") 를 가지고 다양한 이벤트를 끌어오는 방법

- 객체의 멤버와 메소드처럼
- 자바 스크립트는 클래스를 소환하지 않는다. "아이디, 네임, ? "만을 소환한다.

function func1(){

0. 자동 수행 (callback function)
window.onload = function() {
//문서 로딩이 완료되면 alert 자동 수행 (callback function) : 시스템에 의해서 호출됨
alert("automatically sucess of loading Js9.html");

1. 버튼1, 2, 3 with ID('show') , 이벤트 처리코드 부여
전통적인 이벤트 처리방식, b 객체 변수의 메소드 처럼 수행, b 객체 변수의 맴버로 수행

2. 클릭1, 2, 3, 4, 5
#1 "클릭 1 수행" : 버튼에 ID 바로 삽입
#2 "클릭 2 누름" :
1) 직접 이벤트 핸들러 한꺼번에 잡기
2) 이벤트 핸들러는 별도로 꺼내줌
3) 바디에 생성된 Name으로 이벤트 호출 및 시행
(element's'ByTagName 주의)

#3 "클릭 3수행함" :

#4 "클릭 4 를 선택함" : 여기서 진짜 헷갈렸음, id, name이 없을 때 호출하는 방법
자바 스크립트 영역에서
exBtn4 = document.getElementsByTagName("input")[6]
라는 코드로 바디에 설정된 '버튼 4'를 실행해야한다.

근데 진짜 웃긴게 [6]>>???? input 이 들어간 기준으로 6번째 input의 버튼은
<input type="button" value="클릭3" id="btn3" name = "myBtn">인데
왜 이거지...이거지...했는데
정말 기초적인 행렬[]의 시작은 0이란 것을 잊고 있었다.
그렇다. 쟤는 멀쩡히 바디의 Input이 들어간 7번째 코드를 호출하고 있었는데 나 혼자서 어?>?!

.....
<body>
<input type="button" value="버튼1" onclick="func1()"><br>

<input type="button" value="클릭4" >

#5 "이벤트를 걸고 풀어줌" :

이건 설명이 잘 안 된다 .

<이벤트 처리 3>
Web_pro2> JS9 #4 참조내용

https://www.w3schools.com/jsref/met_element_getelementsbytagname.asp

HTML DOM getElementsByTagName() Method

HTML DOM getElementsByTagName() Method ❮ Element Object Example Change the HTML content of the first

element (index 0) in a list: var list = document.getElementsByTagName("UL")[0]; list.getElementsByTagName("LI")[0].innerHTML = "Milk"; Try it Yourse

www.w3schools.com

※ 오늘 배우고 느낀 것

1. SQL, JAVA에 이어 HTML, JS, CSS 등 두 가지 이상의 언어를 섞는 것을 배웠다.

그럴듯한 프로젝트를 하려면 이렇게 다양한 언어를 섞을 줄 알아야겠지...?

2. 객체 지향적 언어, 함수지향적 언어

3. 데이터 시각화쪽으로 진로를 가고 싶은 나는 일명 '프론트'쪽으로 지식을 좀 더 쌓아야할텐데

다행히 HTML, CSS, JS쪽이 오히려 나한테는 맞는 것 같다.

4. 확실히 자바를 배워놓으니까 ~~(다 이해했다고는 안 했다!)~~ 이 부분을 배우는데 있어 훨씬 수월했다.

만약에 독학을 했다면 몰랐을 것이다.

저작자표시 비영리 변경금지

'[2020]KIC 캠퍼스 복습 > JAVA SCRIPT(5,6,7)' 카테고리의 다른 글

[수업 D-26 ] JS) AJAX, JSON //JQUERY (0)	2020.08.18
[코드리뷰] JS) AJAX를 구성, "팩토리파일" (0)	2020.08.18
[수업 D-25 ] JS)DOM, AJAX (0)	2020.08.18
[코드리뷰] JS) 웹으로 계산기 만들기 (0)	2020.08.13
[수업 D-24 ] JS) 정규표현식, 객체생성, DOM (0)	2020.08.13

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

두블의 IT 생존기