JS学习笔记之入门篇一

浏览数：34 / 时间：2015年06月09日

本笔记总结精简，只做查找只用，如有不当之处，欢迎指正！

1、JS代码插入

技术分享

2、JS代码引入

技术分享

3、JS在页面中的位置

技术分享

注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

4、JS 函数

function 函数名()
{
     函数代码;
}

document.write()  可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

第一种:输出内容用“”括起，直接输出""号内的内容。

<script type="text/javascript">
  document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>

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

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接写变量名，输出变量存储的内容。
</script>

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

<scripttype="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

第四种:输出HTML标签，并起作用，标签使用“”括起来。

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
</script>

5、信息框

警告（alert 消息对话框）

alert(字符串或变量);

确认（confirm消息框）

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

confirm(str);
返回值： 

当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false
提问：

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

prompt(str1, str2);
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值： 

1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null


6、窗口控制

    打开新窗口（window.open）

语法：

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

参数说明:

URL：打开窗口的网址或路径。
窗口名称：被打开窗口的名称。可以是"_top"、"_blank"、"_selft"等。
参数字符串：设置窗口参数，各参数用逗号隔开。
技术分享

关闭窗口（window.close）

用法：

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

或

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

例如:关闭新建的窗口。

<script type="text/javascript">
   var mywin=window.open(‘http://www.imooc.com‘); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

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


附：

在写JS代码的时候，大家可以会发现这样现象:

document.write("   1      2                3  ");
结果: 1 2 3

无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。

这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。

解决方法:

1. 使用输出html标签&nbsp;来解决

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

2. 使用CSS样式来解决

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

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


技术分享

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： function js javascript function js javascript

相关文章

随机文章

您可能还喜欢

您可能还喜欢