javascript基础

Posted 2023-04-28 jack-fire

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript基础相关的知识，希望对你有一定的参考价值。

一。JavaScript使用场景

1.改变内容 getElementById() 是多个 JavaScript HTML 方法之一，使用该方法查找元素ID，并且可以使用( innerHTML)属性改变元素的内容

2.改变HTML属性使用getElementById()的src属性改变src的值；

3.JavaScript 能够改变 HTML 样式 (CSS)

　　改变 HTML 元素的样式，是改变 HTML 属性的一种变种： document.getElementById("demo").style.fontSize= "25px";

4.JavaScript 能够隐藏 HTML 元素可以通过display样式显示或者隐藏HTML元素。

　　实例：

  document.getElementById("demo").style.display="none";
 
 document.getElementById("demo").style.display="block";

二,JavaScript使用

　　<script>标签

　　　　在HTML，Javascript代码必须位于<script>标签内

旧的JavaScript例子也许会使用script 的 "type = "text/JavaScript"的属性

script代码可以放在HTML内的<body>或,.<head>部分中，或都有都可以。

JavaScript 函数和事件

JavaScript函数是一种代码块，可以在调用时被执行。

当发生事件时调用函数，比如当用户点击按钮时，点击按钮设置一个函数，这就是一个事件

javascript外部脚本

脚本可放置到外部文件中，类似于css，结尾以JS结尾。
如需使用外部脚本，请在<script>标签的src(SOURCE)属性中设置脚本的名称。
外部脚本不能包含<script>标签

外部脚本的优势

分离了HTML和代码
使HTML和Javascript更易于阅读和维护；
已缓冲的JavaSCript文件可以加速页面加载；
*多个外部脚本文件，需要使用多个script标签；
可以通过完整的URL或相对于当前网页的路径引用外部脚本

Javascript输出

JavaScript不提供任何内建的打印或显示函数

JavaScript显示方案

使用 window.alert()写入警告框
使用document.write()写入HTML输出
使用innerHTML写入HTML元素
使用console.log()写入浏览器控制台

一：使用window.alert()

通过此方法可以跳出警示框显示数据。

<!DOCTYPE html>
<html>
<body>
<h1>第一行</h1>

<p>我的第一个段落</p>

<script>
window.alert(7 +  8)；
</script>
</body>
</html>

二：使用document.write()写入HTML输出

出与测试目的，使用document.write()比较方便，可以直接在代码出与文档的位置显示write的输出

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

演示效果

三.使用InerHTML写入元素

给元素的值赋值，可以更改元素的值，

如需访问html元素，JavaScript可使用document.getElementById(id)的方法。

实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

四：使用console.log()方法显示数据

通过调出浏览器控制台，可以看到在log方法显示的数据。

实例：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript语法

JavaScript语句是由值，运算符，表达式，关键字，注释组成
语句是按照编写的顺序一一执行的。
分号分隔每条语句；
有分号可以一行写多条语句。
不带分号也可以按行执行，但是不规范，不易读
如果语句太长，建议在某个运算符的地方进行折行
对大小写敏感
Javascript使用Unicode字符集

常见关键字

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

JavaScript注释

//或者/与/添加注释

变量

var关键字来声明变量
变量不需要赋值类型，解析器自己判断
变量未被赋值的值为undefined
重复声明变量值不会丢失
例如
var carName = "porsche"; var carName;

对比俩种赋值语句
var x = "8" + 3 + 5;结果：835
var x = 3 + 5 + "8";结果：88

作用域

分三种：全局作用域，函数作用域，块作用域。
全局作用域在函数外声明的变量
函数作用域在函数内声明的变量
块作用域在块内声明且使用关键字let。
实例

var x = 10;
// 此处 x 为 10
 
  let x = 6;
  // 此处 x 为 6

// 此处 x 为 10

let

对比let和var声明全局变量的不同

1.通过var 声明的变量是window对象可以引用，全局作用域就是window对象

var carName = "porsche";
// 此处的代码可使用 window.carName

let carName = "porsche";
// 此处的代码不可使用 window.carName

2.在循环中使用的变量使用let不能对循环外声明的变量重新赋值和声明，相当于俩个变量
举例:

let i = 7;
for (let i = 0; i < 10; i++) 
  // 一些语句

// 此处 i 为 7

/*var的作用域*/
var i = 7;
for (var i = 0; i < 10; i++) 
  // 一些语句

// 此处，i 为 10

3.通过var声明的变量会提升到顶端，在声明变量之前可以使用；通过let定义只有在定义它之后可以使用(升到顶端就是在碰到未定义的变量，解析器会先查找所有的定义)
举例：

//let
i = 7;
let i;//failed

l=8;
var l;

const

解释：const 作用域类似于let,但是const定义的变量必须在定义时初始化且值不可更改，但如果变量是一个复合对象的话，对象的属性值可以修改。

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：
在另外的作用域或块中重新声明 const 是允许的：
如果我们将一个原始值赋给常量，我们就不能改变原始值：
您可以更改常量对象的属性：
实例：


// 您可以创建 const 对象：
const car = type:"porsche", model:"911", color:"Black";

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

car = type:"Volvo", model:"XC60", color:"White";    // ERROR

//您可以更改常量数组的元素：
// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];

// 您可以更改元素：
cars[0] = "Honda";

// 您可以添加元素：
cars.push("Volvo");

运算符

1.JavaScript 算数运算符

运算符	描述
+	加法
-	减法
*	乘法
**	取幂运算符
/	除法
%	取模（余数）
++	递加
--	递减

2.JavaScript 赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

3.JavaScript 字符串运算符

运算符也可用于对字符串进行相加（concatenate，级联）。
+= 赋值运算符也可用于相加（级联）字符串：
对一个数字和一个字符串相加将返回一个字符串；
实例

txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2;

4.JavaScript 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

5.JavaScript 逻辑运算符

运算符	描述
&&	逻辑与

!	逻辑非

6.Java类型运算符

typeof :返回变量的类型；
instanceof:返回true,如果对象是对象类型的实例。

7.JavaScript位运算符

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
		或	5	1	0101
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

数据类型

JavaScript拥有动态类型，相同变量可以用作不同类型。

var x; //现在x 是一个未被定义（undefined）的变量
var x  = 7; //现在 x 是一个数值
var x = "FIRE"   //现在X是字符串值

var x = true;    //现在是布尔型

var cars = ["Porsche" , "Volvo" , "BMW"];   //现在是数组，数组引用从0开始

字符串被引号包围，可以使用单引或者双引号

JavaScript对象

1.JavaScript对象用花括号书写，对象属性是name:value对，用逗号分隔。
var person = firstName:"FIre" , lastname:"Jack" ,age:27 , eyecolor ：“block”;

typeof运算符

确定变量的类型:
实例:

typeof "Bill Gates"          // 返回 "string"

typeof 3.14                // 返回 "number"

数组和对象返回"object"
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
null 的数据类型是对象,通过设置值为 null 清空对象.
typeof function myFunc() // 返回 "function"

JavaScript函数语法

JavaScript函数通过function关键字定义，其后是函数名和括号(参数1，参数2，....);
内是要执行的代码

函数调用

当事件发生时(用户点击按钮)
当JavaScript代码调用时
自动的(自动调)

函数返回

当JavaScript到达return语句，函数停止并返回值

toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

对象

值以名称:值对的方式来书写（名称和值由冒号分隔）。JavaScript 对象是被命名值的容器。
对象也可以有__方法__
方法以函数定义被存储在属性中
实例:

var person = 
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() 
    return this.firstName + " " + this.lastName;
  
;

在方法中可以使用当前对象的属性，通过__this__关键字。
访问对象属性是以俩种方法
1. objectName.propertyName
2. objectName["propertyName"]
访问对象方法:需要加();
可以使用关键字 __"new"__来声明变量，该变量会被创建为对象。

var x = new String();        // 把 x 声明为 String 对象
var y = new Number();        // 把 y 声明为 Number 对象
var z = new Boolean();       //	把 z 声明为 Boolean 对象

//　请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

事件

当 HTML　页面有交互的一些事情
举例：HTML页面完成加载，输入字段被修改，按钮被点击。

＊　__通过JavaScript代码__，HTML允许您向HTML元素添加事件处理程序
<element event = \'一些 JavaScript\'>
<button onclick=\'document.getElementById("demo").innerHTML=Date()\'>现在的时间是？</button>

常见的HTML事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

字符串

(变量名）.length 可以返回字符串的长度。

特殊字符使用转移字符____进行转移。
字符串中换行，可以通过一个反斜杠。
字符串可以是对象。使用new String("（常量）");

关于字符串的内置方法

indexOf(字符串，开始位置)返回字符串中指定文本首次出现的索引。
var str = "The full name of China is the People\'s Republic of China.";
var pos = str.indexOf("China");
lastIndexOf(字符串，结束位置)方法返回指定文本在字符串中最后一次出现的索引。
search(字符串)：search() 方法搜索特定值的字符串，并返回匹配的位置

search可以设置更强大的搜索值（正则表达式）

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 字符串</h2>

<p id="demo"></p>
<p id ="demo1"></p>

<script>
var x = \'Bills Gates\';  // 用引号包围的字符串
var lx = x.length;
var inx = x.lastIndexOf(\'s\',9);
var shx = x.search(\'Gate\');
document.getElementById("demo").innerHTML = lx;
document.getElementById("demo1").innerHTML = shx;

</script>

</body>
</html>

slice(start,end)
slice()提取字符串的某个部分并在新字符串中返回被提取的部分,若参数是负数，则从结尾开始计数。

若省略第二个参数，则该方法将裁剪字符串的剩余部分。
substring(start, end);
类似于slice(),但是不接受负的索引。
substr(start,length);
第二个参数规定被提取部分的长度。
第二个参数可以省略。
replace(被替换的值，新值)
replace() 方法不会改变调用它的字符串
返回新字符串
默认对大小写敏感。默认只替换首个匹配
通过正则表达式可以修改默认值

//使用i让大小写不敏感
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");
//使用`g`标志替换所有匹配
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

concat()连接俩个或多个字符串，代替加运算符，等效。
trim()方法删除字符串俩端的空白符；
charAt(位置)方法返回字符串中指定下标的字符串。
str.charAt(0); // 返回 H
charCodeAt()方法返回字符串中指定索引的字符unicide编码。
str.charCodeAt(0); // 返回 72
字符串属性访问[]:类似于数组，但是不可修改字符串。
split(分隔符)将字符串转换为数组：
txt.split(","); // 用逗号分隔
match()方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为Array对象返回。
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g) // 返回数组 [ain,ain,ain]
如果字符串中包含指定值，includes（字符串）返回true;
语法:string.includes(searchvalue, start)
endsWith()、startsWith()如果字符串以指定值开头，或结尾，方法返回true；
语法:string.startsWith(searchvalue, start)
string.endsWith(searchvalue, length)

字符串模板

同义词

Template Literals
Template Strings
String Templates
Back-Tics 语法

模板字面量定义:在字面量中添加变量和表达式
语法：模板字面量使用反引号(``)而不是引号("")来定义字符串()
$...
注意：`模板字面量允许多行字符串;

let text = `He\'s often called "Johnny"`;

//多行字符串

let text =
`The quick
brown fox
jumps over
the lazy dog`;

//字符串插值
let firstName = "Bill";
let lastName = "gates";

let text = `Welcome $firstName, $lastName!`;

//表达式替换
let price = 10;
let VAT = 0.25;

let toal = `Total: $(price * (1 + VAT)).toFixed(2)`

HTML模板

在javaSCript中给html增加变量，并输出且按标签显示。

let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];

let html = `<h2>$header</h2><ul>`;
for (const x of tags) 
  html += `<li>$x</li>`;


html += `</ul>`;

变量类型

数值

所有的数值变量都是以双精度浮点数来存储的，64位存储数值。
数值和非数值型用“+”号，输出非数值型。
NaN是Javascript的保留值，指示不是数值型，使用isNaN()来判断返回值是不是数值性。
Infinity在计算数时超过最大范围范围的值，是数值型。
JavaScript会把前缀为0x的数值解释为十六进制，有些JavaScript版本会把前导零解释为八进制，
toString()方法把数输出为十六进制、八进制、二进制。
数值类型也可以使用new创建对象。

数值参考代码

//十六进制赋值
var x = 0xFF;

//toString()输出一个数不同进制的表示。
document.write(x.toString(2)  );//11111111
document.write("<br/>");
document.write(typeof(x.toString(2)))//string

Number方法和属性

toString()以字符串返回数值。
toFixed() 返回字符串值，包含了指定位数小数的数字。
x.toFixed(2); // 返回 9.66
toPrecision()返回指定长度的数字。
valueOf()以数值返回数值。
变量转换数值

方法	描述
Number()	返回数字，由其参数转换而来。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

JavaScript数字方法

数组

数组是一个对象类型
其他的类似于其他的语言
使用下标修改数组的值，如果超出目前的下标就新增。
你可以在数组中存放对象，保存函数
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
添加最高索引可以在数组创建未定义的“洞”；

JavaScript 基础

HTML JavaScript
JavaScript与PHP不同
HTML <.script> 标签
JavaScript 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 document.write()
- 使用 window.alert()
JavaScript 语句
JavaScript 语法
JavaScript 注释
JavaScript 关键词
JavaScript 标识符
JavaScript 字符串运算符
JavaScript 数据
- JavaScript 拥有动态类型
- 您可以在字符串内使用引号
- JavaScript 数据类型
- JavaScript 数组
- JavaScript 对象
- typeof 运算符
- Undefined
- 空值
- NULL
- Undefined 与 Null 的区别
- 原始数据
- 复杂数据
JavaScript 函数
JavaScript 对象
- 对象属性
- 对象方法
- this 关键词
- 访问对象属性
- 访问对象方法
JavaScript 事件
JavaScript 日期
- 创建 Date 对象
- 日期获取方式
- 日期设置方式
Math对象方法
JavaScript 随机
- Math.random()
- JavaScript 随机整数
- 一个适当的随机函数
For/In 循环
JavaScript 标签的break和continue
JavaScript 表单
- document.getElementById("numb").value
- document.getElementById("demo").innerHTML = text

HTML JavaScript

JavaScript 使 HTML 页面更具动态性和交互性

JavaScript与PHP不同

服务器与客户端
在前端和后端的基础上这两种语言是不同的。JavaScript脚本语言是一种前端语言（除Node.js之外），而PHP是一种服务器端语言

HTML <.script> 标签

HTML <script> 标签用于定义客户端脚本（JavaScript）
<script> 元素即可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。
JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

使用 innerHTML 写入 HTML 元素

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

在属性为id的段落里显示11
更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

使用 document.write()

<script>
document.write(5 + 6);
</script>

注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<button onclick="document.write(5 + 6)">试一试</button>

</body>
</html>

点击试一试之后将只显示11

使用 window.alert()

<script>
window.alert(5 + 6);
</script>

也可以使用alert(5+6);

JavaScript 语句

document.getElementById("demo").innerHTML = "Hello Kitty.";

JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

这条语句告诉浏览器在 id=“demo” 的 HTML 元素中输出 “Hello Kitty.”

JavaScript 语法

JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。

JavaScript 注释

并非所有 JavaScript 语句都被“执行”。
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。

JavaScript 关键词

JavaScript 关键词用于标识被执行的动作。
var 关键词告知浏览器创建新的变量

JavaScript 标识符

标识符是名称。

在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
在大多数编程语言中，合法名称的规则大多相同。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
连串的字符可以是字母、数字、下划线或美元符号。
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。
注意：JavaScript 中不能使用连字符。它是为减法预留的。

JavaScript 字符串运算符

+运算符也可用于对字符串进行相加（concatenate，级联）

txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2;

结果
Bill Gates
也可以这样

txt1 = 1;
txt2 = "Gates";
txt3 = txt1 + " " + txt2;

结果
1 Gates

字符串和数字的相加
相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串。

如果是1+2+‘3’返回33

JavaScript 数据

JavaScript 从左向右计算表达式。不同的次序会产生不同的结果：

var x = "Porsche" + 911 + 7;

结果为Porsche9117

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型，与php一样，是弱类型

您可以在字符串内使用引号

如果匹配到最外面的引号导致语法错误，可以将里面的引号转义掉即可

JavaScript 数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等，无int，float之类的类型

var y = 123e5;
var z = 123e-5;

表现为

JavaScript 数组

var cars = ["Porsche", "Volvo", "BMW"];

JavaScript 对象

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

typeof 运算符

您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型，typeof 运算符返回变量或表达式的类型。

Undefined

在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

空值

空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。

NULL

NULL在C语言中用于指针和对象
在PHP中被赋予空值的情况有三种
尚未被赋值
被赋值为 NULL
被unset()函数处理过的变量
在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。
不幸的是，在 JavaScript 中，null 的数据类型是对象。
您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
您可以通过设置值为 null 清空对象，您也可以通过设置值为 undefined 清空对象。

Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等。
null的类型是对象，Undefined的类型是Undefined

原始数据

原始数据值是一种没有额外属性和方法的单一简单数据值。
typeof 运算符可返回以下原始类型之一：
string
number
boolean
undefined

复杂数据

typeof 运算符可返回以下两种类型之一：
function
object
typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。
typeof 运算符把数组返回为 “object”，因为在 JavaScript 中数组即对象。

JavaScript 函数

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

myFunction 引用的是函数对象，而 myFunction() 引用的是函数结果。

局部变量
在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问。

JavaScript 对象

对象属性

对象方法

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 关键词

在函数定义中，this 引用该函数的“拥有者”。
在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。
换言之，this.firstName 的意思是 this 对象的 firstName 属性。
实例

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象创建</h1>

<p id="demo"></p>

<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>

</body>
</html>

访问对象属性

您能够以两种方式访问属性：
objectName.propertyName或者
objectName[“propertyName”]

访问对象方法

您能够通过如下语法访问对象方法：
objectName.methodName()
HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。

JavaScript 事件

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击
通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。
点击后id为demo的元素显示时间

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

在上面的例子中，JavaScript 代码改变了 id=“demo” 的元素的内容。
在接下来的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：

<button onclick="this.innerHTML=Date()">现在的时间是？</button>

JavaScript 代码通常有很多行。事件属性调用函数更为常见：

<button onclick="displayDate()">现在的时间是？</button>

常见的 HTML 事件
下面是一些常见的 HTML 事件：

JavaScript 能够做什么？
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

每当页面加载时应该做的事情
当页面被关闭时应该做的事情
当用户点击按钮时应该被执行的动作
当用户输入数据时应该被验证的内容

等等
让 JavaScript 处理事件的不同方法有很多：

HTML 事件属性可执行 JavaScript 代码
HTML 事件属性能够调用 JavaScript 函数
您能够向 HTML 元素分配自己的事件处理函数
您能够阻止事件被发送或被处理

JavaScript 日期

var d = new Date();

创建 Date 对象

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

日期获取方式

日期设置方式

Math对象方法

JavaScript 随机

Math.random()

Math.random() 返回 0（包括）至 1（不包括）之间的随机数：

JavaScript 随机整数

Math.random() 与 Math.floor() 一起使用用于返回随机整数。

Math.floor(Math.random() * 10);		// 返回 0 至 9 之间的数

一个适当的随机函数

正如你从上面的例子看到的，创建一个随机函数用于生成所有随机整数是一个好主意。

这个 JavaScript 函数始终返回介于 min（包括）和 max（不包括）之间的随机数：

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}

For/In 循环

JavaScript for/in 语句遍历对象的属性：

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

JavaScript 标签的break和continue

语法

break labelname;
continue labelname;

continue 语句（不论有无标签引用）只能用于跳过一个迭代。
break 语句，如果没有标签引用，只能用于跳出一个循环或一个 switch。
如果有标签引用，则 break 语句可用于跳出任意代码块：
实例：

var  cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
    text += cars[0] + "<br>"; 
    text += cars[1] + "<br>"; 
    text += cars[2] + "<br>"; 
    break list;
    text += cars[3] + "<br>"; 
    text += cars[4] + "<br>"; 
    text += cars[5] + "<br>"; 
}

效果：

JavaScript 表单

Html表单实例：

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("必须填写姓名！");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="/demo/html/action_page.php" onsubmit="return validateForm()" method="post">
  姓名：<input type="text" name="fname">
  <input type="submit" value="提交">
</form>

</body>
</html>

如果不填写信息，点击提交将会跳出弹窗提示必须填写姓名

document.getElementById(“numb”).value

获取id为numb的值

document.getElementById(“demo”).innerHTML = text

赋值text给id为demo的元素

以上是关于javascript基础的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript基础

JavaScript 基础

前端基础之JavaScript

前端基础-JavaScript的基本概述和语法

JavaScript零基础入门 7：JavaScript基础函数

Javascript基础与面向对象基础~目录