文章目录

前言
一、JS入门学习之路
二、第一章: 做好准备
- 1.如何插入JS程序
- 2.如何引用外部JS文件
- 3.认识语句和符号
- 4.注释很重要
- 5.什么是变量
- 6.判断语句
- 7.什么是函数
三、第二章：常用互动方法
- 1.输出内容：documen.write()
- - (1)只打印字符串
  - (2)打印变量
  - (3)打印字符串+变量
- 2.消息对话框
- - (1)警告框：alert()
  - (2)确认框：comfirm()
  - (3)提问框:prompt()
- 3.窗口操作
- - (1)打开新窗口(新网页):window.open()
  - (2)关闭窗口：window.close()
四、第三章：DOM操作
- 1.什么是DOM
- 2.通过ID获取元素
- 3.innerHTML 属性
- 4.改变 HTML 样式
- 5.显示和隐藏
- 6.控制类名
五、总结

前言

既然发誓要成为一名全栈工程师，既然都已经学会了画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()

[微信小程序基础]Java Script从入门到放弃之首次接触Java Script相关推荐

《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
微信小程序开发（三）入门之创建打卡活动
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(四)入门之打卡功能开发前言上篇介绍了日历打卡小程序发现页视图相关开发 ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
2020最新微信小程序基础+实战精讲视频负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...
【微信小程序创作之路】-入门
[微信小程序创作之路]-入门第一章微信小程序历史.简介.开启创作之路文章目录 [微信小程序创作之路]-入门前言一.小程序的简介二.小程序的历史三.小程序优势 1.使用门槛低 2.快速开发 ...
更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
微信小程序基础（全家福01）
微信小程序基础目标能够知道如何创建小程序项目能够清除小程序项目的基本组成结构能够知道小程序页面有几个部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布讲解目录 ...
微信小程序基础库的问题
微信小程序基础库的问题很多刚开始开发小程序的开发者经常会遇到在开发者工具的模拟器里面可以正常使用小程序的某个API,但是在预览(真机测试)时打开调试发现使用的API报错,但是开发工具里面的基础库是支 ...

[微信小程序基础]Java Script从入门到放弃之首次接触Java Script