JavaScript------入门

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%request.setCharacterEncoding("gb2312"); %>
<%response.setContentType("text/html;charset=gb2312"); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JS</title>
<!-- 导入外部JS文件 -->
<!-- <script type="text/javascript" src="myjs.js" charset="gb2312"></script> -->
<script type="text/javascript">
    function con(){
        var answer=confirm("你幸福吗?");
        if(answer==true){
            alert("幸福");
        }
        else{
            alert("不幸福");
        }
    }
    function pro(){
        var name=prompt("用户名:");
        if(name!=null){
            document.write("欢迎您:"+name);
        }
        else{
            document.write("输入信息为空");
        }
    }
    function op(){
        //window.open("http://www.baidu.com", "_blank", "width=500,height=500,menubar=no,toolbar=no, status=no,scrollbars=no");
        var win=window.open("http://www.baidu.com", "_blank");
        win.close();
    }
    function my(){
        var answer=confirm("是否打开新网站?");
        if(answer==true){
            var name=prompt("网址:");
            if(name==null){
                window.open(name,"_blank");
            }
            else{
                window.alert("输入信息空白,请重新输入");
            }
        }
    }
</script>

<style type="text/css">
    .one{
        color:#aaa;
    }
    .two{
        color:#123;
    }
</style>
</head>

<body>
    <input type="button" onclick="con()" value="confirm">
    <input type="button" onclick="pro()" value="prompt">
    <input type="button" onclick="op()" value="open" >
    <input type="button" onclick="my()" value="more" >
    
    <!-- 修改信息 -->
    <p id="world">我的世界</p>
    <script type="text/javascript">
        var world=document.getElementById("world");
        world.style.color="blue";
        document.write(world.innerHTML);
        world.innerHTML="My World";
        document.write(world.innerHTML);
    </script>
    <br>
    <br>
    <!-- 显示与隐藏 -->
    <table id="info">
        <tr>
            <td><input type="text"></td>
        </tr>
    </table>
    <script type="text/javascript">
        function showtext(){
            document.getElementById("info").style.display="block";
        }
        function hidetext(){
            document.getElementById("info").style.display="none";
        }
    </script>
    <input type="button" value="显示" onclick="showtext()">
    <input type="button" value="隐藏" onclick="hidetext()">
    
    <!-- 获取元素的class属性 -->
    <p id="message" class="one">我的信息</p>
    <script type="text/javascript">
        function change(){
            var my=document.getElementById("message");
            my.className="two";
        }
    </script>
    <input type="button" value="改变样式" onclick="change()">
</body>
</html>
原文地址:https://www.cnblogs.com/tianhengblogs/p/5373840.html