Javascript 자료
손쉬운 사용
주석처리: Ctrl+?
DOMContentLoaded async&
- async:비동기 스크립트는 HTML 문서가 완전히 다운로드되지 않은 상태라도 로드 및 실행될 수 있습니다. 스크립트 크기가 작거나 캐싱 처리 되어있을 때 혹은 HTML 문서 길이가 아주 길 때 이런 일이 발생합니다.
- :지연 스크립트는 문서 다운로드와 파싱이 완료된 후에, DOMContentLoaded 이벤트 발생 전에 실행됩니다.
JavaScript 추천 검색어
- document: 웹페이지 태그 삭제 혹은 자식태그 추가
- DOM:document객체에서 찾을수 없다면 DOM으로 수색범위 넓혀 보세요 document객체는 DOM객체의 일부
- window객체:웹페이지가 아니라 웹브라우저 자체를 제어해야할때"현재 열려잇는 웹주소가 뭔지 알아내야 될수 잇고 생창을 열어야 한수도잇고 웹브라우저의 크기를 자바스크립트를 통해 알아야한다면 윈도우 객체에 속해잇는 프로퍼티나 메소드가 여러분을 도울수잇을거에요
- ajax:웹페이지를 리로드하지않고 정보를 변경하고 싶다면 ajax가 필요, 현대적인 웹앱을 만드는데 필수적인 테크닉입니다.
- cookie:웹페이지가 리로드되어도 현재 상태를 유지하고 싶다면 cookie를 배우세요 cookie와 함께라면 사용자를 위한 개인화된 서비스를 제공할수 잇습니다.
- offline web Application: 인터넷이 끊겨도 웹을 하고싶다면
- webRTC:화상 통신 웹 앱을 만들고싶다면
- speech: 사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면
- webGL: 3차원 그래픽으로 게임과 같은 것을 만들고 싶다면
- webVR: 가상현실에 관심이 많으시다구요?
JavaScript
첫째:자바스크립트는 사용자와 상호작용하는 언어다.
둘째:웹브라우저는 한번 화면에 출력되면 가기 자신을 바꿀수 없다
셋째:자바스크립트는 HTML위에서 동작하는 언어다.
library(도서관) & framework(반제품)
공통점:다른사람의 도움을 받아 소프트웨어를 만든다
UI VS API
UI : User Interface 의 약자이다
API: Application Programming Interface
HTML에서의 출력 확인
console.log: 콘솔창에 출력 console.log('데이터')
document.write: HTML에 출력 document.write('데이터');
alert: 경고창에 출력 alert('데이터')
JavaScript Data types
- 기본 자료형 (Primitive) 인 여섯가지 데이터 타입
- Boolean(연산자true&false)
- Null
- Undefined
- Number(숫자)
- String(문자)
- Symbol (ECMAScript 6 에 추가됨)
- 별도로 Object 도 있음
등장 문법:
while: while문은 조건문이 참일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.
변수(variable) vs 상수(constant
- variable:변경가능 rw(read/write)
- constant:변경불가 r(read only)
- primitive,single item:numer,sting,boolean,null,undefined,symbol
- object:box container
- 메모리 값 저장되는 두가지 타입
변수의 효용중 하나
변수
let:선언한 변수에 한해 사용가능하다
var: 선언 하기 전에 사용가능하다,또한 블럭을 무시한다. 그러므로 위험하다
var hoisting-어디에 선언햇는지에 관계없이 맨위로 끌어 올려준다
let name = 'sung';
var name = 'sung';
alert("variable, "+name+",mutable, changeable, "+name+", unsettled, fickle, "+name+",mobile")
변수를 사용할땐 앞에 var 을 붙여준다 var = Variable
문자열에서 가장 많이 사용되는 작업들
.length : 문자열의 길이를 확인하는 (length), + 와 += : 문자열을 생성하고 연결하는 + 와 += 문자열 연산자, substring :서브문자열(substring)이 있는지 확인하고, indexOf() :있으면 위치를 확인하는 indexOf() 메서드, substring():서브문자열(substring)을 추출해내는 substring() 메서드가 있습니다.Template literals(string)
"`${}`"을 이용해 간결하게 만들수잇다 const char ='c'; const brendan = 'brendan'; const greeting = 'hello' + brendan; console.log(`value: ${greeting},type: ${typeof greeting}`); const helloBob = `hi ${brendan}!`; //template literals (string) -> console.log(`value: ${helloBob},type: ${typeof helloBob}`); //template 사용시 -> console.log('value:' +helloBob + 'type: '+typeof helloBob); //template 미사용시
boolean
- false:0,null,undefined,NaN,''
- null:비어잇는 값
- undefined:선언은 되엇지만 지정된 값이 없다
- true:any other value
symbol
- symbol: 고유의 식별자가 필요할때 할당(내용이 같으며도 불구하구 false로 판단하다)
Javascript 체험기 내용 바꾸기
안녕하세요
올때메로나
document웹문서
.의
get:가져오다
Element:요소
ById:id에 의해서
innerHTML:내부 HTML , 내부 요소
= : 대입
웹문서 ID=hello인 HTML요소 가져와 내부 글자 안녕으로 바꿔줘
안녕하세요
올때메로나
document웹문서 .의 get:가져오다 Element:요소 ById:id에 의해서 innerHTML:내부 HTML , 내부 요소 = : 대입 웹문서 ID=hello인 HTML요소 가져와 내부 글자 안녕으로 바꿔줘이스케이프 표현
일반적인 출력 문자 외의 특수 문자는 이스케이프 표현을 사용해 적을 수 있습니다. 코드 출력 \XXX 8진수 Latin-1 문자 \' 작은따옴표 \" 큰따옴표 \\ 역슬래시 \n 줄바꿈 \r 캐리지 리턴 \v 세로 탭 \t 탭 \b 백 스페이스 \f 폼 피드 \uXXXX 유니코드 코드포인트 \u{X} ... \u{XXXXXX} 유니코드 코드포인트 \xXX Latin-1 문자 일부 다른 프로그래밍 언어와 달리, JavaScript는 작은따옴표와 큰따옴표 문자열을 구분하지 않습니다. 따라서 위의 이스케이프 문자는 작은따옴표나 큰따옴표에서 상관 없이 작동합니다.
주의 사항
- 조작하고 싶은 html이 있으면 그아래에 조작하는 코드를 작성해야 한다.
알람메시지
//'use strict'; 를 사용하면 유저 에러를 잡아준다- of Null: Null로 표시한 데이터의 왼쪽 값을 못찾앗다. 비엇다고 보면된다.
- is not a function:함수가 아닌데요~ 맞춤법확인.