您的位置：首页 > Web前端 > JavaScript

Script入门篇

2016-01-08 19:29 615 查看
今天学的是script基础部分，目前，所有主流浏览器都支持JavaScript，全世界大部分网页都使用JavaScript，它可以让网页呈现各种动态效果。使用<script>标签在HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。

有人问：javascript和java有什么关系？答：范伟和范玮琪的关系；

JavaScript代码可以写在HTML文件里面，也可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中。<script src="script.js"></script>

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

函数是完成某个特定功能的一组语句。如没有函数，完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦，这个概念在很多领域里都能见到。构造一个函数的关键字是function。eg（function rec（）｛｝，大括号里面就能写方法的过程了）

好，下面来写一点script的基本操作吧：

直接输出内容：

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

这个呢，我觉的就类似于java中的Syso，或者是log.console();

警告（alert 消息对话框）:

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。做一个小按钮试试看：

function rec(){

var mychar="I love JavaScript";

alert(mychar);

｝

<input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />

首先我定义了一个函数rec，方法里面是弹出警告框，然后通过点击调用这个方法。

确认（confirm 消息对话框）

confirm 消息对话框通常用于允许用户做选择的动作。

方法：confirm（str）；//str是对话框中所显示的文本  eg："今天你开心么？"

返回值是boolean类型的，用户点击确定的时候返回true，点击取消的时候返回false；

提问（prompt 消息对话框）

通常这种方法用来和用户交流，问一个问题，需要用户回答：

方法：prompt（str）；//str是对话框中所显示的文本，一般是一个问题。用户通过输入答案返回信息；

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

我们可以把返回的内容赋值给一个变量，然后对变量进行操作；

打开新窗口（window.open）

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



当然，还有很多参数字符，这里只是列举了一些。

关闭窗口（window.close（））





通过ID获取元素


学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号
一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作.

方法：document.getElementById(“id”)//这里的返回值是一个标签对象，要想获得标签里面的内容要使用innerHTML,当然，如果只是想获得里面的文本的话可以使用innertext（）；

innerHTML

方法：Object.innerHTML// 这里的object就是获取的元素对象

通过这样写写法就可以获得对象里面的内容了；

改变 HTML 样式

方法：Object.style.property=new style;

property是要修改的属性，eg：color，font。

列一点属性表：



显示和隐藏（display属性）

方法：Object.style.display = value  

//value有none和block两种，字面意思就是无和快，所以呢none就是不显示，block就是显示；

控制类名（className 属性）



方法： object.className = classname，等号后面就是我们要修改的值了；

eg：

<span style="font-size:14px;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>

<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
</html></span>
通过修改类名，我们实现了对象的样式改变。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航