[Ellisswエンジニアトラック]6日目Javascript
28871 ワード
第6課
2週目の授業が始まりました.今週はHTMLやCSSではありません
先週と違ってJavascriptを習い始めました
私の意図は急速に上昇したようだ.授業中も何なのか分かりません.
ぼんやりしている時間が多いようです!
n/a.理論
JavaScript:Web上の動作を記述する部分、オブジェクトベース、中間言語
interpreter:ソースコードを行ごとにマシン言語(コンパイラx)に変更し、エラーの修正が困難
速度:コンパイラ>割り込み
ECMAScript(ES):技術仕様によって定義される汎用スクリプト言語
inline方式:指定した属性値に入力し、短い内容を作成します.
内部方式:scriptラベル内で使用し、順序に注意
external方式:スクリプトラベルのプロパティファイル名を記録し、順序に注意
デバッグ方法:consoleはブラウザのデバッグコンソールを表します
var:宣言変数
let:(ES 6から)変数を宣言
const:(ES 6から)不変の変数(定数)を宣言
varとletの違い:varはメモリの割り当て時に直ちにundefinerの値を持つが、letはメモリの割り当て時に値を定義していない
シース-コードが実行される前に、変数/関数の糸魚がスキャンの最上位に引きずられたようです.
文字列:またはで囲まれて使用され、複数行を定義するときに改行できます.
テンプレート文字:`(backtic)、${}を使用して変数値を直接挿入できます
関数かんすう:コードブロック化、関数宣言による任意の場所での使用
条件文(if-else):条件は複数に分けられます.前の条件を満たさない場合は、次の条件の形式を確認します.
繰り返し文(for while):繰り返し操作が必要な場合は、for whileを選択します.
continue:この点から次の反復に直接ジャンプ
break:重複文を直ちに終了
//modal:ページング1111
onclick:定義された属性;クリック時にJavaScriptを実行する
oncontextmenu:右クリック
onchange:値が変更された場合
onmouseover:マウスが上昇すると
onkeyup:キーボードが壊れたとき
onkeydown:キーボードを押すと
onfocus:フォーカスが移動している場合(フォーカスがある場合は無限に実行)
イベント:インライン、プロパティ、addEventListener(繰り返し可能)
≪取得｜Capture｜emdw≫:イベントの実行時にサブタイプに伝播する現象(真)
Bubbling:アクティブな実行時に親タイプに伝播する現象
DOM:ドキュメントをスクリプトで使いやすいオブジェクトにオブジェクト化し、各タグをノードのコンセプトに変更し、ツリーを各ノードに接続します.
ドキュメントノード:ドキュメント全体を表すノード
要素ノード:すべてのHTML要素のハイライト要素ノード(属性ノードのみ)
属性ノード:すべてのHTML要素の属性
テキストノード:すべてのHTMLのテキストはテキストノード
appendChild:存在しない要素を追加できます.逆も同様です.
inner:
数字と文字を加えると、数字は文字列に変換されます.
どうして.すべての文字は数値に変換できませんが、すべての数値は文字列に変換できます.
+以外のすべての演算子は文字列を数値に置き換えます.
実習
アイコンをクリックする前に
クリックすると、画面全体の背景が透明に大きく開きます.
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>나의 이력서</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
<script src="test.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li class="menu-btn"><a href="#">홈</a></li>
<li class="menu-btn"><a href="#">이력서</a></li>
<li class="nav-space"></li>
<li>/*elice*/</li>
</ul>
</nav>
</header>
<h1 id="title">이력서</h1>
<h2>오경찬</h2>
<div class="profile">
<img
src="C:\Users\dhrud\Desktop\KakaoTalk_20220406_165117206.jpg"
alt="프로필 사진"
width="400"
height="500"
onclick="showProfileModal()"
/>
</div>
<div class="profileModal">
<img
src="C:\Users\dhrud\Desktop\KakaoTalk_20220406_165117206.jpg"
alt="프로필 사진"
onclick="hideProfileModal()"
/>
</div>
<div class="container1">
<div class="item item1">
<h3>오경찬은요</h3>
<div><strong>인적사항</strong> : 1996.12.2 | A형</div>
<div><strong>주소</strong> : 부산광역시 동구 홍곡로 50</div>
<div><strong>연락처</strong> : [email protected]</div>
</div>
<div class="item item2">
<h3>오경찬의 발자취</h3>
<ul>
<li>2015.03 ~ 2019.02 : 울산대학교 | 울산 | IT융합</li>
<li>2019.03 ~ 2021.06 : 11공수특전여단 | 담양</li>
</ul>
</div>
<div class="item item3">
<h3>오경찬의 활약</h3>
<ol>
<li>탄생</li>
<li>장교출신</li>
</ol>
</div>
<div class="item item4">
<h3>오경찬의 스킬</h3>
<ul>
<li><a href="https://">HTML</a></li>
<li><a href="https://">CSS</a></li>
<li><a href="https://">JAVASCRIPT</a></li>
</ul>
</div>
</div>
<footer>
<p>
주소: 부산광역시 | 전화 : 010-1234-1234 | 이메일 :
[email protected]<br />
Copyright ⓒ 1996 - 2022 chan. All rights reserved.
</p>
</footer>
</body>
</html>
body{
margin: 0;
padding: 0;
}
nav {
background-color: #333;
}
nav ul{
display: flex;
margin: 0;
padding: 0;
}
nav ul li{
list-style: none;
/* text-decoration: none; */
margin-left: 20px ;
padding: 20px 0;
text-align: center;
color: white;
font-size: 14px;
/* transition: all 0.4s ease-out; */
}
/* 링크 선색상 */
nav ul li :link{
color: white;
text-decoration: none;
}
/* 방문된 링크 색상 */
nav ul li :visited{
text-decoration: none;
color: white;
}
nav .nav-space {
flex-grow: 1;
}
.menu-btn {
transition: all 0.4s ease-out;
}
.menu-btn:hover {
background-color: #111;
letter-spacing: 4px;
}
main{
padding: 32px;
}
nav ul li :hover{
letter-spacing: 4px;
background-color: black;
}
#title {
display: none;
}
#name {
font-size: 80px;
}
.profile{
overflow: hidden;
/* 크기넘어가는건 짜르기 */
width: 500px;
height: 500px;
}
.profile img {
width: auto;
height: 100%;
transform: translate(0,0);
transition: all 0.6s ease-out;
}
.profile img:hover {
width: auto;
height: 110%;
transform: translate(-5%,-5%);
/* 화면에 올렸을때 0,0 처음시작 부분에서 키우는게아니라
110%키웠으니 중앙에서 커지게 만들어줌 */
}
.profileModal{
display: none;
/* 클릭했을때 나오게 만듬 */
place-items: center;
/* 좌우 센터 */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 999;
background-color: rgba(0,0,0,0.7);
}
.profileModal img {
width: 100%;
cursor: pointer;
}
h1{
font-family: 'Black Han Sans', sans-serif;
}
h2{
font-family: 'Black Han Sans', sans-serif;
}
h3{
font-family: 'Black Han Sans', sans-serif;
}
.container1{
display: grid;
grid-template-columns: 1fr 1fr;
}
footer{
padding: 2px;
background-color: rgb(204, 204, 204);
text-align: center;
}
@media (max-width: 768px) {
.container {
display: block;
}
.profile {
width: 400px;
}
.profile img {
width: 400px;
height: auto;
}
.profile img:hover {
width: 110%;
height: auto;
}
}
function showProfileModal() {
document.querySelector('.profileModal').style.display = 'grid';
}
function hideProfileModal() {
document.querySelector('.profileModal').style.display = 'none';
}Reference
この問題について([Ellisswエンジニアトラック]6日目Javascript), 我々は、より多くの情報をここで見つけました https://velog.io/@emong_96/엘리스-sw-엔지니어-트랙-6일차-Javascriptテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol