js基础、函数、Window对象、BOM编程的一些总结

其他 2020-02-09 18:45:01 阅读次数: 0

js基础、函数、Window对象、BOM编程

=======================为什么要使用JavaScript===========================

JavaScript可以使网页增加互动性，也可以对表单提交进行验证减轻服务器的负担，JavaScript还是后面要学习的Ajax技术中的核心。
 
=======================JavaScript的基本结构===========================

======================javascript脚本执行原理===========================

 

=========================JavaScript核心语法==========================

 

============================变量================================

声明变量的关键字：var  

注意：在JavaScript中所有类型都可以用var来声明，也可以把var省略

声明变量语法：

  1. 先声明变量，再给变量赋值

var num;

num = 2;

2、声明变量的同时给变量赋值

var num = 2;

3、同时声明多个变量并赋值

var a=2,b=”abc”,c=5;

4、不使用var直接给变量赋值

num = 2;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a;
        a=3;
        document.write(a+"<br>");

        var b= 20 ;
        document.write(b+"<br>");

        var c = 2,d=25.6,e=true;
        document.write(c+"-"+d+"-"+c+"<br>");

        var f= "abc";
        document.write(f);

    </script>
</head>
<body>

</body>
</html>

 

======================typeof运算符的使用=============================

用于得到变量或值对应的类型返回值(注意：类型返回值是一个字符串)

语法： typeof(变量或值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a;
        var b = "hello";
        var c = true;
        var d = 23;
        var e = new Date();
        document.write(typeof(a)+"<br>");
        document.write(typeof(b)+"<br>");
        document.write(typeof(c)+"<br>");
        document.write(typeof(d)+"<br>");
        document.write(typeof(e)+"<br>");

    </script>
</head>
<body>

</body>
</html>

 

==========================运算符==============================

===================逻辑控制语句======================

1、If条件语句

2、switch多分支语句

3、循环结构

循环中断：break、continue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a = null;
        if(a){
            document.write("逻辑为真");
        }else{
            document.write("逻辑为假");
        }
    </script>
</head>
<body>

</body>
</html>

 

========================消息框和输入框============================

alert()：提示框

prompt()：输入框(能够获取用户的输入)

 

用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        //提示框
        //alert("hello");
        var name = prompt("请输入您的姓名","姓名在此输入");
        document.write(name);
    </script>
</head>
<body>

</body>
</html>

 

========================JavaScript的使用方式=============================

1、内嵌JS代码

在网页的<script>标签中编写JS代码

<script type="text/javascript">
        Javascript代码
</script>

2、外部JS文件

在网页中引入外部的JS文件来使用

引入的语法：<script type="text/javascript" src="js文件的路径"></script>
如果js代码很少，可以使用简短缩写方式
<input name="btn" type="button" value="弹出消息框" οnclick="javascript:alert('欢迎你');"/>

1.创建一个js文件夹、创建my.js的javascript文件 

var a;
a=3;
document.write(a+"<br>");

var b= 20 ;
document.write(b+"<br>");

var c = 2,d=25.6,e=true;
document.write(c+"-"+d+"-"+c+"<br>");

var f= "abc";
document.write(f);

2.创建.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/my.js"></script>
</head>
<body>
<input name="btn" type="button" value="弹出消息框" οnclick="javascript:alert('欢迎你');"/>
</body>
</html>

 

===================函数========================

函数类似于Java中的方法，是完成特定任务的代码语句块

函数分为：系统函数、自定义函数

 

====================常用的系统函数=======================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a = "23"
        a = parseInt(a);
        document.write(a+1);
        document.write("<br>"+a+"<br>");

        var b = "26abc";
        b = parseInt(b);
        document.write(b);

        var c = "a37bc";
        c = parseInt(c);
        document.write("<br>"+c);//NaN(not a number);
    </script>
</head>
<body>

</body>
</html>

 2.NaN函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var a = 32;
        if(isNaN(a)){
            document.write("a不是数字");
        }else{
            document.write("a是数字");
        }
    </script>
</head>
<body>

</body>
</html>

 

========================自定义函数===========================

自定义函数是由自己定义函数，分为无参函数、有参函数

函数调用一般和表单元素的事件一起使用，调用格式：事件名＝“函数名( )"

例如：  οnclick=”show()”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function show() {
            for(var i=1;i<=5;i++){
                document.write("hello"+"<br>");
            }
        }

        function show2(num) {
            for(var i = 0;i<num;i++){
                document.write(i);
            }
        }
    </script>
</head>
<body>
<input type="button" value="输出5次hello" οnclick="show()" />
<input type="button" value="输出0-num" οnclick="show2(prompt('请输入num'))"/>

</body>
</html>

 

=======================什么是BOM===============================

Browser Object Model的缩写，简称浏览器对象模型

window表示浏览器对象

history表示浏览器历史记录对象

document表示文档对象

location表示地址栏对象

 

window对象常用属性：

screen的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        document.write("电脑屏幕的高度"+window.screen.height+"<br>");
        document.write("电脑屏幕的宽度"+window.screen.width+"<br>");

        document.write("电脑屏幕的有效高度"+window.screen.availHeight+"<br>");
        document.write("电脑屏幕的有效宽度"+window.screen.availWidth+"<br>");
    </script>
</head>
<body>

</body>
</html>

 

常用事件：

 

window对象常用方法：

confirm的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var result = confirm("确定删除吗？");
        if(result){
            document.write("已删除");
        }else{
            document.write("未删除");
        }
    </script>
</head>
<body>

</body>
</html>

open()方法的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.open("9_screen.html","","height=300,width=300,left=200,top=200");
    </script>
</head>
<body>

</body>
</html>

 

定时函数：

setTimeout(“调用的函数”,毫秒数)：多少毫秒后执行函数

setInterval(“调用的函数”,毫秒数)：每隔多少毫秒执行一次函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function greet() {
            alert("hello");
        }
        function startTimeout(){
            window.setTimeout("greet()",2000);
        }
        var interval;
        function startInterval(){
            interval = window.setInterval("greet()",2000);
        }
        function deleteInterval() {
            window.clearInterval(interval);
        }

    </script>
</head>
<body>
    <input type="button" value="setTimeout的使用" οnclick="startTimeout()" /><br>
    <input type="button" value="setInterval的使用" οnclick="startInterval()" /><br>
    <input type="button" value="移除setInterval" οnclick="deleteInterval()" />
</body>
</html>

 

=====================匿名函数==========================

匿名函数就是指没有函数名的函数

匿名函数的两种写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            alert("hello")
        }
        function greet(){
            alert("hello");
        }
        window.onload = greet;

        var m = function(){
            alert("hello");
        }

    </script>
</head>
<body>
    <input type="button" value="问候" οnclick="m()"/>
</body>
</html>

 

=====================Date日期的使用=============================

日期各个单位的取值范围如下：

getYear()：获取当前年份与1900年相差的年份数

getFullYear()：获取当前年份
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var date = new Date();
        document.write(date.getYear()+"<br>");
        document.write(date.getMonth()+1+"<br>");
        document.write(date.getDate()+"<br>");
        document.write(date.getHours()+"<br>");
        document.write(date.getMinutes()+"<br>");
        document.write(date.getSeconds()+"<br>");
    </script>
</head>
<body>

</body>
</html>

 

=======================document的使用=============================

document常用属性：

document常用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
       function changeText() {
           var d = document.getElementById("divMessage");
           d.innerHTML = "才是真的好";
       }
       function showName(){
           var result = "";
           var subjects=document.getElementsByName("subject");
           for(var i=0;i<subjects.length;i++){
               result +=subjects[i].innerHTML;
           }
           alert(result);
       }
       function showDiv() {
           var result = "";
           var divs=document.getElementsByTagName("div");
           for(var i=0;i<divs.length;i++){
               result +=divs[i].innerHTML;
           }
           alert(result);
       }
    </script>
</head>
<body>
    <div id="divMessage">大家好</div>
    <input type="button" value="getElementById" οnclick="changeText()" />
    <br>
    <div name="subject">C#</div>
    <div name="subject">java</div>
    <div name="subject">Html</div>
    <div name="subject">javascript</div>
    <input type="button" value="getElementByName" οnclick="showName()" />
    <input type="button" value="getElementByTagName" οnclick="showDiv()" />
</body>
</html>

 

======================visibility和display================================

 

visibility和display的区别：元素设置visibility为不可见后该元素还是会占用空间，元素设置display为不可见后该元素不会占用空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="div1">第一个div</div>
    <div id="div2">第二个div</div>
    <div id="div3">第三个div</div>
    <input type="button" value="使用visilibility隐藏第二个div" οnclick="document.getElementById('div2').style.visibility='hidden'" />
    <input type="button" value="使用display隐藏第二个div" οnclick="document.getElementById('div2').style.display='none'" />
</body>
</html>

显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function showAndHidden() {
            var d = document.getElementById("mydiv");
            if(d.style.display=="none"){
                d.style.display="block";
            }else {
                d.style.display="none";
            }
        }
    </script>
</head>
<body>
    <div id = "mydiv">大家好</div>
    <input type="button" value="显示／隐藏" οnclick="showAndHidden()" />
</body>
</html>

 

======================history对象===========================

history：用来操作浏览器的历史记录

常用方法如下：

back()：返回上一个页面

forward()：进入下一个页面

go()：到哪个页面去  go(-1)表示上一个页面，相当于back()  

   go(1)表示下一个页面，相当于forward()

   go(-2)表示上上个页面

 1.创建第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是第一个页面<br>
<a href="page2.html">进入第二个页面</a>
</body>
</html>

2.创建第二个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是第二个页面<br>
<a href="page3.html">进入第三个页面</a><br>
<input type="button" value="进入历史记录的上个页面" οnclick="history.back(-1)" /><br>
<input type="button" value="进入历史记录的下个页面" οnclick="history.forward(1)" />

</body>
</html>

3.创建第三个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是第三个页面<br>
<input type="button" value="进入第一个页面" οnclick="history.go(-2)" />
</body>
</html>

======================location对象==========================

location：用来操作浏览器的地址

常用属性href：用来设置浏览器的地址 

例如：location.href=”http://www.baidu.com” 浏览器将显示百度网页

常用方法reload()：用于刷新页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="baidu" οnclick="location.href='http://www.baidu.com'" /><br>
    <input type="button" value="reload()" οnclick="location.reload()" />
</body>
</html>

未完待续。。。

王致列
发布了35 篇原创文章 · 获赞 7 · 访问量 3万+
私信 关注

猜你喜欢

转载自blog.csdn.net/star_of_science/article/details/83750588
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022