JavaScript基础

最新推荐文章于 2023-01-08 10:04:43 发布
最新推荐文章于 2023-01-08 10:04:43 发布
阅读量556 收藏
点赞数 1
分类专栏： Html 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012764110/article/details/54599436
版权

1、基础语法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{
            color: orange;
        }
    </style>
    <script language="JavaScript">
        var arr = new Array(3);
        arr[0] = 1;
        arr[1] = 2;
        arr[2] = 3;
        arr[3] = 4;

        var result1, result2, result3;
        result1 = true && false;
        result2 = true || false;
        result3 = !true;

        var str1, str2;
        str1 = "today";
        str2 = " off";

        var sentence;
        sentence = "今天是2017年1月18日星期三";

        var compareStr;
        compareStr = (3 > 4) ? "三大于四" : "三小于四";


    </script>
</head>
<body>
<br>
<script language="JavaScript">
    document.write("长度定义了没用，还是可以打印" + arr[3] + "\n");
</script>
<br>

<p>字符串拼接</p>
<script language="JavaScript">
    document.write(str1 + str2 + "\n");
</script>
<p>字符串substring</p>
<script language="JavaScript">
    document.write(sentence.substring(3, 13));
</script>
<p>条件操作符</p>
<script language="JavaScript">
    document.write(compareStr);
</script>
<p>时间</p>
<script language="JavaScript">
    var today = new Date();
    var hour = today.getHours();
    if (hour < 12) {
        document.write("早上好");
    }
    else if (hour == 12) {
        document.write("中午好");
    } else {
        document.write("下午好");
    }
</script>
<p>循环</p>
<script language="JavaScript">
    var i = 1;
    while (i < 10) {
//        document.write(i+"<br>");
        document.write(i + "  ");
        i++;
    }
</script>
<p>switch语句</p>
<script language="JavaScript">
    var hour = 9;
    switch (hour) {
        case 1:
            document.write("1");
            break;
        case 2:
            document.write("2");
            break;
        case 9:
            document.write("9");
            break;
        default :
            document.write("none");
    }

</script>
<p>for循环</p>
<script language="JavaScript">
    var arr = new Array(1, 2, 3, 4, 5);
    for (i = 0; i < arr.length; i++) {
        document.write(arr[i] + " - ");
    }
</script>
<p>do while</p>
<script language="JavaScript">
    var i = 0;
    do {
        document.write(i + " ");
        i++;
    } while (i < 6)

</script>
<p>while</p>
<script language="JavaScript">
    var sentence = "今天是2017年1月18日星期三";
    var i = 0;
    while (i < 10) {
        document.write(sentence.charAt(i) + " ");
        i++;
    }

</script>
</body>
</html>

2、函数调用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js函数事件处理</title>
    <style type="text/css">
        p {
            color: orange;
        }
    </style>

    <script language="JavaScript">
        function test() {
            document.write("我是js方法里输出的语句");
        }
        function testParam(a) {
            document.write("输出" + a);
        }
        function testBack(a,b){
            return a+b;
        }
    </script>


</head>
<body>

<p>直接调用js的无参无返回值方法</p>
<script language="JavaScript">
    test()
</script>
<p>直接调用js的有参数无返回值方法</p>
<script language="JavaScript">
    testParam("我是参数里的内容");
</script>
<p>直接调用js的有参数有返回值方法</p>
<script language="JavaScript">
   document.write( testBack(2,3));
</script>

</body>
</html>

3、对话框

1、询问对话框

                打开页面就弹出询问框
                var useName = prompt("请输入你的名字");
                document.write("你好" + useName);

2、确认对话框

        function comfirmt() {
            if (confirm("你确认删除文件嘛")) {
                document.test.submit();
            }
        }
    <input type="button" value="删除文件" name="deletebn"
           onclick="JavaScript:comfirmt()">

3、提示框

 alert("打开页面了");

4、JavaScript内置对象

1、for in

    <script language="JavaScript">
        var a = new Array("Java","C#","ObjectC","C++","Python");
        for( i in a){
            document.write(a[i]+" ");
        }
    </script>

2、new 

 <script language="JavaScript">
        var today = new Date();
        alert(today.getDate());
    </script>

3、this 指代当前这个对象

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>内置对象 this</title>
    <style type="text/css">
        p {
            color: orange;
        }
    </style>

    <script language="JavaScript">
        function checkit(obj) {
            if (obj.value == "") {
                alert("空值");
            } else {
                alert("有值：" + obj.value);
            }
        }

    </script>


</head>
<body>

<h4>this</h4>
<img src="../../img/aaaa.png" onclick="JavaScript:alert(this.src)">

<form name="thisform" action="01.jsp" method="get">
    <input type="text" name="hq" value=""
           onclick="JavaScript:checkit(this)">
</form>
</body>
</html>

4、with

    <script language="JavaScript">
        //相当于省略了document.write("")  XXXXXX
        with (document) {
            write("today ");
            write("is ");
            write("Wendthday");
        }
    </script>

5、函数事件处理

onClick onmouseover onsubmit等。下面两个demo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js函数事件处理</title>
    <style type="text/css">
        p {
            color: orange;
        }
    </style>
    <script language="JavaScript">
        function check() {
            if (document.test.namevalue.value == "") {
                alert('姓名不允许为空')
                return false;
            }
            alert("检查通过")
            return true;
        }
    </script>

</head>
<body onload="Javascript:alert('onload');"
      onsubmit="Javascript:alert('submit')"
      onUnload="Javascript:alert('bye');">

<p>onLoad---出现在一个文档完成对一个窗口的载入时,一般写在body里，对应onUnload</p>

<a href="JS1.html"> 跳转到百度</a>

<form name="test" action="01.jsp" onsubmit="return check()">

    <p>onfocus---获取焦点后就有弹框</p>

    <input type="text" name="username"
           value="HQ,onfocus"
           onfocus="JavaScript:alert(document.test.username.value);">


    <p>onclick---点击后就有弹框</p>

    <input type="text" name="usernameClick" 
           value="HQ,click"
           onclick="JavaScript:alert(document.test.usernameClick.value);">


    <p>onmouseover onmouseout---</p>

    <input type="text" name="namemouseover" 
           value="HQ,onmouseover"
           onmouseout="JavaScript:alert('mouseout')"
           onmouseover="JavaScript:alert(document.test.namemouseover.value);">


    <p>onSubmit---用户通过提交按钮提交一个表单时</p>

    <div>
        <input type="text" value="姓名">
        <input type="text" name="namevalue">
    </div>
    <input type="submit" value="提交">

</form>
</body>
</html>

6、打开关闭另一个页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p {
            color: orange;
        }
    </style>

    <script language="JavaScript">
            window.status = "这里是窗口底部状态栏中的文字"
            //因为浏览器禁止，所以很少使用了
           var abc = window.open("https://www.baidu.com/index.php?tn=78040160_40_pg",
                    "newWin");
    </script>

    <script language="JavaScript">
        function closeWindow(){
            abc.close();
        }

    </script>


</head>
<body>

<input type="button" value="点我关闭下个页面"
       onclick="JavaScript:closeWindow()">

</form>
</body>
</html>

7、页面跳转

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p {
            color: orange;
        }
    </style>

    <script language="JavaScript">
//        alert(window.location); //==document.location
//        window.status = "这里是窗口底部状态栏中的文字"
//        //因为浏览器禁止，所以很少使用了
//        var abc = window.open("https://www.baidu.com/index.php?tn=78040160_40_pg",
//                "newWin");
    </script>

    <script language="JavaScript">
        function closeWindow() {
            abc.close();
        }

        function jump() {
            window.location = "JS7Window2.html"
        }

    </script>


</head>
<body>

<input type="button" value="点我关闭页面"
       onclick="JavaScript:closeWindow()">

<input type="button" value="点我切换到下个页面"
       onclick="JavaScript:jump()">

</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p {
            color: orange;
        }
    </style>


    <script language="JavaScript">

        function goback() {
            history.back();
        }

    </script>

</head>
<body>

<input type="button" value="回到上个页面"
       onclick="JavaScript:goback()">


<input type="button" value="回到上个页面 "
       onclick="JavaScript: history.back()">

</form>
</body>
</html>

8、表单提交


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table, td {
            border: 1px solid #006
        }

        table {
            background-color: #cccccc;
        }

        td {
            background-color: #fff
        }

        /*td  是tr的子元素 给td设置的背景色覆盖了，给tr加的hover背景色，把td的背景色去掉就好，hover一般都加到td上*/
        tr {
            background-color: red;
        }

        td:hover {
            background-color: aquamarine;
        }

        /*这个属性是有用的，隐藏表格中空单元格上的边框和背景：*/
        .t {
            border-spacing: 10px 6px;
            empty-cells: hide;
        }
    </style>

    <script language="JavaScript">
        // onBlur方法,失去焦点时，就会调用这个方法
        function checkMyUserName(a){
            document.getElementById("userNameError").innerHTML= a.toUpperCase();
        }

        //定义的函数
        function checkData(){
            if(document.test.passwordInput.value.length<6){
                alert("密码长度小于6");
                return false;//return true提交 ；false 不提交
            }
            else{
                alert(document.test.passwordInput.value.length+"密码验证成功");
            }

            if(document.test.interest3.selectedIndex ==0){
                alert("请选择省份")
                return false;
            }

            if(document.test.intro.value.trim()==""){
                alert("请填写自我介绍");
                return false;
            }
        }

    </script>
</head>
<body>
<form  name="test" action="01.jsp" method="get" onSubmit="return checkData()">

    <table border="1" align="center" width="750">
        <caption>表单</caption>
        <tr>
            <td colspan="2" align="center">用户注册</td>
        </tr>
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" name="userName" size="30"
                       onblur="checkMyUserName(this.value.toLowerCase())">
                <div id="userNameError"></div>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" name="passwordInput" maxlength="10"/>
            </td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td>
                <input type="password" name="passwordConfirm" maxlength="10"/>
            </td>
        </tr>
        <tr>
            <td>性别(radio同名不同value)</td>
            <td>
                <input type="radio" name="sex" value="boy" checked>男
                <input type="radio" name="sex" value="girl">女
            </td>
        </tr>
        <tr>
            <td>兴趣：(checkBox同名不同值)</td>
            <td>
                <input type="checkbox" name="interest" value="vc"checked>VC
                <input type="checkbox" name="interest" value="vb">VB
                <input type="checkbox" name="interest" value="java">JAVA
                <br>
                <input type="checkbox" name="interest" value="c#">C#
                <input type="checkbox" name="interest" value="python">python
                <input type="checkbox" name="interest" value="php">php
            </td>
        </tr>

        <!--看不见  但是都会提交到服务器的-->
        <input type="hidden" name="interest" value="jsp">

        <!--多选列表-->
        <tr>
            <td>列表 可多选 显示四个，按ctrl多选</td>
            <td>
                <select name="interest2" size="4" multiple>
                    <option value="jump" selected>跳</option>
                    <option value="swim">游泳</option>
                    <option value="run">跑步</option>
                    <option value="walk">走路</option>
                    <option value="watch">看</option>
                </select>
            </td>
        </tr>

        <!--多选列表-->
        <tr>
            <td>列表 单选</td>
            <td>
                <select name="interest3" >
                    <option value="jump" selected>跳</option>
                    <option value="swim">游泳</option>
                    <option value="run">跑步</option>
                    <option value="walk">走路</option>
                    <option value="watch">看</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>自我介绍</td>
            <td>
                <textarea rows="12" cols="60" name="intro" wrap="hard"></textarea>
            </td>
        </tr>

        <tr>
            <td  colspan="2" align="cen">
                <input type="submit" value="提交">
                <input type="reset" value="重置">
                <input type="button" value="这个按钮只有在javaScript">
            </td>
        </tr>

    </table>
</form>
</body>
</html>
苹果树上的女孩
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript之动态网页编程
车晋强的专栏
03-07 2989
第一章  JavaScript简介 JavaScript在HTML中的使用： 在网页文件的标签对中直接编码 将程序代码放置在一个单独的文件中，在网页的适当位置引用这个文件 将程序代码作为某个元素的事件属性值，或超链接的href属性。 可以出现在HTML文件中的标签对中，也可以出现在标签对中，在一个HTML中，可以使用多个标签对。并且各段JavaScript代码之间可以相互访问，
javascript学习笔记（-）
qq_45922060的博客
03-14 334
js代码从上到下一行一行的执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> alert("梅西踢球真帅"); document.write("你永不独行");//body里面输出一个内容 console.log("安小鸟想要飞也飞不高"); </script> &lt
.net中javascript与后台cs通讯
web开发自学
06-20 130
1.如何在JavaScript访问C#函数? 　　2.如何在JavaScript访问C#变量? 　　3.如何在C#中访问JavaScript的已有变量? 　　4.如何在C#中访问JavaScript函数? 　　问题1：javaScript函数中执行C#代码中的函数： 　　方法一： 1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中; 　　2、在前台写...
在ASP.NET使用javascript的一点小技巧
雾里寻踪
07-24 2299
我们在进行ASP.NET开发时，经常会用到一些javascript脚本，比如： private void Button1_Click(object sender, System.EventArgs e){ Response.Write( "alert(OK);") ;} 经常是重复的书写这些脚本，如果我们能做成一个相应的函数就好了，直接就可以拿来使用。很多人都有自己的一些javascrip
JavaScript详解
最新发布
m0_52896041的博客
01-08 1106
JavaScript超详解
JavaScript 基础
liangaoyun的博客
12-05 426
1、引入方式： 1、内部形式：通过 script 标签包裹 JavaScript 代码 <script> alert('努力 奋斗') </script> 2、外部形式：将 JavaScript 代码写在独立的以 .js 文件中，然后通过 script 标签的 src 属性引入 <script src="./my.js"></script> 如果 script 标签使用 src 属性引入了.js 文件，那么 标签的代码会被忽略.
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
ASP.NET常用到的js通用函数 c#代码可以做成dll来使用
weixin_34416649的博客
08-05 85
using System.Web; using System.Web.UI; using System.Text;    public abstract class JS       {           /**//// &lt;summary&gt;           /// 客户端打开窗口           /// &lt;/summary&gt;           ...
Javascript学习笔记（三）
阿福的专栏
08-05 988
5、Window对象： 在 JavaScript 中可以使用 window 和 self 标志符来引用当前的浏览器窗口。 每个打开的窗口定义一个window对象,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。  1>  Wi
html style样式引用
调上调下的女生
01-17 4640
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3 { color: #00b58a; } p.code { color:
html页面跳转
调上调下的女生
06-14 1315
目录结构如下： 简单的归纳就是，上一级的页面用../来寻找，下一级的页面用同级文件夹名/+name.html 1、2、3 页面之间的跳转方法分别如下1.html<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>我是Page1</h1>
JavaScript引用方式
调上调下的女生
01-18 801
1、直接在head里添加 <script type="text/javascript"> <!--弹出弹框--> alert("Hello,JavaScript") alert("Ok") </script>2、外部引用定义外部的js方法 然后在head里添加引用 <!--第二种 外部引用--> <script lan
html知识点
调上调下的女生
06-12 718
开始学习html…下了一个基础的demo, 一边看 一边百度 一边动手，，go go go~~~ 1、target=”_blank” _blank – 在新窗口中打开链接 重新打开一个页面 _parent – 在父窗体中打开链接 就是在该页面替换显示 _self – 在当前窗体打开链接,此为默认值 效果同上 _top – 在当前窗体打开链接，并替换当前的整个窗体(框架页
JavaScript基础入门教程
"这是一份JavaScript基础教程，适合初学者，提供初级知识，不涉及动态网页相关高级技术，如动态定位、动画等。教程结构设计为参考教程风格，分为5章，涵盖基础知识和进阶对象知识，以及框架和Cookie的使用。教程要求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值