728x90
반응형
내가 처음 배운 언어인 자바스크립트를 드디어 수업시간에 배우게 됐다. 그걸 떠나서 자바에서 파생된 언어이기 때문에 자바와 문법이 유사한 부분이 많다. 그래서 당연히 어렵진 않았는데, 변수 사용방법은 이제서야 좀 제대로 머리속에 정리 된거 같다.
<!--
Front-End : 브라우저에 보여주는 부분
HTML , CSS = 퍼블리셔
JavaScript = Front-End
1. JavaScript
2. 라이브러리 (JQuery, NodeJs(서버사이드), VueJs, ReactJs, TypeScript)
====== =====
Ajax Spring
= JavaScript 기본
= 외부 스크립트 (재사용:여러파일에 사용) => 확장자 .js
= 내부 스크립트 (한개의 파일만 제어)
= JavaScript 특징
= 객체기반의 스크립트 언어
= 동적이며 타입을 명시하지 않는다
=============== 데이터형을 사용하지 않는다 (자동 인식)
var : 불명확 (지역변수의 사용 범위가 명확하지 않다)
====> ESMA5.0
====> ESMA6.0 => VueJs, ReactJs => 6.0이상
let : 변수의 사용범위가 명확함
const : 상수형변수
예)
자바: 정수선언
int(long) 변수명=값
문자열
String 변수명=값
자바스크립트
var(let) 변수명=값 var a=10; var a="Hello"
const a=10;
= 인터프리터 (한줄씩 읽어서 출력하는 방식)
= 객체지향 프로그램(class사용), 함수형 프로그햄
= 자바스크립트가 하는 역할
= HTML의 내용, 속성, 스타일을 변경 => selector (css)
========================= DOM
= 사용자의 입력값 읽기
= 경고
= 이미지 변경
= 찾은 내용 보여주기
= 화면안에서 처리
= 자바 : 데이터 관리 => 데이터 전송
= 자바스크립트의 문법 : 자바와 비슷
1. 대소문자 구분
2. 문장 종료 후 ; 사용
3. {} 사용밥
= 처리후 결과값 출력
1. alert() => 다이얼로그창 (모달)
다이얼로그창 : 모달(다이얼로그창이 사라지기전까지 다른 프로그램 사용이 안된다), 모달레스
2. innerHTML : 태그와 태그 사이에 결과값을 출력할 때 사용 (Ajax)
3. console.log() : dos에 출력
4. document.write() : 브라우저에 출력
= 자바스크립트에서 지원하는 데이터형
숫자(Number) var num=10, var num=10.5
문자열(String) var name="Jeno"; var name='jeno';
불린(boolean) var bCheck=true, false;
undefined : var a; => 초기값이 없는 경우
= 문자열 결합 (+)
10+Hello => 10Hello
"2"+"3" => "23" (X) => 5 => 숫자형 문자열 연산처리 => 숫자형 형변환
= 연산자
= 단항연산자
++, --
!
(type) => (int)10.5 => Number("6")
Boolean(0) => false
Boolean(1) => true
= 이항연산자
= 삼항연산자
조건 ? 값 : 값
== ==
true false
= 제어문
= 조건문
= 반복제어문
= continue/break
= 배열
[값, 값, 값...] => 값의 데이터형이 다를 수도 있다
Array(값, 값, 값...)
= 객체표현법
{키:값, 키:값...} => JSON
= 함수
= 라이브러리 사용
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// 주석처리
/*
* 여러줄 주석
변수 선언, 출력
*/
// 메인
window.onload=function(){
var a =10; // 정수(int)
// 콘솔에 출력
console.log("a="+a);
var b=10.5; //실수(double)
console.log("b="+b);
var c="Hello JavaScript!!"; // 문자열 선언
console.log=("c="+c);
/* let d=["a", "b", 10, 20, 10.5];
console.log("d="+d); */
let e={namel:"홍길동", sex:"남자", age:30}; // 객체 표현법 (JSON)
console.log(e);
// 상수형 변수 (const는 값을 변경할 수 없다) => final
const k=100;
console.log(k);
console.log(typeof 10);
}
</script>
</head>
<body>
</body>
</html>
내가 처음에 자바스크립트를 배우고 자바를 배워서 데이터형을 좀 불편하게 생각했었는데 오늘 다시 그게 기억 났다.
js에서는 그냥 var만 써주면 알아서 데이터형을 읽어왔었기 때문에 별 생각없이 그냥 썼던 기억이 있다.
여튼 다시 정리를 해보면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var kor=80;
var eng=70;
var math=88;
var total=kor+eng+math;
var avg=total/3.0;
console.log("국어점수:"+kor)
console.log("영어점수:"+eng)
console.log("수학점수:"+math)
console.log("총점:"+total)
console.log("평균:"+avg);
var score='A';
if(avg>=90)
score='A';
else if(avg>=80)
score='B';
else if(avg>=70)
score='C';
else if(avg>=60)
score='D';
else
score='F';
console.log("학점:"+score);
// 자동 지정 변수 : var을 사용하지 말고 => let(scope가 명확)
var a=100;
if(a===100)
{
var b=200;// 사용범위가 명확하지 않기때문에 나중에 문제가 발생할 수 있다
let c=300;// 블록을 벗어나면 사라진다 (권장)
}// b가 사라져야 한다
console.log("b="+b);
console.log("c="+c);// 사용이 불가능
}
</script>
</head>
<body>
</body>
</html>var는 자동 지정 변수이고, 지역변수 처럼 사라지지 않는다. let은 지역변수로만 사용이 가능하다.
const는 상수변수이기 때문에 한 번 사용하면 다시 사용할 수 없는 특징을 갖는다.
조건문도 마찬가지로 사용할 수 있다. 문법은 비슷한데 js는 프론트에서 사용할 목적으로 만들어진 언어이기 때문에 html 태그들을 어떻게 제어할 것인지에 초점을 두고 살펴봐야 한다.
<!--
제어문
조건문
= 단일 조건문
if(조건)
{
처리 => 조건이 true일 경우에 처리
}
= 선택 조건문 (true일 경우, false일 경우를 나눠서 처리)
if(조건)
{
조건 : true일때 처리
}
else
{
조건 : false일때 처리
}
= 다중 조건문 (여러개의 조건중에 해당되는 조건 1개만 수행)
if(조건)
{
조건 : true일때 처리 ==> 종료
}
else if(조건)
{
조건 : true일때 처리 ==> 종료
}
else if(조건)
{
조건 : true일때 처리 ==> 종료
}
else
{
해당 조건이 없는 경우에 처리하는 문장 ==> 종료
}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var count=1; //SELECT COUNT(*) FROM member WHERE id='admin';
if(count===0)
{
console.log("ID를 사용할 수 있습니다!!")
}
if(count!=0)
{
console.log("이미 사용중인 ID입니다!! \n 다시 입력하세요!!")
}
}
function send()
{
var id=document.getElementById("id");
var pw=document.getElementById("pwd");
var idp=document.getElementById("idp");
var pwp=document.getElementById("pwp");
if(id.value==="")
{
idp.innerHTML="id를 입력하세요";
}
else
{
idp.innerHTML="";
}
if(pw.value==="")
{
pwp.innerHTML="pwd를 입력하세요";
}
else
{
pwp.innerHTML="";
}
}
</script>
</head>
<body>
<form method=post name=frm>
ID:<input type=text id=id size=15><br>
<span id="idp" style="color:red"></span><br>
PW:<input type=password id=pwd size=15><br>
<span id="pwp" style="color:red"></span><br>
<input type=button value="로그인" onclick="send()">
</form>
</body>
</html>
저 코드를 실행하면 이렇게 뜬다. id와 pwd에 값을 채우지 않고 그냥 로그인 버튼을 누르면 send()라는 함수가 실행되면서 빨간글씨로 필요한 정보들을 입력해달라고 요청이 들어온다.
일단 js는 여기까지 하고.. 영화 프로젝트를 마저 좀 수정을 해야겠다.
강사님이 고쳐두신거 다운받아서 넣으라고 했는데 그러기 싫어서 오늘 수업 끝나고 혼자 고쳐놔야지 하고 생각했었다.
다 완성했다.
사실 오늘 영화 뉴스때문에 xml로 파싱하는 법을 따라해보긴 했는데 말그대로 따라했을뿐 뭔가를 제대로 배우고 이해해서 코드를 쓴게 아니라... 일단은
package com.sist.news;
// http://newssearch.naver.com/search.naver?where=rss&query=영화
import java.util.*;
//import javax.xml.bind.JAXBContext;
//import javax.xml.bind.Unmarshaller;
import java.net.*;
/*
* XML , JSON , CSV => 읽어 온다
* 기본 => 오라클
*
* XML : 스프링은 XML기반 (어노테이션)
*/
import javax.xml.parsers.*;
import org.w3c.dom.*;
public class NewsManager {
public static void main(String[] args) {
NewsManager m=new NewsManager();
m.newsListData();
}
public List<Item> newsListData()
{
List<Item> list=new ArrayList<Item>();
try
{
String fd="영화";
String strUrl="http://newssearch.naver.com/search.naver?where=rss&query="
+URLEncoder.encode(fd, "UTF-8");
/*
* JAXBContext jb=JAXBContext.newInstance(Rss.class); System.out.println(jb);
* Unmarshaller un=jb.createUnmarshaller(); Rss rss=(Rss)un.unmarshal(new
* URL(strUrl)); System.out.println(rss); list=rss.getChannel().getItem();
* System.out.println(list);
*/
DocumentBuilderFactory dbf=DocumentBuilderFactory.newDefaultInstance();
DocumentBuilder db=dbf.newDocumentBuilder();
Document doc=db.parse(strUrl);
//System.out.println(doc);
Element root=doc.getDocumentElement(); // 전체 태그(rss)
System.out.println(root.getTagName());
Element channel=(Element)root.getElementsByTagName("channel").item(0);
System.out.println(channel.getTagName());
NodeList nList=channel.getElementsByTagName("item");
for(int i=2;i<50;i++)
{
nList=channel.getElementsByTagName("title");
String title=nList.item(i).getFirstChild().getNodeValue();
nList=channel.getElementsByTagName("description");
String description=nList.item(i).getFirstChild().getNodeValue();
nList=channel.getElementsByTagName("link");
String link=nList.item(i).getFirstChild().getNodeValue();
nList=channel.getElementsByTagName("author");
String author=nList.item(i).getFirstChild().getNodeValue();
//System.out.println(title);
Item item=new Item();
item.setTitle(title);
item.setDescription(description);
item.setLink(link);
item.setAuthor(author);
list.add(item);
}
}catch(Exception ex){ex.printStackTrace();}
return list;
}
}
이 코드를 얼른 이해할 수 있는 날이 와야할텐데.. 걱정이 크다
728x90
반응형
'programming > Gukbi' 카테고리의 다른 글
| 국비 교육 56일차 - jquery, jsp (0) | 2021.03.17 |
|---|---|
| 국비 교육 55일차 - 화면 UI 편집, javaScript (0) | 2021.03.17 |
| 국비 교육 53일차 - Trigger (0) | 2021.03.14 |
| 국비 교육 52일차 - 오라클 정리, css 마무리 (0) | 2021.03.11 |
| 국비 교육 51일차 - 게시판 마무리, CSS, 테이블 짜기 (0) | 2021.03.11 |
