输出与交互

文献种类：专题技术文献；

                          输出与交互

开发工具与关键技术：VS   JavaScript     
作者：吴泽锋
撰写时间：2019年3月28日

6、出与交互
JavaScript输出与交互的主要方法：
不同浏览器上的提示框各有差异。
6.1、 document.write()
可用于直接向HTML文档写内容。简单的说就是直接在网页中输出内容。
语法: document.write(字符串或变量);
var mychar = “hello “, mystr = “world”;
第一种:输出内容用”“括起，直接输出”“号内的内容。
document.write(“hello world” + “<.br/>”);
第二种:通过变量，输出内容
document.write(mychar + mystr + “<.br/>”);
第三种:输出多项内容，内容之间用+号连接。
document.write(“大家好! " + mychar + mystr + " JavaScript”);
第四种:输出HTML标签，并起作用，标签使用”“括起来
document.write(”<p.>this is a p<./p>”);
警告：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
6.2、console.log()
可用于将内容输出到浏览器控制台，便于开发过程中的调试；
用法和 document.write() 类似可以直接输出内容，也可以输出变量。
语法: console.log(字符串或变量);
<script.> 1、console.log(“Hello World ！”); 2、 var mystr = “</br.>hello world!”;
console.log(mystr); </scrip…>
6.3、window.alert()
弹出消息对话框(包含一个确定按钮)。一般window省略不写，直接使用 alert()。
语法: alert(字符串或变量);
1、alert(“Hello World ！”); 2、var mystr = “hello world!”; alert(mystr);
6.4、window.confirm()
提示：1、一般window省略不写，直接使用 confirm()。
2、弹出对话框(包括一个确定按钮和一个取消按钮)。
3、消息对话框通常用于允许用户做选择的动作，如：“确定吗？”等。
4、对话框按钮的文字是不可改变的，因此请小心地编写问题或消息，
使它适合用确认和取消来回答。
5、在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。
在调用confirm()时，将暂停对 JS 代码的执行,在用户作出响应之前,不会执行下一条语句。
语法: confirm(字符串或变量); 参数说明: str:在消息对话框中要显示的文本.
返回值：Boolean值。点击“确定”按钮，返回true,“取消"按钮，返回false.
var r = confirm(“一个点击按钮!”); if (r == true) { alert(“已经确定点击!”); }
else { alert(“已经点击取消!”); }
6.5、window.prompt()
弹出消息对话框,通常用于询问一些需要与用户交互的信息。
弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
一般window省略不写，直接使用 prompt()。
语法: prompt(text, defaultText);
参数说明：text: 要显示在对话框中的纯文本（而不是 HTML 格式的文本），不可修改 ；
defaultText：(可选) 默认的输入文本，文本框中的内容，可以修改；
返回值:点击确定按钮，文本框中的内容将作为函数返回值点击取消按钮，将返回null
var name = prompt(“请输入你的名字！”, “”);
if (name != null && name != “”) { document.write(“Hello " + name + “!”) }
else { document.write(“你没有输入你的名字!”); }
6.6、写到文档输出
直接把 <p.> 元素写到 HTML文档输出中：document.write(”<.p>My First JavaScript</p.>”);
6.7、window.screen 对象包含有关用户屏幕的信息。
在编写时可以不使用 window 这个前缀。
返回访问者屏幕的宽度和高度，以像素计，减去界面特性，比如窗口任务栏。
6.7.1、screen.availWidth - 可用的屏幕宽度；
document.write(“可用宽度：” + screen.availWidth);
6.7.2、screen.availHeight - 可用的屏幕高度 ；
document.write(“可用高度：” + screen.availHeight);
6.8、Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight document.documentElement.clientWidth
或者 document.body.clientHeight document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
var w = window.innerWidth
|| document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight || document.body.clientHeight;
document.write(“浏览器的内部窗口宽度：” + w + “，高度：” + h + “。”);
语法：window.open(URL,name,features,replace)- 打开一个新的浏览器窗口或查找一个已命名的窗口。
URL: 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name: 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母
和下划线，该字符声明了新窗口的名称。如果该参数指定了一个已经存在的窗口，
那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。
在这种情况下，features 将被忽略。
features: 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。
如果省略该参数，新窗口将具有所有标准特征。
replace: 一个可选布尔值。规定了装载到窗口的 URL是在窗口的浏览历史中创建一个新条目，
还是替换浏览历史中的当前条目。支持下面的值：true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
语法：window.close() - 关闭浏览器窗口。
语法：window.moveTo(x,y) - 把窗口的左上角移动到一个指定的坐标。
语法：window. resizeTo(width,height)- 把窗口的大小调整到指定的宽度和高度。
\n 折行
借鉴于老师上课文档和W3School