Daily Archives: 2022年10月21日

学科 JavaScript基礎①

-本日のアジェンダ-

1限目
学科 JavaScript基礎①
JavaScriptとは?

2限目
学科 JavaScript基礎①
Webの言語とは?

3限目
学科 JavaScript基礎①
課題制作

4限目
学科 JavaScript基礎①
課題制作

5限目
学科 JavaScript基礎①
課題制作

本日のテーマ

Javascriptという言語について理解していきましょう。

JavaScriptとは?

JavaScriptは、プログラミング言語であり、HTMLやCSSと並ぶ World Wide Webの中核技術の一つである。 プロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。

参考サイト

jQueryとは?

jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。

参考サイト

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

PHPとは?基礎知識、できることを初心者にもわかりやすく解説し …
10日で覚えるPHPのキソ(超基礎編) 第 1 回 PHPの約束事 …
今さら聞けない!PHP基礎知識や導入方法、書き方まとめ

JavaScriptの書き方

JavaScriptの書き方は、以下の2種類あります。
HTMLファイルに直接記述する方法
外部ファイルに記述してHTMLから呼び出す方法

記述のポイント(まずはこのルールを覚えときましょう!)

1.CSSと同じように<head>~</head>に外部ファイルへのリンクを記載
※1行目は、jQueryを使う為のファイル※バージョンがあるので注意

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”>
<script src=”jsmaster_01.js”></script>

あとは、該当するHTMLのタグにIDを付与し連動させるだけ!

2.外部ファイルを使わない場合は<script>~</script>の間に記載
※この場合、<body>~</body>の中でも使用可能(文法的にも可能)

<script>
$(function() {
var pageTop = $(‘#btn_to-top’);
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$(‘body, html’).animate({scrollTop:0}, 500, ‘swing’);
return false;
});
});
</script>

本日の課題

WordPressサイトに、本日学んだ内容を投稿ページにまとめてください。

第5回成績考査について

10月29日(土)の4限目終了までに、Webページを提出してください。
※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。