[嵌入式Web]-嵌入式Web服务器之JavaScript

目录

【JavaScript一些常用基本概念】

JavaScript的使用

script标签

JavaScript外部脚本引用

JavaScript 输出

访问HTML元素innerHTML

document.write()

window.alert()

JavaScript的变量定义

JavaScript的数据类型

JavaScript 布尔值

JavaScript 对象

typeof 运算符

JavaScript 函数

函数的调用

JavaScript 事件

尝用JavaScript用来实现什么

常见的HTML事件

JavaScript 字符串方法

字符串长度

查找字符串中的字符串

部分字符串的提取

替换字符串内容

转换大小写

字符串的链接

提取字符串字符

属性访问

把字符串转化为数组


【JavaScript一些常用基本概念】

嵌入式中需要用到HTML和JavaScript仅仅是为了编写一些简单的网页来实现通过对下位机或者物联网设备的控制,所以只需要了解即可,文章中的知识点均为本人认为开发嵌入式时,网页上比较经常用到的功能

JavaScript的使用

script标签

在HTML中,JavaScript的脚本必须在<script>和</script>中,同时脚本也可以放在head标签或者body标签中,也可以通过外部引用JavaScript脚本

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<p id="demo">段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

如上的代码把JavaScript的脚本放置于head的标签当中,当点击button按钮的时候,会触发myFunction脚本,把id为demo的元素的内容修改为“段落被更改”

同时,JavaScript脚本也可以放置于body标签当中

JavaScript外部脚本引用

如果多个网页需要使用到相同的脚本,那么可以把这个脚本保存为.js扩展名的文件,然后通过外部引用来使用这个js文件

在外部文件中放置脚本有如下优势:

分离了 HTML 和代码

使 HTML 和 JavaScript 更易于阅读和维护

已缓存的 JavaScript 文件可加速页面加载

如果需要使用外部js文件,那么在<script>标签中,需要使用src属性指明js文件的路径

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

如上代码引用了当前文件夹下的xxx.js脚本文件,如果当前网页需要多个js文件脚本,那么使用script标签进行多次引用即可


JavaScript 输出

访问HTML元素innerHTML

如果想要访问HTML的元素,那么JavaScript可以通过元素的id进行访问,当通过id访问到HTML的元素之后,可以通过.innerHTML来修改元素的值

<script>
 document.getElementById("demo").innerHTML = 66;
</script>

如上脚本就是获取id为demo的元素,然后通过innerHTML来修改元素的值为66

document.write()

document.write()其实就是直接显示write当中输入的数据,比如说document.write(66),那么就会在你定义此脚本的位置显示66,但是需要注意的是,加入HTML文档已经全部加载完成,那么使用document.write()将会直接删除所有的HTML元素,只剩下document.write()里面输入的内容。        

window.alert()

window.alert()可以直接在网页上弹出警告框来显示数据

<script>
window.alert(66);
</script>

如上脚本可以直接在浏览器中弹出警告框,里面的内容为66


JavaScript的变量定义

JavaScript的变量不像C语言,是没有类型的,js的变量通过var来对变量进行定义,比如说

var x = 10; 那么就是定义一个x变量赋值为10,js的变量没有想C语言那样子严格对类型进行匹配的,比如说两个字符串相加,JavaScript中可以直接实现

JavaScript的数据类型

JavaScript的变量十分灵活,拥有动态的类型,通过var定义一个变量,var可以是数值,可以是字符串,可以是数组,可以是对象

JavaScript 布尔值

布尔值只有两个类型,一个是true,一个是false

var x = true;
var y = false;

JavaScript 对象

JavaScript对象使用花括号来进行书写,使用逗号进行分割

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

上例中的对象(person)有四个属性:firstName、lastName、age 以及 eyeColor。

typeof 运算符

使用typeof运算符可以用来确定JavaScript变量的数据类型,如果变量是声明了但是没有赋值,那么变量的类型通过typeof返回的是undefined类型

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"
typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"

JavaScript 函数

如下为一个JavaScript标准函数的模板

function myFunction(p1,p2)
{
    return p1*p2;
}

JavaScript的函数是没有定义返回值类型的,并且形参也是没有类型的

函数的调用

函数中的代码会在特定的时候被执行,一般可能为用户点击某个HTML中的按钮时,JavaScript脚本调用或者自动调用等等

和C语言一样,JavaScript的函数需要添加上()才表示是调用,在C语言中函数名即函数的入口地址,也就是函数指针,JavaScript中的函数名表示对象,不使用()调用的话,返回的是整个函数


JavaScript 事件

HTML事件是发生在HTML元素上面的事情,当在HTML页面中使用JavaScript的时候,当HTML的页面发生了事件,那么便可以使用JavaScript来应对这些事件

HTML的事件可以是,页面完成加载、输入的字段被修改或者按钮被按下等等,如果发生了如上的事件,可以执行相应的js脚本

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">时间是?</button>

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

</body>
</html>

如上脚本,当按下按钮的时候,会执行 document.getElementById('demo').innerHTML=Date(),此时id为demo的元素会被修改为当前的时间。

如果想要修改自身的元素,那么直接在onclick 里面写 this.innerHTML=Date(),也就是修改自身的元素为当前时间

尝用JavaScript用来实现什么

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

常见的HTML事件

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

JavaScript 字符串方法

字符串长度

在C语言中,如果想要获得一个字符串的长度,那么我们一般使用库函数的strlen函数,或者人为通过计算到‘\0’的字符的个数,但是在js中,我们可以直接通过.length来获得这个字符串的长度,有点像直接把这个字符串看做一个对象了。

var txt = "12345678";
var len = txt.length;

查找字符串中的字符串

通过.indexof("  ")来查询一个字符串当中是否存在自己想要寻找的字符串,如果有的话,会返回想要寻找字符串的最小索引下标

var txt = "aaaabbbbcccc";
var pos = txt.indexof("b");

如上代码会返回4,表示查找最小字符串的索引下标,如果说查找的字符串不存在的话,那么会返回-1

indexof还可以设置从哪里开始寻找,比如说如下代码,会从下标为6的地方开始搜寻想要搜寻的字符串

var txt = "aaaabbbbcccc";
var pos = txt.indexof("b",6);

search(“ ”)也可以起到搜寻的作用,但是无法想indexof那样,指定从哪里开始搜寻

部分字符串的提取

slice方法可以允许输入开始提取的位置和结束提取的位置,如下代码

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);

表示从左边开始,提取索引为7到索引为13的字符串,赋值给res。需要注意的是,索引可以是负数的,负数的索引表示从右边往左边数,正数的索引表示从左边往右边数

substring方法类似于slice,但是它不接受负数

substr的第二个参数规定的是截取的字符串的长度

替换字符串内容

replace方法用于在字符串中寻找指定的字符串并且用自己的参数替换它

str = "Please visit 1!";
var n = str.replace("1", "2");

如上代码可以把字符串中的1替换为2

转换大小写

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

字符串的链接

concat方法用来链接两个字符串

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

如上代码,把text1和text2两个字符串拼接起来,然后赋值给text3

提取字符串字符

charAt()可以返回指定下标索引的字符串中的字符

charCodeAt()返回的是字符串中指定下标索引的字符Unicode编码

属性访问

在C语言中,如果我们要访问一个字符串中的字符,那么我们除了用指针之外,还可以使用   [ ] 加上字符的对应索引下标进行访问,在JavaScript中,我们也可以通过此方法来访问对应字符串中的字符

var str = "HELLO WORLD";
str[0];                   // 返回 H

需要注意的是,此方法是只读的,不能用它来进行赋值。

把字符串转化为数组

split可以允许对字符串进行拆分为数组,还可以设置用来分割的值

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔
<!DOCTYPE html>
<html>
<body>


<button onclick="myFunction()">试一试</button>

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

<script>
function myFunction() {
  var str = "a,b,c,d,e,f";
  var arr = str.split(",");
  document.getElementById("demo").innerHTML = arr[0];
}
</script>

</body>
</html>

如上代码,定义了一个数组为str,通过split指定通过,进行分割,则arr数组为"abcdef",此时按下按钮,会显示分割后的字符串的第一个字符

余下如果在笔者平时工作中遇见比较常用还会继续添加

猜你喜欢

转载自blog.csdn.net/m0_72372635/article/details/133160233