在上一篇博客中,我提到了html,css,JavaScript,在学习JavaScript之前,我们把这三者的概念在进行一次回顾。

结构层:HTML→从页面结构,语义上描述页面。
样式层:CSS→从审美的角度来装饰页面。
行为层:JavaScript→从交互的角度提升页面用户的体验

交互:网页的元素针对用户的特定行为,产生指定的变化。
JavaScript是什么?
     JavaScript是用来实现交互的。
     首先,JavaScript是纯文本,用任何的文本编辑器都能够编辑它。同时,它是网页的一部分,
随着一个html的页面被请求,JavaScript脚本也随之下载到了用户的计算机本地,在用户计算机本地
渲染运行的。

   同时注意JavaScript的一些特点:
    1 JavaScript脚本可以从网上看到。
    2 JavaScript不是Java!
    3 JavaScript轻量级运行在浏览器中的语言,而Java是跨平台的开发多种语言。
    4 JavaScript是运行在用户的计算机中的,是前台的脚本,用来开发页面效果。
    5 有JavaScript的网页仍然是静态网页。

    6  JavaScript对换行 空格不敏感,不会影响其效果,但是对大小写严格敏感。

 

 

 

下面就是我学到的几个初级的JavaScript的程序,为了更好的方便直观,我把代码放在了下面,大家在看代码时侧重注意下<div></div>与<script></script>


单机黑色圆圈,标题改变。
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>123</title>
<style>
div{
width: 100px;
height: 100px;
border-radius: 50px 50px;
background-color: black;
margin: auto;
}
</style>
<script>
function gaibian(){
document.title=”ABC”;
}
</script>
</head>
<body>
<div onclick=”gaibian()”>

</div>

</body>
</html>


单机黑色圆圈,弹出警告。
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>123</title>
<style>
div{
width: 100px;
height: 100px;
border-radius: 50px 50px;
background-color: black;
margin: auto;

}
</style>
<script>
function jinggao(){
window.alert(“警告”);
}
</script>
</head>
<body>
<div onclick=”jinggao()”>

</div>

</body>
</html>


单机黑色圆圈,页面跳转。
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>123</title>
<style>
div{
width: 100px;
height: 100px;
border-radius: 50px 50px;
background-color: black;
margin: auto;

}
</style>
<script>
function tiaozhuan(){
window.location=”www.baidu.com”;
}
</script>
</head>
<body>
<div onclick=”tiaozhuan()”>

</div>

</body>
</html>


 

       可以看到,<div></div>标签中的含义为单机此标签,会指向一个功能。!最后的括号必须添加。!而这个功能的详细指令正是在我们的<script></script>标签中,以此来实现各种功能。

     好的。

到目前为止,我们认识了三个语句:
document.title=”ABC”; 让页面的标题改变。
window.alert(“ABC”); 弹出警告
window.location=”网址”; 让页面跳转。

相信大家也发现了,这些语句很复杂并没有相同的结构。这与文字,属性,语法相关,我会继续学习,把这些也呈现
给大家,谢谢大家对我的支持。

 

版权声明:本文为799875530qq原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/799875530qq/p/5312230.html