Day16 JavaScript基本教学(一)

JavaScript 语言 (JavaScript Programming Language)

JavaScript是目前广泛被用於 web 浏览器的脚本语言,属於直译语言,不需事先编译,直接在浏览器上执行。
JavaScript 语言也可以应用、实作在别的地方,最常见於web客户端浏览器。最初是由 Netscape 的 Brendan Eich 所开发设计,JavaScript 是一种动态、弱型别、基於原型的物件导向程序语言。此外,JavaScript是由ECMA Internation组织来制定标准,命名为ECMAScript。

JavaScript 是三个网页开发的基础语言的其中一个:
HTML: 描述网页的内容和架构
CSS: 描述网页介面如何被呈现
JavaScript: 描述网页的行为,让网页可以跟使用者和 server 互动

JavaScript的使用方式

开始介绍JavaScript之前,务必先了解网页html的基本概念,html就像是我们人的身体四肢,而JavaScript就像是我们的行为举止,两者是密不可分,他们运作的方式比如部落格上面搜寻框,当你点击搜寻图案,JavaScript就会控制搜寻框框出现,如果在点击搜寻框以外区域则是会消失。

html与JavaScript的互动关系
只要使用一般文字编辑器,例如记事本,就可以编辑撰写JavaScript,只要将写好的档案,副档名命名成.js即可,或者是直接写在html档案里面。也可以下载前端开发神器sublime text,可以协助你更便利写出JavaScript。一般来说,在html档案内的JavaScript撰写方式:

写在head里

<!DOCTYPE html>
   <html lang="en">
    <head>
     <meta charset="UTF-8">
      <title>Document</title>
   <script>
       alert("Hello World")
   </script>
</head>

透过外部引入的方式,让js档案执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/main.js"></script>
</head>

JavaScript基本功能介绍

运算子、变数、函数

程序语言在运算的过程速度非常快,但是要让程序语言理解计算公式,就需要透过运算子。运算子是一种运算符号,有赋值运算子、算数运算子、比较运算子、逻辑运算子,像是赋值运算子就是以「=」符号来表示,可指定特定值到指定的变数里面。

1.赋值运算子( 等於= ) :

var name="Tom";

2.算数运算子 (加+ 减 – 乘 * 除 / )

var sum=1+3;

3.比较运算子(大於> 小於<)

var age=23;
    var result=age>20;
    // result:true
    console.log(result);

4.逻辑运算子(and &, OR |):

var a=true;
var b=true;
    var logic=a && b;
    // logic:true
    console.log(logic);

变数是将指定值指定在特定空间,同时可以任意命名变数的名称,像是赋值运算子中的「name」就是一种变数命名,变数在JavaScript中是有分为「全域变数」与「区域变数」,全域变数基本上在定义完,就可以在档案中任何一处使用,区域变数则是指在特定功能内定义後,范围就限定在该功能内,一旦出了这功能模组外,区域变数就不能使用。
既然JavaScript可运算、也可以自定义变数,那将这些功能统整在一起的话,就可以发挥更好的效果,这样整合功能就叫做函数。函数(function)可以将一程序区块的功能,透过参数的传递,产出预期的结果,这在JavaScript的程序设计中扮演非常重要的角色。

函式宣告通常包含三个部分:

  • 函式名称,例如以下程序码「sum」
  • 参数(argument),位置在函式的()内,如以下程序码「a」、「b」则是参数
  • 可重复执行的区块内,位置在函式的{}内
function sum(a,b) {
    result=a*b;
    return result;
}
sum(5,4)

函式会透过return的功能将值回传,因此下sum(5,4)指令时,就会得到数字20。


<<:  DAY15 注册按钮功能实现

>>:  [13th][Day22] multistage

Day22-大量图片的页面(下)_利用hover搞点漂亮的

承昨天的继续 接着就进入美化的部分 首先最重要的是要让图片符合我们的框框大小 先将包裹所有内容的.a...

剪裁与遮罩-30天学会HTML+CSS,制作精美网站

有时候在制作区块时,会希望用不规则的形状呈现,以前会将图片制作成不规则形状,在放到html里面,或是...

从 JavaScript 角度学 Python(22) - GitHub API

前言 前面我们已经学习了不少的 Python 新知识,所以也差不多该到了实作一下前面的知识点,这样子...

[Day23] TS:谈谈让人又爱又恨的 enum

在 TypeScript 中,enum 算是还蛮常会使用到的型别,但有时如果用的不好或观念不够清楚...

D12 使用者个人文件页

首页完成後 让使用者可以进入使用者个人文件页 列出属於此使用者的文件 我已经先用测试网页塞了测试资料...