JavaScript初步入门,一个小白刚步入JavaScript以及一些简简单单的程序,为初学者提供便利。
在上一篇博客中,我提到了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=”网址”; 让页面跳转。
相信大家也发现了,这些语句很复杂并没有相同的结构。这与文字,属性,语法相关,我会继续学习,把这些也呈现
给大家,谢谢大家对我的支持。