jsの紹介(ES6)[一] --- Webページを動かすjs

JSを理解する方法

先ほど、ロボットの甲羅を作るようなhtmlの導入についてお話しましたが、甲羅がどんなに美しくても派手で、かっこいいロボットが欲しいし、家事やハードワークもしたいということも理解できます。

JavaScriptはネットワークスクリプト言語であり、一般的にWeb開発でWeb
の機能実現するために使用されます
。jsは解釈された言語です。C言語をコンパイルすると、次のコンパイルが成功し、exeファイルが表示され、exeファイルが実行されます。機械言語に直接コンパイルされますが、jsはコンパイルおよび実行されませんが、機械言語を直接生成する代わりに、実行中に解釈し、最初に中間コードを生成し、次にインタープリターが
ECMAScript 6.0を解釈して実行します。略してES6:はJSのバージョン標準です。 2015.06リリース。

重要なことは3回言われています、
JavaScriptES6のドキュメントをもっと読んで
ください

JS-Webページに命を吹き込む

簡単な小さな例で、jsの効果を理解できます。

まず、Webページに「顔」を付けます。
ここに写真の説明を挿入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.head{
     
     
				width: 180px;height: 130px;border: 1px solid black;
			}
			.hair{
     
     
				width: 180px;height: 30px;background-color: black;color: white;text-align: center;
			}
			.beard{
     
     
				width: 180px;height: 15px;background-color: black;color: white;text-align: center;position: relative;top: 62px;font-size: 5px;
			}
		</style>
	</head>
	<body>
		<div class="head">
			<div class="hair">头发</div>
			<div style="position: relative;left: 18px;top: 5px;">
				<input type="button" value="左眼" />
				<input type="button" value="右眼" style="position: relative;left: 50px;" />
				<input type="button" value="嘴巴" style="position: absolute;left: 50px;top: 50px;"/>
			</div>
			<div class="beard">胡子</div>
		</div>
	</body>
</html>

顔を動かします。
髪をクリックすると髪が消えます。
左目をクリックすると点滅する動きが表示されます。右目を
クリックして目を切り替えます。
口をクリックして話します(音声があり、アニメーションを表示できず、脳が自然に塗りつぶされます。音声コンテンツ:私はコードハスキーです。インターネットで見つけることができます。 mp3を単独で合成する、または独自のmp3ファイルを再生するオンライン音声合成)
ひげをクリックして驚きを持ってください
ここに写真の説明を挿入

	<body>
		<div class="head">
			<div class="hair" id="hair" onclick="noHair()">头发</div>
			<div style="position: relative;left: 18px;top: 5px;">
				<input type="button" value="左眼" id="leftEye" style="height: 22px;" onclick="blinkEye()"/>
				<input type="button" value="右眼" id="rightEye" style="position:absolute;left: 100px;" onclick="changeEyse()"/>
				<input type="button" value="嘴巴" style="position: absolute;left: 50px;top: 50px;" onclick="speak()"/>
			</div>
			<div class="beard" id="beard" onclick="changeBeard()">胡子</div>	
		</div>
		<script type="text/javascript">
		function noHair(){
     
     
			let hair = document.getElementById("hair");
			hair.style.backgroundColor = "white";
			setTimeout(function(){
     
     alert("头发都没有");},1000)
		}
		function blinkEye(){
     
     
			let leftEye = document.getElementById("leftEye");
			leftEye.style.height = "2px";
			setTimeout(function(){
     
     leftEye.style.height="22px"},100)
		}
		function changeEyse(){
     
     
			let rightEye = document.getElementById("rightEye");
			if(rightEye.type=="button"){
     
     
				rightEye.type = "image";
				rightEye.src = "./eye.PNG";
			}else{
     
     
				rightEye.type = "button";
			}
		}
		function speak(){
     
     
			let audio = new Audio("./speak.mp3");
			audio.play();
		}
		function changeBeard(){
     
     
			let beard = document.getElementById("beard");
			beard.innerText = "我是小可爱";
		}
		</script>
	</body>

面白くないですか?
私たちは自分で顔を定義し、顔の機能を定義します。
この記事から、jsの基本を学び始めます。
顔を動かしてみましょう!いい加減にして!オリがあげる!


JSの学習方法
詳細、練習詳細は、
JavaScriptマニュアルES6チュートリアルのドキュメントを参照して
ください。







  みなさん、こんにちは。私は「犬」であり、何千マイルも肉を食べることができるので、ソフトウェアカレッジのネットワークエンジニアリングの学生であるコードハスキーです。大学時代に学んだことをみんなと共有し、進歩していきたいです。ただし、レベルに限りがあるため、必然的にブログに間違いがありますので、抜けがありましたらお知らせください!当面は、csdnプラットフォームのブログホームページ(https://blog.csdn.net/qq_42027681)でのみ更新してください

未经本人允许,禁止转载

ここに写真の説明を挿入


後で発売されます

フロントエンド:vueエントリvue開発アップルレットなど。
バックエンド:javaエントリspringbootエントリなど。
サーバー:mysqlエントリサーバープロジェクトを実行するための簡単な指示クラウドサーバー
python:ウォームアップしないことをお勧めし
ます。いくつかのプラグインなどの使用を確認してください

大学のやり方も自分自身で、一生懸命勉強し、
情熱
ここに写真の説明を挿入を持って若くなります。プログラミングに興味がある場合は、QQグループに参加して連絡することができます:974178910質問がある場合は、以下にメッセージを残してください。それが表示されたら返信します。

おすすめ

転載: blog.csdn.net/qq_42027681/article/details/109712125
おすすめ