javaScript를 시작한다..🙃

양땡구·2020년 10월 20일

2020.10.20
어쨋든 javaScript를 시작했는데, 어렵다 어려워!

JavaScript 란 ?

개발자가 문서를 만든다.
방문자가 방문한다.
방문자가 어떤 동작을 취한다.
✨ 이때 그 동작에 대응하여 반응이 일어날 수 있도록 해주는 언어가 자바스크립트다~

javaScript 언어의 특징

1. 인터프린트 언어.
(작성된 순서대로 윗줄부터 순차대로 구문 분석.
코드가 문제에 생기면 에러가 발생한 행 전까지 구문을 분석하고 에러 발생한 다음 줄 부터는 구분 분석 안함.)
2. 클라이언트 스크립트 언어
3. 객체 기반 언어
객체란? 어떤 행위를 하는 대상. ex 선택자!
4. 다양한 라이브러리 활용 가능

javaScript 기초문법

🔔 javaScript 시작

01.html
<script type="text/javascript">
		//<![CDATA[
			document.write('안녕하세요.')
		]]//>
</script>

📑 CDATA 는 직접 화면에 나타나는게 아님! 내부에 표현하는 입력어.

🔔 스크립트 구조와 변수

02.html
<script type="text/javascript">
		document.write('안녕하세요.')
		document.write('<br/>')
		document.write('여러분')
</script>

📑 화면에 출력될 문자열은 '' 안에 입력하기.

🔔 변수(variable) 정의하기

03.html
<script type="text/javascript">
		thing=10;
		thing2='문자변수';
		thing3=20;
		document.write(thing+thing3+thing2)
</script>

📑 변수? 변하는 값. 내가 지정함
var 로 변수 선언

📌 변수의 종류
1.문자형 /연산안함
2.숫자형 /연산하고
3.논리형 /참,거짓 조건문

📌 변수의 규칙
-변수명은 영문, 숫자, 일부특수문자($,언더바)만 포함
-변수명 첫글자로는 $,언더바,영문자만 올 수 있다.
-한글은 사용하지 말것.
-의미에 맞는 이름
-소문자로 시작
-예약어 예를들어(this,with,document,window,screen,location)은 사용불가

🔔 변수(variable) 공부하기 (문자변수와 숫자변수)

04.html
<script type="text/javascript">
		var x,y;
		x=7+5;
		y="7"+5;
		document.write(x)
		document.write('<br/>')
		document.write(y)
</script>

💻 출력값은
12 숫자7과 숫자5를 더한값
75 문자7 나열과 숫자5

🔔 10진수로 숫자변수 나타내기

05.html
<script type="text/javascript">
		var x,y
		x=1230000
		y=1.23E6
		document.write(x,'<br/>',y)
</script>

📑 정의해라 x,y
x는 1230000
y는 1.23E6
화면에는 출력해라
x 줄바꿈
y

🔔 문자변수 나타내기

06.html
<script type="text/javascript">
		var x,y,z
		x="MY BIRTH DAY"
		y=" 11"
		z="월 입니다"
		document.write(x,y,z+'<br/>'+x+y+z)
</script>

📑 정의해라 x,y,z
x는 "문자변수"
y는 "문자변수"
z는 "문자변수"
화면에 출력해라
x y z
br
x y z
: 변수끼리 중간은 ,로 잇거나 +로 잇기

🔔 변수가 없다면

07.html
<script type="text/javascript">
		a=100;
		alert(a)
</script>

💻 실행하면 100이라는 에러메시지가 뜬다.
📑
alert(100+10);
alert(100+10)/10;
alert(100+10)/10)-10);
alert(100+10)/10)-10)*10);
100이라는 숫자를 1000으로 변경해야 한다면..

a=100;
a=a+10;
alert(a);
a=a/10;
alert(a)
a=a-10
alert(a)
a=a*10
alert(a)
유지보수하기 쉬워진다.

🔔 참 거짓 변수 논리형변수

08.html
<script type="text/javascript">
		a=false
		document.write(a)
</script>

📑 FALSE는 0, TRUE 는 1

🔔 산술연산자 공부

<script type="text/javascript">
		x=75 
		y=87
		add=x+y
		
		document.write("국어점수:"+x+ "<br/>")
		document.write("수학점수:"+y+ "<br/>")
		document.write("합계:"+add+ "<br/>")
		document.write("평균은:")
		document.write(add/2)
</script>

📑
1. 변수와 산술을 먼저 정의

💻 화면에 실행
국어점수는 x75 줄바꿈
수학점수: y87 줄바꿈
합계 add는 x+y로 지정 줄바꿈
평균은 add x+y /2

🔔 대입연산자 어렵다 어려워!

02.html
<script type="text/javascript">
		x=75
		y=87
		document.write("영어점수"+x+"<br/>")
		document.write("수학점수"+y+"<br/>")
		x+=y
		/*x=x+y*/
		document.write("합계"+x+"<br/>")
		document.write("평균")
		document.write(x/2)
</script>