Javascript基础篇

来源：互联网发布：dnd为什么这么小众知乎编辑：程序博客网时间：2024/06/10 08:40

特点：

1、一种脚本语言，传到服务器之厚才编译执行
2、基于对象，而不是面向对象，不存在继承、重载、抽象。
3、简单（弱变量）
4、安全，不允许访问本地平台，跨平台执行
5、动态执行，动作无需传到服务器，可以直接与用户交互。

一个简单的例子：

<body>    <script type=text/javascript>        document.write("这是一个简单的例子");    </script></body>或者：<body>    <script language=javascript>        document.write("这是一个简单的例子");    </script></body>

tips:js代码并不一定要写在HTML文档内。只需要用一个script标签引入即可，js代码可写在另外一个以.js结尾文件里，例如：

<html>    <head>        <title></title>        <script src="demo.js"></script>    </head>    <body>    </body></html>demo.js:    document.write("hello world");

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

常用互动函数：

1.alert():警告；返回值TRUE；
alert("在点击确定之前不能对网页执行任何操作"）;
alert(var);
2.confirm();确认；返回true or false；可用于判断；
Ifinteresting=confirm("interesting?");
3.prompt();提问；
格式：prompt(str1,str2);
其中，str1是显示在对话框的内容，不可修改；str2是用户输入的内容;
返回值：点击确定按钮，str2将作为函数返回值
点击取消按钮，将返回null
4.window.open();打开新窗口
格式：window.open([URL], [窗口名称], [参数字符串])URL记得加http://
窗口名称：
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
参数字符串用来设置网页属性。(width,height等，用逗号隔开)

tips:window对象居然是有返回值的。返回一个window对象，可赋给一个变量，并调用该变量的.close()函数将窗口关闭；

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

innerHTML:

用法：Object.innerHTML，相当于一个变量。
原理：每个标签都可以通过设置id来唯一标示。那么就可以通过id来寻找标签。利用document.getElementById("id")，返回值是标签 来寻找标签，并通过innerHTML指向标签内的HTML值。
例子：<p id=demo> hello </p>
var inner=document.getElementById("demo");//inner获得对象标签<p>
inner.innerHTML="new sentence";//为对象赋新值

tips：除了修改内容，还可以修改其样式，如color,font-size等。

用法：Object.style.属性=;

此外，还可以设置内容显示或隐藏:

用法：Object.style.display=value(block显示/none)隐藏，通常添加到一个button功能里，通过函数调用。例子： function hidetext()      {          var mychar = document.getElementById("con");        mychar.style.display="none";    }          function showtext()      {          var mychar = document.getElementById("con");        mychar.style.display="block";    }    <form>         <input type="button" onclick="hidetext()" value="隐藏内容" />         <input type="button" onclick="showtext()" value="显示内容" />     </form>

0 0