JAVAscript与css的区别是什么呀?

html-css017

JAVAscript与css的区别是什么呀?,第1张

首先要搞懂这2个是干什么的:

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作等。

css是一种用来表现HTML或XML等文件样式的语言。比如,使用CSS可以更加灵活地控制具体的页面外观,从精确的布局定位到特定的字体和样式。

这2种都是用来做网页的语言,只是使用功能不一样,当然,JS现在可以用来做服务器端开发了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>输入框提示列表效果</title>

<style type="text/css">

<!--

body{background:#fff}

.Menu {

position:relative

width:204px

height:127px

z-index:1

background: #FFF

border:1px solid #000

margin-top:-100px

display:none

}

.Menu2 {

position: absolute

left:0

top:0

width:100%

height:auto

overflow:hidden

z-index:1

}

.Menu2 ul{margin:0padding:0}

.Menu2 ul li{width:100%height:25pxline-height:25pxtext-indent:15px

border-bottom:1px dashed #ccccolor:#666cursor:pointer

change:expression(

this.onmouseover=function(){

this.style.background="#F2F5EF"

},

this.onmouseout=function(){

this.style.background=""

}

)

}

input{width:200px}

.form{width:200pxheight:auto}

.form div{position:relativetop:0left:0margin-bottom:5px}

#List1,#List2,#List3{left:0pxtop:93px}

-->

</style>

<script type="text/javascript">

function showAndHide(obj,types){

var Layer=window.document.getElementById(obj)

switch(types){

case "show":

Layer.style.display="block"

break

case "hide":

Layer.style.display="none"

break

}

}

function getValue(obj,str){

var input=window.document.getElementById(obj)

input.value=str

}

</script>

</head>

<body>

<div class="form">

<div>Location:<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show')" onblur="showAndHide('List1','hide')"></div>

<!--列表1-->

<div class="Menu" id="List1">

<div class="Menu2">

<ul>

<li onmousedown="getValue('txt','中国CHINA')showAndHide('List1','hide')">中国CHINA</li>

<li onmousedown="getValue('txt','美国USA')showAndHide('List1','hide')">美国USA</li>

</ul>

</div>

</div>

<div>:<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show')" onblur="showAndHide('List2','hide')"></div>

<!--列表2-->

<div class="Menu" id="List2">

<div class="Menu2">

<ul>

<li onmousedown="getValue('txt2','男Male')showAndHide('List2','hide')">男Male</li>

<li onmousedown="getValue('txt2','女Female')showAndHide('List2','hide')">女Female</li>

</ul>

</div>

</div>

<div>education:<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show')" onblur="showAndHide('List3','hide')"></div>

<!--列表3-->

<div class="Menu" id="List3">

<div class="Menu2">

<ul>

<li onmousedown="getValue('txt3',this.innerText)showAndHide('List3','hide')">大专</li>

<li onmousedown="getValue('txt3','本科')showAndHide('List3','hide')">本科</li>

<li onmousedown="getValue('txt3','硕士')showAndHide('List3','hide')">硕士</li>

<li onmousedown="getValue('txt3','本科')showAndHide('List3','hide')">本科</li>

</ul>

</div>

</div>

</div><br/><br/>更多代码请访问 <a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a>

</body>

</html>

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

除了HTML和CSS,JavaScript是万维网的核心技术之一。JavaScript支持交互式web页面,是web应用程序的重要组成部分。绝大多数网站都使用它,主要的网络浏览器都有专门的JavaScript引擎来执行它。

javascript的特点

1、脚本语言。 JavaScript是一种解释型脚本语言。首先编译和执行C,C ++和其他语言,同时在程序运行期间逐行解释JavaScript。

2、基于对象。 JavaScript是一种基于对象的脚本语言,不仅可以创建对象,还可以使用现有对象。

3、简单。 JavaScript语言使用弱类型的变量类型。它对使用的数据类型没有严格要求。它是一种基于Java基本语句和控件的脚本语言。它的设计既简单又紧凑。

4、动态。 JavaScript是一种事件驱动的脚本语言,无需通过Web服务器即可响应用户输入。访问网页时,鼠标可以在网页上单击鼠标,或上下移动并移动窗口。 JavaScript可以直接响应这些事件。