Java Web(四)JS

作者：浅辄

2022-11-11
吉林
本文字数：3907 字
阅读完需：约 13 分钟

JS

什么是 JavaScript?

JavaScript 是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互
W3C 标准：网页主要由三部分组成
结构：HTML 表现：CSS 行为：JavaScript
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript(简称：JS)在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准
ECMAScript6(ES6)是最新的 JavaScript 版本（发布于 2015 年）：

一.JS 引入

1.两种引入

1.1 内部脚本：将 JS 代码定义在 HTML 页面中

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

<script>  alert("hello,JS~");</script>

复制代码

提示：

在 HTML 文档中可以在任意地方，放置任意数量的<script>。
一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示

1.2 外部脚本：将 JS 代码定义在外部 S 文件种，然后引入到 HTML 页面中

外部文件：demo.js alert("hello,JS~");
引入外部 js 文件 <script src="../js/demo.js></script>

注意：1.外部脚本不能包含<script>标签 2.<script>标签不能自闭合

二.JS 基础语法

1.书写语法

区分大小写：与 va 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：
单行注释：//注释内容
多行注释：/* */注释内容
大括号表示代码块

if (count =3){  alert(count);}

复制代码

2.输出语句

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

window.alert("hello JS~");//弹出警告框document.write("hello JS~");//写入HTMLconsole.log("hello JS~");//写入控制台

复制代码

3.变量

JavaScript 中用 var 关键字(varable 的缩写)来声明变量

  var test = 20;  test = "张三";

复制代码

var:

1.作用域:全局变量

2.变量可重复定义

JavaScript 是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则

组成字符可以是任何字母、数字、下划线（_)或美元符号($)数字不能开头建议使用驼峰命名

ECMAScript6 新增了 Iet 关键字来定义变量。它的用法类似于 var,但是所声明的变量，只在 Iet 关键字所在的代码块内有效，且不允许重复声明
ECMAScript6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

4.数据类型

JavaScript 中分为：原始类型和引用类型

5 种原始类型：number:数字（整数、小数、NaN(Not a Number)string:字符、字符串，单双引皆可 boolean:布尔。true,falsenull:对象为空 undefined:当声明的变量未初始化时，该变量的默认值是 undefined

使用 typeof 运算符可以获取数据类型

alter(typeof age);

复制代码

5.运算符

一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=,+=,-=…
关系运算符：>，<，>=，<=，!=，==,===
逻辑运算符：&&，||，！
三元运算符：条件表达式？true_value:false_value

== :
1.判断类型是否一样，如果不一样，则进行类型转换 2.再去比较其值
===:全等于
1.判断类型是否一样，如果不一样，直接返回 faLs2.再去比较其值

类型转换:
*其他类型转为 number:
1.string:按照字符串的字面值，转为数字,如果字面值不是数字，则转为 NaN。一般使用 parseInt 2.boolean:true 转为 1，false 转为 0
*其他类型转 boolean:
1.number:0 和 NaN 转为 false,其他的数字转为 trUe
2.string:空字符串转为 false,其他的字符串转为 true
3.null:false
4.undefined:false

三.流程控制语句 &函数

1.流程控制语句

1.1if:

    var count 3;    if (count ==3){      alert(count);    }

复制代码

1.2switch:

    var num =3;    switch (num){        case 1:{            alert("星期一")；            break;      }        case 2:{            alert("星期二")；            break;        }        case 3:{        alert("星期三")；        break;        }        case 4:{        alert("星期四")；        break;        }        case 5:{        alert("星期五")；        break;        }        case 6:{        alert("星期六")；        break;        }                case 7:{        alert("星期日")；        break;        }        default:{          alert("输入星期有误");          break;        }    }

复制代码

1.3for:

  var sum 0;    for(let i=1;i<=100;i++){        sum +=i;        }    }    alert(sum);

复制代码

1.4while:

    var sum =0;    var i = 1;    while (i<=100){        sum +i;        i++;    }    alert(sum);

复制代码

1.5do...while:

    var sum = 0;    var i = 1;    do{    sum +i;      i++;    }    while (i<=100);    alert(sum);

复制代码

2.函数

函数（方法）是被设计为执行特定任务的代码块

定义一:JavaScript 函数通过 function 关键词进行定义，语法为：

function functionName(参数1，参数2....){  要执行的代码}

复制代码

注意：

形式参数不需要类型。因为 JavaScript 是弱类型语言返回值也不需要定义类型，可以在函数内部直接使用 return:返回即可

定义方式一:

function add(a,b){  return a+b;}

复制代码

调用：函数名称（实际参数列表）；

let result = add(1,2);

复制代码

定义二:

var functionName=function(参数列表){  要执行的代码}

复制代码

var add function (a,b){  return a b;}

复制代码

调用:JS 中，函数调用可以传递任意个数参数

let result add(1,2,3);

复制代码

四.JS 对象

1.Array 数组对象

JavaScript Array 对象用于定义数组

定义

var 变量名 = new Array(元素列表);  //方式一var 变量名 = [元素列表];      //方式二

复制代码

访问

arr[索引] = 值;arr[0] = 1;

复制代码

注意：Js 数组类似于 Java 集合，长度，类型都可变

//变长var arr3=[1,2,3];arr3[10]=10;//alert(arr3[10]);alert(arr3[9]);//变类型arr3[5]="hello";//alert(arr3[5]);alert(arr3);

复制代码

属性

属性：Length:数组中元素的个数

var arr4=[1,2,3];for (let i=0;i<arr4.Length;i++){  alert(arr4[i]);}

复制代码

方法

push 方法:添加方法

var arr5=[1,2,3];arr5.push(10);alert(arr5);

复制代码

splice:删除元素

arr5.splice(0,1);//这里的方法重载,能传3个参数alert(arr5);

复制代码

2.String

定义

var变量名=new String(s);  //方式-var变量名=s;         //方式二

复制代码

属性

length 字符串的长度

方法

charAt() 返回在指定位置的字符。indexof() 检索字符串。trim() 去除字符串前后两端的空白字符

3.自定义对象

格式

var对象名称={    属性名称1：属性值1，    属性名称2：属性值2，    ......    函数名称：function(形参列表){}    ......};
var person ={    name:"zhangsan",    age:23,    eat:function {      alert("干饭~")；    }}

复制代码

五.BOM

Browser Object Model 浏览器对象模型
JavaScript 将浏览器的各个组成部分封装为对象
组成 Window:浏览器窗口对象
组成
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象

1.Window

Vindow:刘览器窗口对象
获取：直接使用 window,其中 window.可以省略

window.alert("abc");

复制代码

属性：获取其他 BOM 对象

方法

2.History

History:历史记录
获取:使用 window.history 获取,其中 window 可以省略

window.history.方法();history.方法();

复制代码

方法

六.DOM

Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象

<html>    <head>      <title>文档标题</title:>    </head>    <body>      <h1>我的标题<h1>      <a href仁"#">我的链接</a>    </body></html>

复制代码

JavaScript 通过 DOM,就能够对 HTML 进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
DOM 是 W3C(万维网联盟)的标准
DOM 定义了访问 HTML 和 ML 文档的标准：
W3CDOM 标准被分为 3 个不同的部分：
1.核心 DOM:针对任何结构化文档的标准模型
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
2.XML DOM:针对 XML 文档的标准模型
3.HTML DOM:针对 HTML 文档的标准模型
- Image:<img>
- Button <input type='button'>

1.获取 Element

获取：使用 Document)对象的方法来获取

1.getElementByld:根据 id 属性值获取，返回一个 Element 对象 2.etElementsByTagName:根据标签名称获取，返回 Element 对象数组

style:设置元素 css 样式 innerHTML:设置元素内容
divs[i].innerHTML="呵呵"；

3.getElementsByName:根据 name 属性值获取，返回 Element>对象数组 4.getElementsByClassName:根据 class/属性值获取，返回 Element 对象数组

七.事件监听

事件：HTML 事件是发生在 HTML 元素上的"事情”。比如：
- 按钮被点击
- 鼠标移动到元素之上
- 按下键盘按键
事件监听:JavaScript 可以在事件被侦测到时执行代码

1.事件绑定

两种方式

方式一：通过 HTML 标签中的事件属性进行绑定

<input type="button"onclick='on()'>function on{  alert("我被点了")；}

复制代码

方式二:通过 DOM 元素属性绑定

<input type="button"id="btn">
document.getElementByld("btn").onclick=function(){  alert("我被点了")：}

复制代码

2.常见事件

Event 代表事件对象

八.RE 表达式

概念:正则表达式定义了字符串组成的规则
定义

1.直接量：注意不要加引号
var reg = /^\w{6,12}$/;
2.创建 RegExp 对象
var reg = new RegExp{"Aw6,12)$"};

方法
- test(str):判断指定字符串是否符合规侧，返回 true 或 false
语法
- ^:表示开始
- $:表示结束
- []:代表某个范围内的单个字符，比如：[0-9]单个数字字符
- .:代表任意单个字符，除了换行和行结束符
- \w:代表单词字符：字母、数字、下划线()，相当于[A-Za-z0-9]
- \d:代表数字字符：相当于[0-9]
- 量词：
- +:至少一个 var reg = /^\w+$/;
- *:零个或多个
- ?:零个或一个
- {x}:x 个
- {m,}:至少 m 个
- {m,n}:至少 m 个，最多 n 个

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/581709270758322a9ad988062】。文章转载请联系作者。

浅辄

关注

大丈夫生于天地之间,岂能郁郁久居人之下 2022-11-08 加入

阿里云技术博主认证

发布

暂无评论

创作场景

Java Web(四)JS

JS

什么是 JavaScript?

一.JS 引入

1.两种引入

二.JS 基础语法

1.书写语法

2.输出语句

3.变量

4.数据类型

5.运算符

三.流程控制语句 &函数

1.流程控制语句

2.函数

四.JS 对象

1.Array 数组对象

2.String

3.自定义对象

五.BOM

1.Window

2.History

六.DOM

1.获取 Element

七.事件监听

1.事件绑定

2.常见事件

八.RE 表达式

浅辄

评论