[置顶] java script第一课

时间：2021-09-18 22:16:19

什么是java script?

1.是用于web前端开发，提高用户交互性的一种简单的脚本语言。
2是一种基于对象和事件驱动的客户端脚本语言（弱类型）。
3也直接可以运行在操作系统上，需要node.js环境支持。
4netscape公司1997年创建的，livescript。
5.js作用：验证/交互/页面特效

第一个javascript程序

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"

  • strict.dtd表示这个文档是严格格式的规范。

  • window.alert(‘123’);
    以弹窗的方式在浏览器中显示出来。
    缺点：突然弹出，用户的体验不好。

  • console.log(‘控制台.日志（）’);

  • console.warn(‘控制台.警告（）’);

  • console.error(‘控制台.错误（）’);
    会在控制台输出内容，开发时经常使用

  • document.write();
    直接在页面输出内容

使用js实现二级菜单

onmouseover 鼠标移入
onmouseout 鼠标移除
1.获取标签
document.getElementById(”);
2.用提供的属性和=，控制样式
.style.width=”200px”;

<ul>
<li class="one">一级菜单</li>
<li class="one">一级菜单</li>
<li class="one"
onmouseover="document.getElementById('two').style.display='block'"
onmouseout="document.getElementById('two').style.display='none'">
                一级菜单
<ul style="display:none" id="two" class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>

onclick

函数：把一系列操作都集中在一起管理。
function：声明函数
zoomIn ;函数名称
(): 表示这是一个函数
{}： 写在大括号里面的代码表示一个整体。

<head>
<meta charset="UTF-8">
<title>换皮肤效果</title>
<link rel="stylesheet" href="css/green.css" id="link"/>
<script type="text/javascript">
function red(){
 document.getElementById('link').href="css/red.css";
 }
function green(){
 document.getElementById('link').href="css/green.css";
 }
</script>
</head>
<body>
<input type="button" value="红色" onclick="red()"/>
<input type="button" value="绿色" onclick="green()"/>
</body>
标签：

相关文章