JavaScript

What is JavaScript?

A scripting language most often used for client-side web development

  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JavaScript 对网页行为进行编程

Different brands and/or different versions of browsers may support different implementations of JavaScript.

JavaScript:

• Validating forms before sending to server.

• Client-side language to manipulate all areas of the browser’s display, whereas e.g. servlets and PHPs run on server side.

• Event‐Driven Programming Model: event handlers.

• Heavyweight regular expression capability (out of scope here!)

• Interpreted language (interpreter in browser): dynamic typing.

• Functional object‐oriented language with prototypical inheritance (class free), which includes concepts of objects, arrays, prototypes …

image-20221101210525848

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

image-20221109102020089

Form Validation

使用 JavaScript 来验证提交数据（客户端验证）比将数据提交到服务器再进行验证（服务器端验证）用户体验要更好，因为客户端验证发生在用户浏览器中，无需向服务器发送请求，所以速度更快，而服务器端验证，需要先将数据提交到服务器，然后服务器再将结果返回给浏览器，用户需要等待服务器响应结果才能知道哪里出了问题。

<HTML>
  <HEAD>
    <SCRIPT>
     function validate(){
      if (document.forms[0].elements[0].value==“”) {
        alert(“please enter your email”);
        return false;
       }
      return true;
     }
     </SCRIPT>
</HEAD>
<BODY>
  <FORM method=“get” action=“someURL”
                     onSubmit=“return validate()”>
   <input type=text name=“email”>enter your email<br>
   <input type=submit value=“send”>
  </FORM>
 </BODY>
</HTML>

  • 在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

  • validate():在这段代码中判断输入是否为空如果为空调用alert（在浏览器中弹出一个警告框）

Variable names placed in section; can’t start with a number, have spaces or other punctuation.

<html>
<head>
<script>
var greeting=“Hello”;
</script>
</head>
<body>
<script>
document.write(“<FONT COLOR=‘magenta’>”);
document.write(greeting);
document.write(“<br>world!</FONT>”);
</script>
</body>
</html>
声明（创建） JavaScript 变量

通过 var 关键词来声明 JavaScript 变量：

var carName;

image-20221101214834422

在HTML中调用JS代码的方法

  1. JavaScript 代码必须位于 <script> 与 </script> 标签之间。

    <script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

​ 脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。

​ 在<head>中声明类及书写功能, 在<body>中调用功能

  1. 外部脚本

    脚本可放置与外部文件中：

    在 <script> 标签的 src (source) 属性中设置脚本的名称：

    <script src="myScript.js"></script>

document.write

document.write向文档中写入HTML表达式和JavaScript的代码。

document.writeln()输出结果相当于document.write()输出之后加空格(html源码中换行)

– writeln break on the page need to add adds a return character after the text string, but to get a line <br> 并不会换行

使用header也可以自动换行

– document.write(“

Top level header

”);

– document.write(“

Lowest level header
”);

文本中可以写入HTML标签

If just want a line break:

– document.write('<br>');

Dynamic Typing: type is defined by the literal value you assign to it

javaScript 拥有动态类型。这意味着相同的变量可用作不同的类型（取决于你赋的值）：

**值类型(基本类型)：字符串（String）、数字(Number)**、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)

变量的数据类型可以使用 typeof 操作符来查看：

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object

x=null; to identify a deliberately null or empty reference

If x is undefined, it has not been set a value (MUST define a value for a const).

Implicit conversion between types
image-20221101221555148 
<head>
  <script type=“text/javascript”>
    x = 0xF;
    y = true;
    z = false;
  </script>
</head>
<body>
  <script type=“text/javascript”>
    document.write("x+y = ");
    document.write(x+y);
    document.write("x+z = ");
    document.write(x+z);
   </script>
</body>
image-20221101223015118 
a = 1;
b = “20”;
c = a + b; // 120  b+a  201
c = a + (b-0); // 21
c = a + “”; //The empty string, forcing conversion into a string.

The number 0. JavaScript prefers numeric conversion with the minus (and prefers string conversion with +).

a+b=120

b+a=201

x = 7;
y = 4;
sum = x + y;
document.writeln(“<H1>x + y = ” + sum + “ </H1>”);
document.writeln(“<H1>x + y = ” + x+y + “ </H1>”);
document.writeln(“<H1>x + y = ” + (x+y) + “ </H1>”);
image-20221101224206449