3.javascript(俗称js)

最新推荐文章于 2022-01-17 13:15:00 发布

dml111727

最新推荐文章于 2022-01-17 13:15:00 发布

阅读量530

点赞数

分类专栏： javaweb 笔记文章标签： javascript js基础知识

本文链接：https://blog.csdn.net/qq_35638837/article/details/76274297

版权

笔记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

javaweb

9 篇文章 0 订阅

订阅专栏

1.基本概念：

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。与java无关。
组成部分:
- ECMAScript:js基础语法(规定关键字运算符语句函数等等…)
- BOM:浏览器对象模型
- DOM:文档对象模型
作用:
- 修改html页面的内容
- 修改html的样式
- 完成表单的验证
注意:
- js可以在页面上直接写,也可以单独出去
- js的文件的后缀名 .js

2.js和html整合

方式1:在页面上直接写

将js代码放在 
<script></script>标签中,一般放在head标签中

方式2:独立的js文件
- 通过script标签的src属性导入

案例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--方式一-->
        <script type="text/javascript">
        <!--对话框-->
            alert("哈哈");
        </script>
        <!--方式二-->
        <script type="text/javascript" src="../js/1.js" ></script>
    </head>
    <body>
    </body>
</html>

1.js文件代码，在js文件夹下

alert("hehhe");

3.js中的变量声明

var 变量名=初始化值;
var 变量名; 变量名=初始化值;

4.js的数据类型:

原始类型:(5种)

Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
typeof 变量|值;
若变量为null,使用typeof弹出的值 object

使用typeof的返回值
undefined - 如果变量是 Undefined 类型的 
boolean - 如果变量是 Boolean 类型的 
number - 如果变量是 Number 类型的 
string - 如果变量是 String 类型的 
object - 如果变量是一种引用类型或 Null 类型的

引用类型

5. js事件驱动函数

5.1 函数定义格式

方式1:

function 函数名(参数){
    函数体;
}

方式2:

var 函数名=function(参数){
    函数体;
}

注意:

函数不用声明返回值类型
参数不需要加类型
函数调用的时候
- 函数名(参数)

在方法中(function()) this指代的是当前的元素(当前dom对象)
注意:
    在方法中(function()) this指代的是当前的元素(当前dom对象)

5.2 js事件和函数的绑定:

方式1:

通过标签的事件属性   
<xxx onclick="函数名(参数)"></xxx>

方式2:

给元素派发事件
document.getElementById("id值").onclick=function(参数){....}
document.getElementById("id值").onclick=函数名
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码  onload事件.

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn_in(){
                alert("点击事件");
            }
            function init(){
                //alert("页面加载成功");
                document.getElementById("btn_2").onclick=btn2cli;
            }
            var btn2cli=function(){
                alert("哈哈哈");
            }

        </script>
    </head>
    <body onload="init()">
        <input type="button" value="点我" onclick="btn_in()"/>
        <input type="button" value="点我试试" id="btn_2"/>
    </body>
</html>

5.3 js中的事件

常见的事件

单击: onclick
表单提交: onsubmit 加在form表单上的 οnsubmit=”return 函数名()” 注意函数返回值为boolean类型
页面加载: onload
焦点事件:
- onfocus
- onblur

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function getFocus(){
                var user=document.getElementById("username");
                document.getElementById("spanid").innerHTML=user.value;
            }
            function loseFocus(){
                var user=document.getElementById("username");
                alert(user.value);
            }
        </script>
    </head>
    <body>
        用户名：<input id="username" name="username" value="请输入你的名字" 
            onfocus="getFocus()" onblur="loseFocus()"/><br />
        <span id="spanid"></span>
    </body>
</html>

表单事件:
- onsubmit
- onchange 改变
鼠标事件
- ondblclick:双击
- onmousedown:按下
- onmouserup:弹起
- onmousemove:移动
- onmouserover:悬停
- onmouserout:移出
键盘事件
- onkeydown:按下
- onkeyup:弹起
- onkeypress:按住
  注意：event.preventDefault()，阻止默认事件的发生，可以防止超链接的跳转（不是所有的浏览器适用）

5.4 获取元素及属性

获取元素

<!--通过y元素的id获取元素-->
var obj=documnet.getElementById("id值");

document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组
document.getElementsByClassName():需要给元素添加class属性
document.getElementsByName():需要给元素添加name属性

示例代码(隔行换色)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            onload=function(){
                var arr = document.getElementsByTagName("tr");
//              alert(arr.length);
                for(var i=1;i<arr.length;i++){
                    if(i%2==0){
                        arr[i].style.backgroundColor="yellowgreen";
                    }else{
                        arr[i].style.backgroundColor="goldenrod";
                    }
                }
            }
        </script>
    </head>
    <table id="tab1" border="1" width="800" align="center" >

            <tr style="background-color: #999999;">
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>

获取元素的标签体中的内容

var ht=document.getElementById("id值").innerHTML;

设置元素的标签体

document.getElementById("id值").innerHTML="ssss";

获取元素的value属性

var val=document.getElementById("id值").value;

设置元素的value属性

document.getElementById("id值").value="sdfsdf";

appendChild(dom对象):在一个元素下添加孩子

<!--获取id为 left元素下的所有option的元素-->
var arr = document.getElementById("left").options;

document.getElementById("toRight3").onclick=function(){
    //获取左边所有的option
//                  var arr = document.getElementsByTagName("option");
    var arr = document.getElementById("left").options;
    for(var i=0;i<arr.length;){
        document.getElementById("right").appendChild(arr[i]);
    }
}

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn(){
                var obj=document.getElementById("btn");
                alert(obj.value);
                var div = document.getElementById("div0");
                alert(div.innerHTML);
            }

        </script>
    </head>
    <body>
        <input id="btn" value="确定" type="button" onclick="btn()" />
        <div id="div0">hahaha</div>
    </body>
</html>

6. bom中对象的操作

6.1 定时器

var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期执行
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
清除定时器:
        clearInterval(id);
        claerTimeout(id);

示例代码1(动态的输出文字)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var i = 0;
            var s="哈呵嘻";
            var body;
            function init(){
                body=document.getElementById("body");
                setInterval(show,200);//定时器     
            }

            function show(){
                i++;
                var ss = s.substring(0,i);
                body.innerHTML=ss;//写入内容
                if(i == s.length){
                    i=0;
                }
            }
        </script>
    </head>
    <body onload="init()" id="body">
    </body>
</html>

示例代码2(轮播图)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
    var i = 1;
    function init(){
        setInterval(changeImage,3000);
    }
    function changeImage(){
        var img = document.getElementById("img");
        i++;
        img.src="../img/"+ i +".jpg"
        if(i >= 3){
            i=0;
        }
    }
</script>
</head>
<body onload="init()">
<img id="img" src="../img/1.jpg" width="100%"/>
</body>
</html>

示例代码3（广告的弹出和隐藏）

<script>
    var i=1;
    var count=1;
    var timer;
    function init(){
        timer = setInterval(showAd,4000);//广告
        setInterval(changeImage,3000);

    }
    //展示广告
    function showAd(){
        count++;
        if(count>=4){
            clearInterval(timer);//取消定时器
        }
        var div = document.getElementById("div2")
        div.style.display="block";//显示
        setTimeout(hideAd,2000);
    }
    //隐藏广告
    function hideAd(){
        var div = document.getElementById("div2")
        div.style.display="none";//显示
    }
    function changeImage(){
        //获取图片元素
        var img = document.getElementById("lb");
        i++;
        img.src="../img/" + i +".jpg";
        if(i >= 3){
            i=0;
        }
    }
</script>

6.2 操作css属性

document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
    若有"-" 只需要将"-"删除,后面第一个字母变大写即可

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn(){
                var obj = document.getElementById("div0");
                obj.style.backgroundColor="blue";
                obj.style.border="1px solid red";
                obj.style.width="100px"
                obj.style.height="100px"
            }
        </script>
    </head>
    <body>
        <input type="button" value="将div加上样式" onclick="btn()"/>
        <div id="div0"></div>
    </body>
</html>

6.3 bom(浏览器对象模型)

所有的浏览器都有5个对象

6.3.1 window:窗口

常用的属性:

window.onload 等价于 onload
window.setInterval() 等价于 setInterval()

通过window可以获取其他的四个对象
window.location 等价域 location
window.history 等价于 history

常用的方法
- 消息框

alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容

消息框示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            alert("heheh");
            var flag = confirm("lalala");
            alert(flag);
            var res=prompt("请输入你的姓名：");
            alert(res);
        </script>
    </head>
    <body>
    </body>
</html>

打开和关闭
- open(url):打开
- close():关闭

打开和关闭示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="打开" onclick="openA()" />
    </body>
    <script>
        function openA(){
            open("a.html");
        }
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        我是A页面
        <input type="button" value="关闭" onclick="closeA()" />
    </body>
    <script>
        function closeA(){
            close();
        }
    </script>
</html>

6.3.2 location:定位信息 (地址栏)

常用属性:
- href:获取或者设置当前页面的url(定位信息)
- location.href; 获取url
- location.href=”…”;设置url 相当于 a标签

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //获取url
//          var u = location.href;
//          alert(u);
            function setUrl(){
                location.href="../window/a.html"
            }
        </script>
    </head>
    <body>
        <input type="button" value="设置url" onclick="setUrl()" />
    </body>
</html>

6.3.3 history:历史

常用的方法：
- back();后退
- forward():向前
- go(int)
- go(-1) 相当于 back()
- go(1) 相当于 forward()

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function forw(){
                history.go(1);
            }
        </script>
    </head>
    <body>
        哈哈页面<br />
        <a href="b.html">b页面</a>
        <input type="button" value="前进" onclick="forw()" />
    </body>
</html>

b.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function goBack(){
                history.go(-1);
            }
        </script>
    </head>
    <body>
        呵呵页面<br />
        <input type="button" value="后退" onclick="goBack()" />
    </body>
</html>

dml111727

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3.javascript(俗称js)

1.基本概念：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。与java无关。组成部分: ECMAScript:js基础语法(规定关键字运算符语句函数等等…)BOM:浏览器对象模型DOM:文档对象模型作用: 修改html页面的内容修改html的样
复制链接

扫一扫

专栏目录