JavaScript学习笔记_function message-CSDN博客

本文链接：https://blog.csdn.net/Karen_Yu_/article/details/80357330

之前在写周记的时候，还是觉得写的太简单了，实在不适合初学者，就算是以后自己回首再看也不方便，故决定再写一些。这次会以实例为主，防止过于理论化，希望没接触过的小可爱也可以看懂(✺ω✺)。

JavaScript是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

① Hello World

<html>
<body>

<script type="text/javascript">
document.write("Hello World!")
</script>

</body>
</html>

这个就是简单的生成文本，效果就是：

好了，还有一个问题，如果我重复写“document.write("Hello World!")”会发生什么呢？

<html>

<body>

document.write("Hello World!")

</script>

</body>

</html>

这和Python一点也不像，手动再见。不会自动换行……

当然，<h1>标签也是可以用的啦：

<html>
<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

</body>
</html>

② Head部分和body部分

Head↓

<html>
<head>
<script type="text/javascript">
function message()
{
alert("该提示框是通过 onload 事件调用的。")
}
</script>
</head>

<body οnlοad="message()">

</body>
</html>

Body↓

<html>
<head>
</head>

<body>

<script type="text/javascript">
document.write("该消息在页面加载时输出。")
</script>

</body>
</html>

将两者结合：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
	function message()
	{
	alert("该提示框是通过 onload 事件调用的。")
	}
	</script>
</head>


<body>

	<script type="text/javascript">
	document.write("该消息在页面加载时输出。")
	</script>

</body>
</html>

所看到的就是一个对话框，还有后面的字

好了，写到这里，我们先停一下，针对一个问题来谈一谈。比如：

1.document.write("该消息在页面加载时输出。")

2. <script type="text/javascript">

3. function message()

4. alert("该提示框是通过 onload 事件调用的。")

先来说明

1. https://blog.csdn.net/qlzx_syzx/article/details/47218213

js方法document.write();用来向浏览器页面输出内容
具体用法：
用来输出字符串内容：document.write("输出字符串内容要使用双引号");
用来输出变量的值：如var mynum="hello"; document.write(mynum);
用来输出html标签内容：如document.write("<p>你好!</p>");
用来输出混合内容，使用”+“号来连接内容：如document.write(mynum+"<br/>"+"world");

2.<script type="text/javascript"> 放在<script></script>之间的是文本类型(text)。 javascript是告诉浏览器里面的文本是属于javascript脚本。

3. function message() 函数

function functionname()
{
这里是要执行的代码
}

4. alert https://blog.csdn.net/lixiang0522/article/details/7764730

1. alert是弹出警告框，在文本里面加入\n就可以换行。

2. confirm弹出确认框，会返回布尔值，通过这个值可以判断点击时确认还是取消。true表示点击了确认，false表示点击了取消。

3. prompt弹出输入框，点击确认返回输入框中的值，点击取消返回null。

③注释

单行注释

<html>
<body>

<script type="text/javascript">
// 这行代码输出标题：
document.write("<h1>这是标题</h1>");
// 这行代码输出段落：
document.write("<p>这是段落。</p>");
document.write("<p>这是另一个段落。</p>");
</script>

</body>
</html>

多行注释

<html>
<body>

<script type="text/javascript">
/*
下面的代码将输出
一个标题和两个段落
*/
document.write("<h1>这是标题</h1>");
document.write("<p>这是段落。</p>");
document.write("<p>这是另一个段落。</p>");
</script>

</body>
</html>

关于这个，只想吐槽一句，和C++一模一样。

④变量

<html>
<body>
<script type="text/javascript">
var firstname;
firstname="George";
document.write(firstname);
document.write("<br />");
firstname="John";
document.write(firstname);
</script>
<p>上面的脚本声明了一个变量，为其赋值，显示该值，改变该值，然后再显示该值。</p>
</body>
</html>

什么是变量呢？

在之前学习C++和Python的时候，我们也接触过变量，那么，这个变量又有什么与众不同之处呢

其实呢……在我个人看来，比较接近二者的综合，即：既需要向C++一样在前面加上几个字母表示需要一个变量，但是又不用像C++一样说明变量的类型（在这一点上与Python迷之相似）。

JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。

在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

例子

var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';

这个分号可以说是蜜汁像C++了

（说到C++，明天就是省赛热省赛了……我竟然还在划水写博客……）

其他的一些特点与C++很接近，比如：既可以在声明时赋值，也可以先声明，后面再赋值。还有就是命名规则也没什么变化（强调，大小写敏感！！！）

可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var name="Gates", age=56, job="CEO";

声明也可横跨多行：

var name="Gates",
age=56,
job="CEO";

讲实话，就没觉得连数组都像Python里的列表吗……

总结……

其实，这就是在声明时加个var，其他操作和Python没什么区别……

当然声明变量类型也是做得到的：

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

哦，那个对象嘛，就是和其他的对象一样啦：

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

对象属性有两种寻址方式：

实例

name=person.lastname;
name=person["lastname"];

然后，这个换行理所当然就是<br />

⑤函数

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button οnclick="myFunction()">点击这里</button>
</body>
</html>

在点击按钮（“点击这里”）之后会弹出上面这个框框↑

看起来和其他的函数也没什么区别啦

类似的，也可以有：

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)
{
这里是要执行的代码
}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

实例

<button οnclick="myFunction('Bill Gates','CEO')">点击这里</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " +

job

);}</script>

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

语法

function myFunction()
{
var x=5;
return x;
}

上面的函数会返回值 5。

注释：整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

函数调用将被返回值取代：

var myVar=myFunction();

myVar 变量的值是 5，也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

"demo" 元素的 innerHTML 将成为 5，也就是函数 "myFunction()" 所返回的值。

您可以使返回值基于传递到函数中的参数：

实例

计算两个数字的乘积，并返回结果：

function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);

"demo" 元素的 innerHTML 将是：

在您仅仅希望退出函数时，也可使用 return 语句。返回值是可选的：

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

⑥循环

for循环

while循环

Do-while循环

break语句

continue语句

以上内容与C++无异，以下则更像Python

使用 For...In 声明来遍历数组内的元素

⑦运算符

JavaScript 算术运算符

算术运算符用于执行变量与/或值之间的算术运算。

给定 y=5，下面的表格解释了这些算术运算符：

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y	x=4

JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

在以上语句执行后，变量 txt3 包含的值是 "What a verynice day"。

要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

或者把空格插入表达式中：

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

在以上语句执行后，变量 txt3 包含的值是：

"What a very nice day"

对字符串和数字进行加法运算

请看这些例子：

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

用法没什么好讲的……

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

给定 x=5，下面的表格解释了比较运算符：

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true

如何使用

可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：

if (age<18) document.write("Too young");

您将在本教程的下一节中学习更多有关条件语句的知识。

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2

例子

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。

⑧if-else语句

条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

If 语句

只有当指定条件为 true 时，该语句才会执行代码。

语法

if (条件)
  {
  只有当条件为 true 时执行的代码
  }

注意：请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

实例

当时间小于 20:00 时，生成一个“Good day”问候：

if (time<20)
  {
  x="Good day";
  }

x 的结果是：

Good day

请注意，在这个语法中，没有 ..else..。您已经告诉浏览器只有在指定条件为 true 时才执行代码。

If...else 语句

请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

语法

if (条件)
  {
  当条件为 true 时执行的代码
  }
else
  {
  当条件不为 true 时执行的代码
  }

实例

当时间小于 20:00 时，将得到问候 "Good day"，否则将得到问候 "Good evening"。

if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }

x 的结果是：

Good day

If...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

语法

if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

实例

如果时间小于 10:00，则将发送问候 "Good morning"，否则如果时间小于 20:00，则发送问候 "Good day"，否则发送问候 "Good evening"：

if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }

x 的结果是：

Good morning

好了，说到这里，已经足够解算法题了（大雾）

不过到这里为止都不是写这个的主要目的……

那个微信小程序太……完全没有头绪，写个JS冷静一下……