javascript入门篇
PS:阅读此文前请确保你已经有了HTML/CSS的一丢丢基础!
一、介绍
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
先来看一个例子
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>欢迎来到javascript的世界</title>
</head>
<body>
<script>
document.write("Hello,World!");
</script>
</body>
</html>
在上面的代码中,<script></script>标签中的代码即位javascript,它在此处的作用为输出"Hello,World!".
二、基本语法
1.定义变量
var + 变量名
如:var att=3;
var btt="aaaa";
变量命名规则与主流变量名命名规则一致。
2.定义函数
function + 函数名
如:function add(){}
3.if...else..结构
如:
function add()
{
var a=2;
var b=3;
if(a+b==5) document.write("Good!");
}
三、特殊函数
1.alert()
alert(字符串或变量);
如:
var mychar = "Hello,World!";
alert(mychar);//进入网页时弹出一个对话框
2.confirm()
confirm(srt)//返回值为布尔变量
如:
var mychar=confirm("Please click here");
if(mychar==true){
document.write("LALALA!");
}
else {
document.write("LABABA!");
}
//点击确认按钮,函数返回true,继续执行if结构内的代码,反之执行else结构内的代码。
8.prompt()
prompt(str1, str2);
str1: 要显示在消息对话框中的文本,不可修改 str2:文本框中的内容,可以修改
返回值:
(1)点击确定按钮,文本框中的内容将作为函数返回值 .(2) 点击取消按钮,将返回null
如:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>欢迎来到javascript的世界</title>
</head>
<body>
<script>
var myname=prompt("请输入你的姓名:","www");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
</script>
</body>
</html>
四、DOM
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。
(1)通过id获取元素
var ts=document.getElementById("con");//con 为html代码中一个元素的id
(2)innerHTML属性
通过innerHTML属性改变HTML元素中的内容 object.innerHTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML="Hello world!";
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>
(3)改变HTML样式
object.style.property= new style;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="red";
mychar.style.width="300px";
</script>
</body>
</html>
(4)显示和隐藏效果
object.style.dispaly= value;
//value = "block" 显示
//value = "none" 隐藏
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">欢迎来到javascript的世界</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>
持续更新~