变量
变量:从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。
![10186693-09d24967206e233a.png](https://i-blog.csdnimg.cn/blog_migrate/3c35d2a99ffe12649919a5565401e6b5.webp?x-image-process=image/format,png)
定义变量使用关键字var,语法如下:
var 变量名
var就相当于找盒子的动作,在JavaScript中是关键字(即保留字),这个关键字的作用是声明变量,并为"变量"准备位置(即内存)。
变量名可以任意取名,但要遵循命名规则:
1.变量必须使用字母、下划线(_)或者美元符($)开始。
正确:
mysum
_mychar
$numa1
错误:
6num //开头不能用数字
%sum //开头不能用除(_ $)外特殊符号,如(% + /等)
sum+num //开头中间不能使用除(_ $)外特殊符号,如(% + /等)
2.变量名区分大小写,如:A与a是两个不同变量。然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.不能使用JavaScript关键词与JavaScript保留字。
![10186693-726ca7be1b7b5801.png](https://i-blog.csdnimg.cn/blog_migrate/49f454f80a8038acf955c810b657fa40.webp?x-image-process=image/format,png)
变量要先声明再赋值,如下:
var mychar;
mychar="javascript";
var mynum = 6;
变量可以重复赋值,如下:
var mychar;
mychar="javascript";
mychar="hello";
![10186693-b7fc7068681827bf.png](https://i-blog.csdnimg.cn/blog_migrate/48ff126447e17e686827a5f48fecbb4d.webp?x-image-process=image/format,png)
注意:
在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量。
变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。
函数
函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。
语法:
function 函数名()
{
函数代码;
}
说明:
function定义函数的关键字。
"函数名"你为函数取的名字。
"函数代码"替换为完成特定功能的代码。
例子1:
实现两数相加的简单函数,并给函数起个有意义的名字:“add2”
function add2(){
var sum = 3 + 2;
alert(sum);
}
函数调用:
函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了,代码如下:
![10186693-a27f2f007b6c3848.png](https://i-blog.csdnimg.cn/blog_migrate/53f01797af64fbe3b8c474bf50c5d8a7.webp?x-image-process=image/format,png)
例子2:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数调用</title>
<script type="text/javascript">
function contxt() //定义函数
{
alert("哈哈,调用函数了!");
}
function contxt2(){
alert("到此一游!");
}
</script>
</head>
<body>
<form>
<input type="button" value="点击我" onclick=" contxt()" />
</form>
<form>
<input type="button" value = "点击我呀" onclick= "contxt2()"/>
</form>
</body>
</html>
![10186693-1464efd2453bf2bf.png](https://i-blog.csdnimg.cn/blog_migrate/f3ed9517ad124bf3d76a91908eab96c1.webp?x-image-process=image/format,png)
输出内容(document.write)
document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
![10186693-4e10c0a75f184b58.png](https://i-blog.csdnimg.cn/blog_migrate/7107c3a3006e19d499fce49c450813a5.webp?x-image-process=image/format,png)
警告(alert 消息对话框)
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。
语法:
alert(字符串或变量);
看下面的代码:
<script type="text/javascript">
var mynum = 30;
alert("hello!");
alert(mynum);
</script>
![10186693-1b624511bc82daed.png](https://i-blog.csdnimg.cn/blog_migrate/4db92df91c343c71d89fb8ee7b69d3f6.webp?x-image-process=image/format,png)
注意:
在点击对话框"确定"按钮前,不能进行任何其它操作。
消息对话框通常可以用于调试程序。
alert输出内容,可以是字符串或变量,与document.write 相似
确认(confirm 消息对话框)
confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法:
confirm(str);
参数说明:
str:在消息对话框中要显示的文本
返回值: Boolean值
返回值:
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
注: 通过返回值可以判断用户点击了什么按钮
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大,要学习噢!"); }
</script>
![10186693-f0cf01ae7e238a23.png](https://i-blog.csdnimg.cn/blog_migrate/dfab420af5c1e5a2786298baee5c8e9e.webp?x-image-process=image/format,png)
注: 消息对话框是排它的,即用户在点击对话框按钮前,不能进行任何其它操作。
提问(prompt 消息对话框)
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
语法:
prompt(str1, str2);
参数说明:
str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
1. 点击确定按钮,文本框中的内容将作为函数返回值
2. 点击取消按钮,将返回null
看看下面的代码:
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
![10186693-436ee6ec38077bea.png](https://i-blog.csdnimg.cn/blog_migrate/3178c400c2545e820efcccc5f3a3bb6f.webp?x-image-process=image/format,png)
注:在用户点击对话框的按钮前,不能进行任何其它操作。