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質問がある場合は、以下にメッセージを残してください。それが表示されたら返信します。