JavaWeb3-Javascript初识

最新推荐文章于 2023-04-21 13:55:38 发布

飞在天空中的野草帽

最新推荐文章于 2023-04-21 13:55:38 发布

阅读量244

点赞数

分类专栏： JavaWeb笔记文章标签： javaweb

本文链接：https://blog.csdn.net/qq_45913017/article/details/114375675

版权

JavaWeb笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、基本概念

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

二、快速入门

1、在HTML语言中引入script标签

<script type="text/javascript"> </script>

2、在该标签里面编写应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识js</title>
    <script type="text/javascript">
        // alert()用来输出警告，可接受任意类型参数，并输出提示
        alert("你好，JavaScript")
    </script>
</head>
<body>
</body>
</html>

三、基本使用

1、注释

单行注释：// 注释语句
多行注释：/** 注释语句 **/

<script>
    //单行注释
    //document.write("<h1>Date()</h1>");
    /*
    * 多行注释
    * <h1>多行注释</h1>
    * */
    document.write("<h1>这是一个页面练习</h1>");//写入标签
    document.getElementById("demo").innerHTML="你在哪？";//根据id获取标签，并将字符中内容填充到标签中
</script>

2、写数据

document.write

<body>
<hr color="red" size="12">
<div align="center"><h1 style="color: #0044DD">这是我的首个JavaScript案例</h1></div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;这是一个段落</p>
<div id="p_text">
<script>
    document.write("这是通多JavaScript中的DOM组件向应事件写的");//写入该字符
    document.write(Date())//写入时间
</script>
</div>
</body>

3、条件语句if

if(条件){符合条件语句
}

if(条件){符合条件语句
}else{不符合条件语句
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checktime() {
            var x="";
            var time = new Date().getHours();//获取当前时间
            if (time>10){
                x="在这冬季新的一天里，完成新的目标！"+time;
            }else {
                x="懒虫，快起床了!都几点了！"
            }
            document.getElementById("into_winter").innerHTML=x;//根据id获取标签，并将x中内容填充到标签中
        }
    </script>
</head>
<body>
<h3>if条件语句练习</h3>
<p><b>下面是练习语句</b></p>
<p id="into_winter">已经进入冬天了，天气越来越冷了！</p>
<button class="btn bg-success" onclick="checktime()">进入冬季</button>
</body>

4、switch语句

switch (变量) {
case 条件:语句;
       break;

<script>
        function getTime() {
            var x = new Date().getDay();//获取具体时间
            var y="";
            switch (x) {
                case 0:y="今天星期天";
                    break;
                case 1:y="今天星期1";
                    break;
                case 2:y="今天星期2";
                    break;
                case 3:y="今天星期3";
                    break;
                case 4:y="今天星期4";
                    break;
                case 5:y="今天星期5";
                    break;
                case 6:y="今天星期6";
                    break;
            }
        }
</script>

5、警告框

alert(警告语句)

<script>
        alert("错误：非法入侵");
        function myWarning() {
            alert("错误！错误！\n基地遭遇入侵！")//带换行的警告框！
        }
</script>

6、确认框

confirm(语句提示);

<script>
        function surprised(){
            var x;
            var y=confirm("按下按钮！");
            if (y==true){
                x="你按了\"确定\"按钮";
            }else {
                x="你按了\"取消\"按钮";
            }
            document.getElementById("demo").innerHTML=x;//根据id获取标签，并将x中内容填充到标签中
        }
</script>

7、提示框

prompt("提示语句","提示实例");

<script>
        function tips() {
            var  x;
            var y = prompt("请输入你的名字：","heel");//提示框
            if (y!=null&&y!=""){
                x="hello"+y+"!Are you ok?";
                document.getElementById("demo").innerHTML=x;//根据id获取标签
            }

        }
</script>

四、JS函数

1、概念：

JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。

2、语法：function 函数名(参数1，参数2){函数体}

3、函数调用与返回
3.1、函数调用

函数中的代码将在其他代码调用该函数时执行
当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的调用时（自调用）

var x=function (a,b) {//调用函数
    return a*b;
};

3.2、函数返回

当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript
将在调用语句之后“返回”执行代码。
函数通常会计算出返回值，这个返回值会返回给调用者：

function showInfo(x) {//返回函数的绝对值
    if (x>0){
        return x;
    }else {
        return -x;
    }
}

3、案例：

<script type="text/javascript">
        // 方法一：使用的格式如下:
        //     function 函数名(形参列表){
        //         函数体
        //     }
        //     函数名() 调用函数
        // 在 JavaScript 语言中，如何定义带有返回值的函数？
        // 只需要在函数体内直接使用 return 语句返回值即可！
        function fun1() {
            alert("这是一个无参函数");
        }
        fun1();
        function fun2(a,b) {
            alert("有参函数a=>"+a+",b=>"+b);
        }
        fun2("love",23);

        function fun3(a1,a2) {
            return ("有返回值得函数:a1*a2="+(a1*a2));
        }
        alert(fun3(12,2));
        // 方法二：使用格式如下：
        //     var 函数名 = function(形参列表) { 函数体 }
        //     函数名();  //调用函数
        var ss1=function () {
                alert("这是一个无参函数");
        };
        ss1()

</script>

五、对象模型

1、BOM浏览器对象模型

1.1、概念

JavaScript是为了在浏览器中运行，描述了与浏览器进行交互的方法和接口。
1.2、常见浏览器

IE
Chrome
Safari
FireFox
1.3、常见对象使用

window浏览器窗口

 window.alert();弹出警告框
 window.innerHeight:获取内框高度

Navigator浏览器信息
screen屏幕尺寸
location当前页面的url信息
document当前页面，HTML，DOM文档树
history浏览器历史记录

2、DOM操作文档对象模型

2.1、基本概念

描述处理网页内容的方法和接口，用document调用。

2.2、文档对象使用

获取对象

 document.getElementById();根据id获取节点
 document.getElementByName();根据name获取节点
 document.getElementByClassName();根据class获取节点

更新对象：（更新dom节点）

 d.innerText='aa'更新文本值
 d.innerHTML='<a>hhh</a>'更新文本标签

删除对象，删除节点，先获取父节点，再通过父节点删除自己。
```
 father.removeChild
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script type="text/javascript">
        /*
        * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
        * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。
        * */
        function onclickfun() {
            //1.获取标签对象
            var usernameobj=document.getElementById("username");

            //2.调用对象
            var usernametext=usernameobj.valueOf();
            //3.验证字符串
            //如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术
            var patt=/^\w{5,12}$/;
            //4.测试文本是否匹配
            var usernamespanobj=document.getElementById("usernamespan");

            //usernamespanobj.innerHTML;
            /*
            * test()方法用于测试某个字符串，是不是匹配我的规则 ，
            * 匹配就返回 true。不匹配就返回 false.
            * */

            if (patt.test(usernametext)){

                usernamespanobj.innerHTML="用户输入正确";
            }else {
                usernamespanobj.innerHTML = "用户输入不合法";
            }
        }

    </script>
</head>
<body>
    用户名：<input type="text" id="username" >
    <span id="usernamespan" style="color: red">

    </span>
    <button onclick="onclickfun()">校验</button>
</body>
</html>

飞在天空中的野草帽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaWeb3-Javascript初识

一、基本概念JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。二、快速入门1、在HTML语言中引入script标签<script type="text/javascript"> </script>2、在该标签里面编写应用<!DOC
复制链接

扫一扫