1.JavaScript:直接写入 HTML 输出流


自学javaScript 第一天
源代码及注释如下:
<!DOCTYPE html> 

//<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。

//<!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

<html>
<head>
<meta charset="utf-8">
//utf-8是一种字符编码,除此之外在国内网站常用的还有GB2312和GBK。GB2312和GBK主要用于汉字编码,utf-8是国际编码,实用性比较强。

<title>输出流实例</title>
</head>
<body>
    
<p>
//Javascript中是没有提供<p>这个标签的。在html中提供了<p>标签,代表一个段落。
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这是一个标题</h1>");
//<h1>,代表标题,字体最大加粗。<h2>字体大小中等,加粗。
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
    
</body>
</html>

2.javaScript button的设置,事件的响应(弹框)
自学javaScript 第一天
源代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自学JavaScript</title> 
</head>
<body>

<h1> JavaScript button的设置</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>

</body>
</html>

3.调用函数更改html内容
自学javaScript 第一天自学javaScript 第一天

源代码如下

<!DOCTYPE html>

<html>
<head> 
<meta charset="utf-8"> 
<title>自学</title> 
</head>
<body>

<h1> JavaScript</h1>
<p id="demo">//在这里给段落设置了编号
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function change()//声明功能change
{
x=document.getElementById("demo");  // 通过标号找到元素,这里的x也可被其他字符代替。
x.innerHTML="Hello JavaScript!";    // 改变内容

      x.style.color="#ff0000";          // 改变样式,字体改为红色

}
</script>
<button type="button" onclick="change()">点击这里</button>

</body>
</html>


4.验证输入

自学javaScript 第一天
源代码:
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>

<h1>JavaScript</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">//输入文本,定义为text,并给了序号demo
<script>
function myFunction()
{
x=document.getElementById("demo").value;//通过序号获得文本中的内容
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>
对其中的isNaN(x)详解如下:

自学javaScript 第一天

5.输出当前时间函数Date()

自学javaScript 第一天自学javaScript 第一天

源代码:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<h1>输出当前时间</h1>
<script>
function time(){
document.write(Date());
}
</script>
<button type="button" onclick="time()">获取时间</button>
</body>
</html>

6.关于标签<div>
自学javaScript 第一天

7.关于标签<br>
自学javaScript 第一天
换行用法的实例
自学javaScript 第一天
源代码
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<script>
var carname1="Volvo XC60";
var carname2='Volvo XC60';
var answer1='It\'s alright';
var answer2="He is called \"Johnny\"";
var answer3='He is called "Johnny"';
document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>


</body>
</html>

8.关于对象

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。

实例如下:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<script>
var person= //定义一个对象
{
firstname : "John",//属性之间用逗号分隔
lastname  : "Doe",
id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["id"] + "<br>");

//对于对象有两种寻址方式   
</script>
</body>
</html>

自学javaScript 第一天


对象也可以定义一个方法,并作为其属性储存。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
   
fullName : function() //在对象中定义方法
{
       return person.firstName + " " + person.lastName;
    }
};
document.write(person.fullName());//调用对象中的方法
</script>
</body>
</html>




相关文章: