JavaScript入门(2)

一、JS输出内容——(document.write)

document.write()可用于直接向HTML输出流写内容，即直接在网页中输出内容。

第一种：输出内容用" "括起来，直接输出双引号内的内容

<script type="text/javascript">

　　document.write("I Love JS!");//内容用" "括起来，" "里的内容直接输出。

</script>

第二种：通过变量，输出内容

<script type="text/javascript">

　　var mystr="hello world";

　　document.write(mystr);//直接写变量名，输出变量存储的内容

</script>

第三种：输出多项内容，内容之间用+号连接

<script type="text/javascript">

　　var mystr="hello";

　　document.write(mystr+"I Love JS");//多项内容之间用+号连接

</script>

第四种：输出HTML标签，并起作用，标签使用""括起来

<script type="text/javascript">

　　var mystr="hello";

　　document.write(mystr+"<br>");//输出hello后，输出一个换行符

　　document.write("JavaScript");

</script>

其它：JS如何输出空格

1、使用输出html标签&nbsp;

{

　　document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;"+"23");

}

2、使用CSS样式

{

　　document.write("<span style='white-space:pre;'>"+"1     2   3   "+"</span>");

　　//输出时添加'white-space:pre;'样式属性。这个样式表示“空白会被浏览器保留”

}

二、JS警告——（alert消息对话框）

语法：

alert（字符串或变量）;

Eg:

{

　　<script type="text/javascript">

　　 　　var mynum = 30;

　　　　alert("hello!");

　　　　alert(mynum);

　　</script>

}

结果：按顺序弹出消息框

注意：

1、在点击对话框“确定”按钮前，不能进行任何其他操作。

2、消息对话框通常可以用于调试程序

3、alert输出内容，可以是字符串或变量，与document.write相似。

三、JS确认——（confirm消息对话框）

语法：

confirm(str);

参数说明：

str:在消息对话框中要显示的文本

返回值：Boolean值

返回值：

当用户点击“确定”按钮时，返回true

当用户点击“取消”按钮时，返回false

注：

通过返回值可以判断用户点击了什么按钮

Eg：

{

　　<script type="text/javascript">

　　　　var mymessage=confirm("你喜欢JS吗？");

　　　　if(mymessage==true)

　　　　　　{　document.write("很好，加油！");　}

　　　　　　else

　　　　　　{　document.write("JS功能强大！");   }

　　</script>

}

结果：

注：

消息对话框是排他的，即用户在点击对话框按钮前，不能进行任何其他操作。

 四、JS提问——（prompt消息对话框）

prompt弹出消息对话框，通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）

语法：

prompt(str1, str2)

参数说明：

str1:要显示在消息对话框中的文本，不可修改

str2:文本框中的内容，可以修改

返回值：

1、点击确定按钮，文本框中的内容将作为函数返回值

2、点击取消按钮，将返回null

Eg:

{

　　var myname=prompt("请输入你的姓名：");

　　//var myname=prompt("请输入你的性别：","女");默认出现“女”。

　　if(myname!=null)

　　　　{　alert("你好"+myname);}

　　else

　　　　{　alert("你好 my friend.");}

}

结果：

注：

在用户点击对话框的按钮前，不能进行任何其他操作。

 五、JS打开新窗口——(window.open)

open()方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

window.open([URL],  [窗口名称],  [参数字符串])

参数说明：

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称：可选参数，被打开窗口的名称。

1、该名称由字母、数字和下划线字符组成。

2、“_top”、“_blank”、“_self”具有特殊意义的名称

_blank:在新窗口显示目标网页

_self:在当前窗口显示目标网页

_top:框架网页中在上部窗口中显示目标网页

3、相同name的窗口只能创建一个，要想创建多个窗口则name不能相同

4、name不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表：

Ｅｇ：

打开https://www.baidu.com/，大小为300px*200px,无菜单，无工具栏，无状态栏，有滚动条窗口：

{

　　<script  type="text/javascript">

　　　　window.open('https://www.baidu.com/' , '_blank' ,

　　　　'width=300 , height=200 , menubar=no , toolbar=no , status=no , scrollbars=yes')

</script>

}

六、JS关闭窗口——(window.close)

close()关闭窗口

用法：

window.close();//关闭本窗口

或

<窗口对象>.close();//关闭指定的窗口

Eg：

<script  type="text/javascript">

　　var  mywin=window.open('https://www.baidu.com/'); //将新打开的窗口对象，存储在变量mywin中。

　　mywin.close();

</script>

注：上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。