Contenu connexe
Similaire à Javascript1-1
Similaire à Javascript1-1 (20)
Javascript1-1
- 1. 1
JavaScript 1
JavaScriptはホームページやアプリ上で写真をクリックすると写真が
拡⼤大される等、主に「動き」を司るプログラミング⾔言語です。
JavaScriptを⽤用いることでサイトやアプリをより表現豊かにすること
ができます。
また、iPhone,AndroidアプリもJavaScriptを⽤用いて開発することも可
能で、今、最も注⽬目されている⾔言語の1つです。
Copyright (c) 株式会社HEART QUAKE All rights reserved .
- 2. 2
JavaScriptとは (1/2)
l JavaScriptとは
- 1995年年に登場した⽐比較的古いプログラミング⾔言語
- Javaというプログラミング⾔言語とは全くの別物
- PHP等はサーバー側で動作するサーバーサイドプログラミ
ング⾔言語なのに対して、JavaScriptはブラウザ上で動作す
るクライアントサイド、または、フロントサイドと呼ばれ
る。
ネットワークネットワーク
ソフトウェア
クライアントサーバー
Copyright (c) 株式会社HEART QUAKE All rights reserved .
php等は
サーバーで実⾏行行される
JavaScriptは
ブラウザで実⾏行行される
- 3. 3
JavaScriptとは (2/2)
l JavaScriptはHTMLプログラム内に記述することができます。
l HTML,JavaScriptを記述し、拡張⼦子を.htmlに変えて保存した
ものを、ブラウザで開けば出来上がり。
今回はhellojs.htmlという名前で保存してください。
html
head
meta charset=utf-8
titleウェブページのタイトル/title
script
alert(Hello World);
/script
/head
body
ウェブページを作成しました!
/body
/html
Copyright (c) 株式会社HEART QUAKE All rights reserved .
ブラウザで表⽰示すると
ポップアップが表⽰示される
- 4. 4
私たちが使う⾔言語のことは「⾃自然⾔言語」といいます。
Copyright (c) 株式会社HEART QUAKE All rights reserved .
プログラムとは
l プログラムとは…
- コンピュータに対する指⽰示命令令書
ü 「コンピュータで計算する」 ではなく「計算させる」
l プログラミング⾔言語とは…
- コンピュータに指⽰示するために使⽤用される⾔言語
l プログラム⾔言語にはたくさんの種類があります
A / A+ / ABAP / ABC / ABCL / ActionScript / ActiveBasic / Ada / Ada 95 / Agena / AHDL / ALGOL / Alice / APL / AppleScript / as / ash / AutoIt / AWK / B / Bash / BASIC /
BCPL / Befunge / BLISS / Boo / BrainCrash / Brainfuck / C / C# / C++ / C@ / Caml / CAP-X / CASL / Cecil / CFScript / Cg / Chef / CHILL / Clipper / Clojure / CLU /
COBOL / ColdFusion / Common Lisp / Component Pascal / Concurrent Clean / Concurrent Prolog / Constraint Handling Rules / CPL / csh / Curl / Curry / Cω / D /
Delphi / DMDScript / Dylan / ECMAScript / Eiffel / Enterprise Generation Language / Erlang / Escapade / Esterel / Euclid / Euphoria / F# / False / Fantom / Ferite / Ficl /
Flavors / Forth / FORTRAN / Fortress / Gas / GLSL / Go / Groovy / Guarded Horn Clauses / Haskell / HLASM / HLSL / HOLON / HSP / HQ9+ / HQ9F+ / HyperTalk /
Icon / IDL (interactive data language) / Inform / InScript / INTERCAL / Io / IPL / ISWIM / J / Java / JavaScript / JavaFX Script / JHDL / JScript .NET / KL1 / KEMURI /
KRC / ksh / LabVIEW / Lazy K / Light Game Programming / Limbo / Linda / Linden Scripting Language (LSL) / Lingo / Lisaac / LISP / LOGO / Lola / LotusScript / Lua /
Lucid / Lush / Lustre / Malbolge / Mana / MASM / Mathematica / Mercury / Mind / Miranda / Misa / MixJuice / ML / Modula-2 / Modula-3 / MONAmona / Mops / MSIL / M
言語 / NASM / Nemerle / Noop / Oberon / Oberon-2 / Object Pascal / Object REXX / Object Tcl (OTcl) / Objective-C / Objective Caml (OCaml) / Occam / Ook! /
OpenOffice.org Basic / OPS / Oz / Pacbase / PARLOG / Pascal / PBASIC / Pd (pure data) / PCN (program composition notation) / Perl / PHP / Pic / Piet / Pike / PL/0 /
PL/I / Planner / pnuts / PostScript / Processing / Prolog / Pxem / Python / QtScript / R / REALbasic / REBOL / REXX / roff / RPG / Ruby / SAL / SASL / Sather / Scala /
Scheme / Self / SFL / sh / Shakespeare / Simula / Simulink / SISAL / SKILL / Smalltalk / SNOBOL / Squeak / Squirrel / superC / SystemC / SystemVerilog / t3x / TAL /
Telescript / TeX / Tcl / tcsh / Tenems / TL/I / Tonyu System / TTS / TTSeno / Turing / Unlambda / UnrealScript / VBScript / Visual Basic .NET / Whitespace / Verilog
HDL / VHDL / WICS / Whirl / Windows PowerShell / WMLScript / XQuery / XSLT …
- 5. 5
srcipt
alert(Hello World);
alert(もう1⾏行行。n バックスラッシュnで改⾏行行できます);
/script
Copyright (c) 株式会社HEART QUAKE All rights reserved .
Javascirptの書き⽅方のルール
開始タグと終了了タグ
l 開始タグと終了了タグ
- JavaScriptのスクリプトはscript という開始タグと、
- /scriptという終了了タグの内側に記述します。
l 命令令ごとにセミコロン(;)で区切切る
- 1つの命令令を終えるごとに「;」セミコロンで区切切ります。
- ⽇日本語で⾔言えば「。」英語では「.」と同じ扱いです。
- 6. 6
Copyright (c) 株式会社HEART QUAKE All rights reserved .
変数 (1/2)
l 変数
- 変数を使うことで、数値や⽂文字を⼀一回仮保存し、
あとから使うことができるようになります。
ブラウザ
answer
html
head
meta charset=utf-8
titleウェブページのタイトル/title
script
var number1 = 5 + 3;
var number2 = 5 – 2;
var answer = number1 + number2;
alert(answer);
/script
途中結果を箱に
/head
仮保存しておくイメージ
body
ウェブページを作成しました!
/body
/html
- 7. 7
Copyright (c) 株式会社HEART QUAKE All rights reserved .
変数 (2/2)
l 変数
- 名前のついた段ボール箱のこと
ü 正式には「値」を格納しておくためのメモリ上の領領域
- 変数のなかには、数値、⽂文字列列や配列列(後述)、その他
JavaScriptで扱うあらゆるデータを格納することができま
す。
- var とは variable (変えられる)の略略です
var box1 = 5; var box2 = 千葉葉順;
千葉葉順box2
- 8. l エラー内容を確認しよう!
- プログラミングを始めたばかりのころはエラーに頭を悩まされます。
8
上⼿手く動かなかったら
エラーの発⾒見見箇所を探せるようにしましょう。
- Google Chromeの、
ü 表⽰示 開発/管理理 JavaScriptコンソール で確認可能
Copyright (c) 株式会社HEART QUAKE All rights reserved .
7⾏行行⽬目が間違っているようだ