<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// 전역변수
var vscope = 'global';
function fscope(){
alert(vscope);
}
function fscope2(){
alert(vscope);
}
fscope(); // global
fscope2(); // global
</script>
</body>
</html>
▶ function()은 함수이다. 뒤에 자세하게 배울 예정
1-2. 지역변수
특정 함수 내에 선언되는 변수이다. 유효성의 범위를 벗어나면 사용이 불가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var vscope = 'global';
function fscope(){
// 지역변수
var lv = 'local val';
alert(lv);
}
fscope(); // local val
// 지역변수를 유효성 밖에서 사용할 시
// alert(lv); // Uncaught ReferenceError: lv is not defined 에러 발생
</script>
</body>
</html>
1-3. 지역변수와 전역변수를 동시에 정의했을 때
지역변수와 전역변수가 동시에 정의되어 있다면, 지역변수가 우선시 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var vscope = 'global';
function fscope(){
var vscope = 'local';
alert('함수 안' + vscope);
}
fscope(); // 함수 안 local
alert(vscope); // global
</script>
</body>
</html>
▶ 전역변수 vscope와 함수 fscope() 안 지역변수 vscope가 있을 때, 함수를 호출하면 지역 변수 vscope가 출력이 되고, 밖에서 vscope를 호출하면 전역변수 vscope가 출력된다.
1-4. 변수 재할당
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var vscope = 'global';
function fscope(){
// vscope에 재할당
vscope = 'local';
alert('함수 안' + vscope);
}
fscope(); // 함수 안 local
alert('함수 밖' + vscope); // 함수 밖 local
</script>
</body>
</html>
▶ 전역변수 vscope에 값 'global'이 할당되어 있고, 함수 fscope() 안에서 vscope에 값 'local'을 재할당해준다.
▶ 지역변수를 선언한 것이 아니라 기존 전역변수에 값을 재할당한 것이기 때문에, 함수 밖에서도 'local'이 출력된다.
2. let, const
var로 변수 선언 시, 같은 이름의 변수 재선언이 가능하다. 이 경우 바꾸면 안 될 변수를 바꾸게 될 위험이 있다.
var name = 'html';
console.log(name);
var name = 'javascipt';
console.log(name);
때문에 ES6 이후, 이를 위해 추가된 변수 선언 방식이 let과 const이다.
// let
let name = 'html';
console.log(name);
let name = 'javascipt';
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared
// const
const name = 'html';
console.log(name);
const name = 'javascipt';
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared
2-1. let, const의 차이점
let : 변수에 재할당이 가능하다.
const : 변수 재선언이나 변수 재할당이 모두 불가능하다.
따라서 재할당이 필요한 경우 let을 사용하고, 재할당이 필요없는 상수와 객체에는 const를 사용한다.
[예제 코드]
// let
let name = 'html';
console.log(name);
// 재선언 시 error 발생
let name = 'javascript';
console.log(name); // Uncaught SyntaxError: Identifier 'name' has already been declared
// 재할당
name = 'react';
console.log(name);
// const
const name2 = 'html2';
console.log(name2);
// 재선언 시 error 발생
const name2 = 'javascipt2';
console.log(name2); // Uncaught SyntaxError: Identifier 'name2' has already been declared
// 재할당 시 error 발생
name2 = 'react2';
console.log(name2); // Uncaught TypeError: Assignment to constant variable.
var 키워드로 선언하고, 사용하고자 하는 변수의 이름을 지정한 뒤 세미콜론(;)으로 한 라인을 종료
var num;
var hello;
1-2. 변수의 할당
선언된 변수에 원하는 값을 대입하는 과정을 의미한다.
num = 12345;
hello = "안녕하세요";
1-3. 선언과 할당의 통합
선언을 위한 라인과 할당을 위한 라인은 한 줄로 표현 가능하다.
var num = 12345;
var hello = "안녕하세요";
*** 문자는 큰 따옴표(") 혹은 작은 따옴표(') 중의 하나로 감싸야 한다. 큰 따옴표로 시작하면 큰 따옴표로 끝나야 하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다.
[ 예제 코드 1 ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// 변수의 선언
var num1;
var msg1;
// 변수의 할당
num1 = 12345;
msg1 = "Hello javascript";
// 변수의 선언과 할당
var num2 = 3.14;
var msg2 = "자바스크립트";
// 브라우저 콘솔 영역에 출력
console.log(num1);
console.log(num2);
console.log(msg1);
console.log(msg2);
console.log(2*8);
// boolean 값 사용
var isMan = true;
console.log(isMan);
// null값
var value1 = null;
console.log(value1);
// undefined 출력됨 - 선언만 된 상태
var value2;
console.log(value2);
var msg3 = '문자열 선언';
console.log(msg3);
// typeof : 데이터타입 확인
console.log( typeof msg3 );
console.log( typeof num1 )
</script>
</body>
</html>
[출력 결과 1]
► 변수 선언 시 데이터 타입 구별이 필요없다.
► 할당된 값 대로 console 창에 잘 출력된다.
► 2*8 같은 단순 계산식도 알아서 계산하여 콘솔창에 출력한다.
► null 값 할당시 그대로 null 값이 출력된다.
► 변수만 선언하고 값을 할당하지 않으면 'undefined'로 출력된다.
► 'typeof'를 사용하면 변수의 데이터 타입을 확인할 수 있다.
[예제 코드 2]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var first = "coding";
console.log(first + "javascript");
var a = 'coding', b = 'everybody';
console.log(a+b);
a = '코딩';
console.log(a+b);
// 세미콜론이 없어도 엔터로 구분 시 오류없이 작동
var c = 1
console.log(c)
// var d = 1 console.log(d)는 안됨
</script>
</body>
</html>
[출력 결과 2]
► 자바와 마찬가지로 문자열끼리 '+'를 사용하여 합칠 수 있다.
► 문자열과 숫자를 더할 경우 숫자가 문자열 형태로 변환된다. > "안녕" + 1234 = "안녕1234"
► 예제의 'a = '코딩'' 처럼 값을 재할당하는 것이 가능하다.
► 세미콜론(;) 없이 엔터로만 구분해줘도 정상 작동되지만, 예제의 'var d = 1 console.log(d) '처럼 붙여 쓸 수는 없다.
단항 연산자 : 어떤 변수(x)의 값에 대한 결과를 다시 자기 자신에게 대입하고자 하는 경우에 대한 약식 표현 +=, -=, *=, /=, %=
증감 연산자 : 단항 연산자로 표현할 수 잇는 식에서 계산에 대한 값이 1인 경우, 덧셈과 뺄셈에 대해서는 다시 한 번 축약할 수 있다. 덧셈) x = x + 1 > x += 1 > x++; or ++x; 뺄셈) x = x - 1 > x -= 1 > x--; or --x;
[예제 코드 1 - 사칙 연산자]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
// 사칙연산
var num1 = 100 + 30;
var num2 = 100 - 30;
var num3 = 100 * 30;
var num4 = 100 / 30;
var num5 = 100 % 30;
console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);
console.log(num5);
</script>
</body>
</html>
비교 연산자(== or !=) 프로그래밍에서 비교란 주어진 값들이 같은 지, 다른 지, 큰 지, 작은 지를 구분하는 것을 의미한다. 이 때 비교 연산자를 사용하는데, 비교 연산자의 결과는 true나 false이다. 자바 스크립트에서는 비슷한 것을 같은 것을 간주하기도 한다. ex. console.log(1 == '1') > true
일치연산자(=== or !==) 좌우가 정확하고 엄격하게 같을 때 true, 아니면 false이다.
[예제]
프로그램에서 true는 1, false는 0으로 취급한다.
2-3. 논리연산자(&& , ||)
[예제 - &&]
▶ 둘 모두 참이어야 한다.
둘 다 true인 경우에만 console에 출력된다.
[예제 - ||]
▶ 둘 중 하나만 참이어도 참이다.
2-4. 삼항연산자
condition ? expT : expF
condition : 조건문으로 들어갈 표현식
expT : 참일 때 실행할 식
expF : 거짓일 때 실행할 식
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var age = 13;
var beverage = (age >= 21) ? "Beer" : "Juice";
document.write(beverage);
</script>
</body>
</html>
document.write(출력 내용); - html 페이지의 <body> 태그 안을 자바스크립트에서는 document(=문서)라고 부른다. - <body> 태그 안에 새로운 내용을 출력하고자 할 경우, 자바스크립트에 write라는 명령어를 전달한다. - html 태그를 포함하여 출력할 수 있다.
[출력 결과]
▶ age가 21보다 크다면? 참일 때 "Beer" 출력, 거짓일 때 "Juice"가 출력된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var id = prompt('아이디를 입력해 주세요');
var pw = prompt('패스워드를 입력해 주세요');
if( id == 'usertest' && pw == '1234' ) {
alert('인증했습니다.')
} else {
alert('인증에 실패했습니다.')
}
</script>
</body>
</html>
▶ prompt() 함수는 사용자에게 입력을 요청하는 프롬프트 상자를 화면에 표시하기 위해 사용된다.
[출력 결과 2]
4. 반복문
for문
while문
▶ 기본 구조는 java와 같기 때문에 바로 문제를 풀어보았다.
[ 예제 코드 ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
/*
1. 1부터 100까지 더하는 코드 작성, 결과값을 화면에 출력
*/
var sum = 0;
for(var i = 1; i<=100; i++){
sum += i;
}
console.log(sum);
/*
2. 1부터 10까지 곱하는 코드 작성, 결과값을 화면에 출력
*/
var mult = 1;
for(var j = 1; j<=10; j++){
mult *= j;
}
console.log(mult);
/*
3. for문을 사용하여 0부터 10까지 정수 중에
짝수만을 작은 순서부터 결과 값을 화면에 출력
*/
var num = 0;
for(num = 0; num<=10 ; num++){
if(num%2==0){
console.log(num);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#column{
/* column-count:2;
column-count는 단을 몇 개로 나눌지 결정하는 요소
설정되어 있지 않는 경우 자동으로 단이 나눠진다. */
/* 한 단의 넓이 설정 */
column-width: 200px;
text-align: justify;
/* 단 사이의 거리 */
column-gap: 30px;
/* 컬럼 줄 디자인 요소 */
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: tomato;
}
h1{
/* 요소가 모든 열에 걸쳐 있음을 뜻함 */
column-span: all;
}
</style>
</head>
<body>
<div id = "column">
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
<h1>There are many variations of</h1>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</div>
</body>
</html>
[출력 결과]
column-count가 주석처리 되어있으므로 단 수는 브라우저 넓이에 따라 자동으로 출력된다.
이미지를 화면의 우측(float: right;) 혹은 좌측(float: left;)에 고정시켜 놓고 텍스트가 그 옆을 흐르듯이 지나가도록 처리하는 것이다.
[예제 코드 1 - float이 없을 때]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img{
width: 300px;
margin: 20px;
}
</style>
</head>
<body>
<img src="cat.jpg">
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
</body>
</html>
[출력 결과 1]
[예제 코드 2 - float이 적용되었을 때]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img{
width: 300px;
float: left;
margin: 20px;
}
</style>
</head>
<body>
<img src="cat.jpg">
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
</body>
</html>
[출력 결과 2]
1-1. float 속성의 특징1
두 개의 박스가 서로 다른 값을 갖는 경우, 박스가 양쪽에 배치된다.
두 박스의 넓이 합이 부모를 가득 채우면, 한 줄을 양분하는 효과를 얻는다.
[예제 코드 1 - 두 개의 박스가 서로 다른 값을 갖는 경우]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div#box1{
width: 30%;
height: 200px;
background-color: tomato;
float: left;
}
div#box2{
width: 30%;
height: 200px;
background-color: powderblue;
float: right;
}
</style>
</head>
<body>
<div id = "box1">박스1</div>
<div id = "box2">박스2</div>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
</body>
</html>
[출력 결과 1]
[예제 코드2- 두 개의 박스 넓이가 부모를 가득 채우는 경우]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div#box1{
width: 30%;
height: 200px;
background-color: tomato;
float: left;
}
div#box2{
width: 70%;
height: 200px;
background-color: powderblue;
float: right;
}
</style>
</head>
<body>
<div id = "box1">박스1</div>
<div id = "box2">박스2</div>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
</body>
</html>
[출력 결과 2]
1-2. float 속성의 특징2
float 속성은 서로 문단이 다르더라도 이후에 명시되는 모든 요소에 대하여 영향을 준다.그러므로 문단을 다르게 주고 싶다면, float 속성이 사용된 후 이 기능을 off 해주어야 한다.
[예제 코드 1 - clear 기능 적용 전]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#box1, #box2{
width: 300px;
padding: 10px;
border: 1px solid gray;
}
img{
width: 100%;
}
#box1{
margin: 0 10px 10px 0;
float: left;
}
#box2{
margin: 0 0 10px 10px;
float: right;
}
</style>
</head>
<body>
<div id="box1">
<img src="cat.jpg">
</div>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
</p>
<div id="box2">
<img src="cat.jpg">
</div>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
</body>
</html>
[출력 결과 1]box1과 box2가 구분되지 않는다.
[예제 코드 2 - clear 기능 적용 후]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#box1, #box2{
width: 300px;
padding: 10px;
border: 1px solid gray;
}
img{
width: 100%;
}
#box1{
margin: 0 10px 10px 0;
float: left;
}
#box2{
margin: 0 0 10px 10px;
float: right;
}
/* 앞에 속성을 통으로 해제하는 값. 통째로 외워두기 */
.clear{flat: none; clear:both;}
</style>
</head>
<body>
<div id="box1">
<img src="cat.jpg">
</div>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
</p>
<div class="clear"></div>
<div id="box2">
<img src="cat.jpg">
</div>
<p>
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour,
or randomised words which don't look even slightly believable.
If you are going to use a passage of Lorem Ipsum, you need to be sure
there isn't anything embarrassing hidden in the middle of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
as necessary, making this the first true generator on the Internet.
It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
</body>
</html>
