本文介绍了JavaScript编程在微信小程序开发中的基础，包括如何插入和引用JS，语句和符号理解，变量、判断和函数，以及常用的互动方法如输出、弹窗和窗口操作。深入讲解了DOM操作，如获取元素、innerHTML、样式控制和事件处理。
前言
既然发誓要成为一名全栈工程师，既然都已经学会了画PCB，学会了C语言，学会了ESP32(WiFi)编程，学会了Linux系统应用编程，进程，线程，网络编程等等，也知道设备怎么连接云平台。现在就差手机控制这一块了，微信小程序无疑成为首选。
主要还是因为微信小程序可以跨平台使用（无论安卓还是iOS），更重要的，它不占手机内存。
通过和大佬的沟通，微信小程序主要是通过JS语言来编程，那么微信小程序开发第一步：Java script编程。冲鸭！！
一、JS入门学习之路
既然是学习程序，当然是去伟大了慕课网了。本着最小的成本的理念，当然是先选择免费的课程，学着先。我学习的入门课程，便是慕课官方的免费课程。
不得不说，慕课网的边学边敲代码的方式确实很容易上手,这就是我一分钟写出的hello显示代码。
二、第一章: 做好准备
1.如何插入JS程序
学习到的一点：JS程序属于脚本类型，本身不能自己运行，它会依赖于HTML运行，所以在HTML中，插入JS来控制HTML显示及输出内容。插入JS的字段就是，例如插入打印"hello world"：
<script type="text/javascript">
//代码段
document.write("Hello world");
</script>
document.write("Hello world")这特么不就是结构体函数？？我貌似已经预料到后面的学习了，好像不是很难的亚子。
2.如何引用外部JS文件
引用外部JS文件？大概就是C语言中的模块化编程，没错，就是这样的。其实就是在JS文件里写好需要实现的功能后，在HTML中调用。在插入script时使用src字段就行了，例如引用test.js 文件：
<script str="test.js"></script>
这样，它就会直接去执行JS文件内的功能。嗯。。。。。好像比C语言的引用要方便一点，主要时因为它自己执行？
3.认识语句和符号
这一节对我来说，就是等于白说，主要讲的就是:要注意分号的使用 。阿西，我一个熟悉C语言的，还要看这个？不过，确实认真对待了标题。
4.注释很重要
额......一名优秀的程序员从来都不会写注释。过!
5.什么是变量
可以改变内容或者数值的东西，C:变量有很多中类型，void、int、char.........而JS:var。这就有点区别了，谁又能想到，一个JS的一个var关键字竟然可以定义数值类型、字符串类型(string) 甚至 枚举、对象 还有DOM。最主要是，你还不用担心它溢出，更不用释放它的内存。定义一个变量：
//定义数值型
var mynum=8;
//定义字符串
var myString="你好";
......
6.判断语句
不就是if(条件){...}else{...}嘛，和C语言一模一样，没啥好学的。过!
7.什么是函数
函数的概念，小白可以看一下，但是对我这种写了多年C语言的人来说，概念就没必要学了，但是JS定义函数的方法还是需要学习一下的。目前学习到的JS函数定义的方法只有一种：function<空格>函数名()。这个关键字好像可以做返回，也可以不用，而且返回值不限类型，可能和变量没有类型这一点有关?
例如顶一个名为func_myfunction的函数，打印Hello world！：
function func_myfunction(){
//实现代码
document.write("Hello world!");
}
三、第二章：常用互动方法
简而言之就是打印输出，弹窗之类的。”方法“ 指一些结构体函数。
1.输出内容：documen.write()
打印输出是在网页端输出相应的内容，例如：
打印输出的打印方式沿用了Java，可以拼接字符串，即不仅可以输入单字符串。也可以 输入字符串+变量的方式。
(1)只打印字符串
只打印输出字符串，例程打印输出Hello world:
document.write("Hello world");
(2)打印变量
var mynum=8;
var mystring="你好"
document.write(mynum);
document.write(mystring);
(3)打印字符串+变量
var mynum=10;
document.write("mynum数值="+mynum);
2.消息对话框
(1)警告框：alert()
消息对话框就是在当前网页弹出一个窗口，用来提示用户，只有一个确定键。就像：
谷歌浏览器它长这样：
使用方式：
alert("警告内容！");
(2)确认框：comfirm()
相比于警告框来说，确认框多了一个<取消>按钮，例如：
方法说明：confirm(string)
- 参数：字符串类型
- 返回值：Boolean
确认返回：true取消返回：false
用法，例如对性别进行确认：
var mymessage= confirm("你是女的吗？"+"是的选“确定”,否则选择“取消”");
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
(3)提问框:prompt()
提问框相对于确认框又多了一个文本输入框，即可以在框里输入文本，例如：
方法说明：prompt(String)
- 参数：String，需要提示的内容
- 返回值：string
确认返回：输入的内容取消返回：null
使用举例：
var score; //score变量，用来存储用户输入的成绩值。
score =prompt("请输入你的成绩：");
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
3.窗口操作
(1)打开新窗口(新网页):window.open()
打开新窗口，就是其实就是打开新的网页。
方法说明：window.open([URL], [窗口名称], [参数字符串])
- 参数：
- URL：需要打开新的网页
- 窗口名字：
- 1.该名称由字母、数字和下划线字符组成。
- 2."_top"、"_blank"、"_self"具有特殊意义的名称。
- _blank：在新窗口显示目标网页
- _self：在当前窗口显示目标网页
- _top：框架网页中在上部窗口中显示目标网页
- 3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
- 4.name 不能包含有空格。
- 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开，各参数如下：
- top: 到页面顶部的距离，单位：像素
- left: 到页面左边的距离，单位：像素
- width: 页面宽度，单位：像素
- height: 页面高度，单位：像素
- menubar: 有无菜单栏，单位：像素
- toolbar: 有无工具栏，单位：像素
- scrollbars: 有无滚动条，单位：像素
- startus: 有无状态栏，单位：像素
- 返回值：新窗口对象
用法举例，打开百度，宽度600px：
window.open('http://www.baidu.com','new_window','width=600px,heith=400px,top=100px,left=0px');
(2)关闭窗口：window.close()
关闭窗口有两种方式。
- window.close():关闭当前窗口
- [窗口对象].close()：关闭指定窗口
用法举例：
var mywin=window.open("http://www.baidu.com");
//[窗口对象].close()
mywin.close();//先关闭新开的窗口
//window.close()
window.close();//再关闭当前窗口
四、第三章：DOM操作
1.什么是DOM
先来说下什么是DOM，DOM(Document Object Model)文档对象模型，重要记住一点：它属于对象。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合，三种常见的DOM节点:
- 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
- 文本节点:向用户展示的内容，如<li>…</li>中的JavaScript、DOM、CSS等文本。
- 属性节点:元素属性，如<a>标签的链接属性href=“http://www.imooc.com”。
2.通过ID获取元素
ID指的是元素的唯一代号，类似身份证。获取ID的方法为：
document.getElementById("id");
方法说明：
- 参数：字符串类型，需要获取的DOM id号
- 返回：该id 的DOM对象
用法：
var mychar=document.getElementById("con");
3.innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。其实就是修改显示内容。其方法使用方式：
Object.innerHTML="新的内容";
使用示例：
var mychar=document.getElementById("con");
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML="Hello world!";
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
4.改变 HTML 样式
其实就是修改id 相对应的对象的各种属性，比如：字体大小、颜色、背景色等。
基本属性表（property）:
使用示例，字体颜色设置为红色，背景颜色修改为#CC，宽度设置为300px:
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#CCC";
mychar.style.width="300px";
5.显示和隐藏
顾名思义，控制需要显示即隐藏的对象。其控制属性也属于样式(style)。Object.style.display = value
value的取值：
- none：隐藏
- block：显示
用法示例：
var mychar = document.getElementById("con");
mychar.style.display="none";
mychar.style.display="block";
6.控制类名
className 属性设置或返回元素的class 属性，可以利用这个功能，批量设置预设好的样式。
使用方法：
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
五、总结
需要注意的几个点：
documen.write()这个函数默认不使用回车，需要使用回车的用：documen.writeln()
扫一扫
7981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
