Java如何对单片机进行编程单片机 javascript

转载

mob6454cc7b19b2 2024-01-02 10:37:49

文章标签 Java如何对单片机进行编程 JavaScript HTML 字符串属性值 文章分类 Java 后端开发

Part01:JavaScript介绍

1、JavaScript定义：

JavaScript是一门嵌入式编程语言；不能独立运行。它用于开发交互式的web页面，不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。

2、JavaScript的分类：

ECMAScript：JS的核心语法、语句
BOM：浏览器对象

window对象：全局函数

定时器
onload
alert( );//提示信息弹出框（只有确定按钮）
confirm( );//提示信息弹出框（具有确定和取消两个按钮），点击确定返回true，点击取消返回false
prompt( );//可以输入信息的提示框（具有确定和取消两个按钮），点击确定返回输入的信息，点击取消返回null
parseFloat( );//把字符串解析成小数,返回值为number
parseInt( );//把字符串解析成整数，返回值为number
eval（ );//执行JS脚本

navigateor：导航
screen：屏幕对象
history：浏览记录对象
location：当前浏览的网页地址

DOM：（Document Object Model）文档对象模型，操作文档中的元素和内容；

HTML DOM将整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员；
Document：是DOM中的一个内置对象

获得元素方法：

getElementById(“id”);//通过id属性值获得元素
getElementsByName(“”);//通过name属性值获得所有元素
getElementsByClassName(“”);//通过class属性值获得所有元素
getElementsByTagName(“”);//通过标签名获得所有元素

创建方法：

createElement(“标签名”);//创建指定名称的元素
createTextNode(“内容”);//创建指定内容的文本节点

常见属性：

childNodes:获得所有的子节点
nodeName:返回节点名称（标签名）
nodeType:返回节点类型（元素、属性、文本等）
nodeValue:返回节点值（只有文本节点才有）

3、JavaScript的作用：

使用JavaScript添加页面动画效果，提供用户操作体验。
主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等；

4、引用JavaScript的两种方式：

内嵌式：写在HTML<script>的开始标签和结束标签之间；
格式：

<script type="text/javascript”> JavaScript代码 </script>

外联式：写在后缀为.js的文件中，然后在HTML中通过

<script type="text/javascript" src=“外部JavaScript文件的路径" charset="utf-8"></script>

Part02:JavaScript的基本语法

1、变量

变量的命名规范：

必须以字母或下划线开头，中间可以是数字、字符或下划线
不能使用JavaScript关键字作为变量名，如：function
变量名不能包含空格等符号
JavaScript严格区分大小写

变量的声明：

var 变量；//注意⚠️：在JS中变量可以不声明，直接使用。默认值：undefined；

变量的赋值：

定义变量同时赋值：var a=10;
先定义后赋值：var a;a=10;a=“abc”;//注意⚠️：a没有确定的类型，给它赋什么类型的值它就是什么类型；

2、数据类型：

基本类型：

Undefined类型，只有一个值undefined；当声明的变量未初始化时，该变量的默认值为undefined。
Null类型，只有一个值null，表示空；值undefined实际上是从值null派生来的，因此ECMAScript把它们定义为相等的。
Boolean类型，有两个值true和false。
Number类型，表示任意数字。
string类型，表示字符串；在js中字符串必须由双引号“”或者单引号‘’引起来。

引用类型：

类（class），我们一般不会自己创建对象，而是直接使用js已经给我们准备好的对象，所以说JS是基于对象，而不是面向对象。

3、运算符：

算术运算符和逻辑运算符：和Java语言一模一样

比较运算符：

== ，只比较数值，不考虑类型；如：var a=“10” ;a==10为true；
===，即比较类型，也比较数值；如：var a=“10” ;a ===10为false；

Boolean类型的数据转换（ToBoolean）：
Boolean类型如果参与运算，那么true转成1，false转成0

4、等式运算：

Java如何对单片机进行编程单片机 javascript_Java如何对单片机进行编程

5、JS中的一些操作：

alert(内容／变量)：以消息提示框的形式弹出内容或者变量的值
JS中的函数：格式：function 函数名（参数列表）{ 函数体；}

注意⚠️：

参数列表中，只需要写参数名，如果多个参数，用逗号相隔。
函数不调用不运行，调用格式：函数名(参数)
函数调用的时候，可以传递任意个实际参数

如果实际参数个数小于形式参数个数，那么多出来的形式参数默认值为undefined;
如果实际参数个数大于形式参数个数，那么自动忽略多余的实际参数；

在JS中没有重载，如果函数名一样，后面定义的函数会覆盖前面定义的函数；

6、表单提交事件（“onsubmit”）

当用户点击点击“submit“按钮时，会发生“表单提交事件”
把这个事件和一个函数绑定，当事件发生时，就会调用这个函数

绑定格式：在表单的标签属性中：事件名称=“函数名称( )"
如：<form onsubmit="sub()">

如何控制表单是否提交：

在绑定的函数中，返回boolean值，true表示提交，false表示不提交；
修改标签属性中绑定函数的格式为：事件名称=“return 函数名称( )”;

获取HTML页面的某个标签：

var 标签对象名 = document.getElementById(“标签的id值”);（document是DOM中的一个内置对象）；
通过标签对象名.属性名可以获取该标签的某个属性值；

如：标签对象名.value （获取标签上输入的值）；

JS中正则表达式格式：

/^正则表达式$/
判断：var b = “需要判断的字符串“.matche(/^正则表达式$/);（如果b是true，满足正则表达式，如果b是false,不满足）
第二种方式：var b =/^正则表达式$/.test(“需要判断的字符串“)；

7、失去焦点事件（onblur）:

点击一个标签之后点击了其他标签，此时该标签会发生失去焦点事件

8、获取焦点事件（onfocus）:

鼠标选择了其他标签，之后选择该标签，此时该标签会发生获取焦点事件

Part03：定时器

1、定时器：

周期定时器，反复周期执行：

设置定时器格式：定时器id = window.setInterval(code,millisec);（window是BOM中的内置对象，又称为全局对象，window可以省略不写）

code为代码段，里面可以写：

“正常的JS代码”
函数名

millisec为时间间隔，单位为毫秒

取消定时器：clearInterval(要取消定时器的id );

一次性定时器，只会执行一次：

设置定时器格式：定时器id = window.setTimeout(code,millisec)
取消定时器：clearTimeout(要取消定时器的id );
➡️设置一个定时器，这个定时器每隔millisec毫秒会触发一次，每次都执行code代码段

2、页面加载完毕事件onload：当页面加载完毕才会触发

绑定函数：windows.onload = 函数名/匿名函数；

window.onload = function(){
    //设置一个定时器
    window.setInterval(changeImg,2000);
}

3、修改标签样式的属性值：

obj.style.属性名；/获取指定属性的值；
obj.style.属性名 = 值；//修改指定属性的值
注意⚠️：在获取某一样式的值时，一定要注意类型；如：obj.style.height是字符串型
3、定时弹广告练习：页面一打开2秒后显示广告，然后2秒后再隐藏

//JS代码
<script type="text/javascript">
    //在页面加载完毕之后
    window.onload = function () {
        //设置定时器，在2秒后执行show函数(显示广告图片）
        window.setTimeout(show,2000)
    };
    //获取img（id记得加引号）
    var imgElement = document.getElementById("img01");
    function show() {
        //修改img的style的display样式
        imgElement.style.display = "block";
        //设置定时器，在2秒后执行hidden函数（隐藏广告图片）
        window.setTimeout(hidden,2000);
    }
    function hidden() {
        //修改img的style的display样式
        imgElement.style.display = "none";
    }
</script>
//HTML的body代码
<body>
<img style="display: none" src="../img/gg.jpg" id="img01"/>
</body>

4、获取HTML某个标签的内容（位于开始标签和结束标签之间）：