js 基础 -- 循环、函数调用 、全局和局部变量、异常捕获、事件

一:循环

for

for in

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>循环</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>

    <script>
        var i = [1,2,3,4,5,6];
        for(j in i) {
            document.write(i[j]+"<br/>");
        }
    </script>
</head>

<body>

</body>
</html>

while

do while

break

continue

函数调用

方法一:在script脚本中直接调用

方法二:在html中调用

带参数函数

带返回值函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>函数调用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>

    <script>
        //方法一 : 直接在script中调用
        function Demo1(a1,a2)
        {
            alert(a1+a2);
        }
        Demo1(10,10); //直接调用
        function Demo2(){
            var a1 = 10;
            var a2 = 10;
            alert(a1+a2);
        }

    </script>
</head>
<body>
    <!--在html中调用使用-->
    <button onclick="Demo2()">按钮</button>
</body>
</html>

局部变量

全局变量

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>全局变量</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>

    <script>
        var b = 30; //全局变量
        function Demo() {
            var a = 20; //局部变量
            x = 10;     //全局变量
        }
        Demo();
        alert(x);
       //alert(a); //局部变量未执行
       alert(b);
    </script>
</head>
<body>

</body>
</html>

异常捕获

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>异常捕获</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>

    <script>
        function Demo(){
            try{
                alert(str); //发生异常的代码
            }catch(err) {
                alert(err);  //错误信息处理
            }
        }

        //通过 throw 语句创建一个自定义错误
        function Demo1() {
            try {
                var t = document.getElementById("txt").value;
                if(t == "") {
                    throw "请输入";
                }
            }catch(err) {
                    alert(err);
                }
            }
        //Demo();
    </script>

</head>
<body>
    <!--创建一个form表单 若输入框中输入的值为空,通过按钮触发警告-->
    <form>
        <input id="txt" type="text"/><br/>
        <input id="btn" type="button" onclick="Demo1()" value="button"/>
    </form>

</body>
</html>

事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>事件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>

    <script>
        //鼠标点击事件
        function click(){
            alert("onclick");
        }
        //鼠标经过和移出事件 鼠标经过div区域显示hello,移出后显示world
        function onOver(ooj){
            ooj.innerHTML = "hello";
        }
        function onOut(ooj) {
            ooj.innerHTML = "world";
        }

        //文本框选中事件
        function selectText(obj) {
            obj.style.background = "red";
        }
    </script>
</head>
<body>
    <button onclick="click()">单击点击事件</button>
    <br/>

    <!--鼠标经过事件 鼠标移出事件-->
    <div style="width: 100px;height: 100px;background-color: lemonchiffon" onmouseover="onOver(this)" onmouseout="onOut(this)"></div>
    <br/>

    <!--文本内容改变事件-->
    <form>
        <input type="text" onchange="alert(‘文本输入框中的内容改变‘)"/>
    </form>

    <!--文本框选中事件 文本框的内容被选中后文本框显示为红色-->
    <form>
        <input type="text" onselect="selectText(this)"/>
    </form>

    <button onfocus="">光标聚集事件</button>
    <button onblur="">移开光标事件</button>
    <button onload="">网页加载事件</button>
    <button onunload="">关闭网页事件</button>
</body>
</html>

原文地址:https://www.cnblogs.com/wuyuwuyueping/p/9035070.html

时间: 2024-10-29 12:26:35

js 基础 -- 循环、函数调用 、全局和局部变量、异常捕获、事件的相关文章

关于this js基础关于函数调用和赋值

function p() { var name="abc";//为私有的属性不可以调用 this.age="20";//this为共有的 } var p1=new p();//实例化类 alert(p1.age); js基础关于函数调用和赋值 1 <script> 2 window.onload=function () { 3 var inp=document.getElementsByTagName('input')[0]; 4 inp.onclick

js基础第一天 (全局变量,局部变量)

前言:今天我把变量这块内容单独放出来,是我觉的这也是个重点,我很早就知道变量这个东东,可惜一直半懂不懂的,每次出现复杂的写法我就蒙圈了,今天我利用的好长时间把这块内容弄明白. 初学者可以看看我下面的案例和详细解释,你们一定会恍然大悟,我今天就是这样的感觉.虽然每天进度很慢,但是每天都有收获,这就是积累成多. 现在感觉每天的时间不够用,时间过的超快.今天过的都不知道是星期几了. 声明全局变量 1.最外层执行环境下声明的变量是全局变量 2.不用var声明的变量是全局变量 全局变量特点:任何作用域下都

JS基础——循环很重要

介绍循环之前,首先要说一下同样很重要的if-else结构,switch-case结构 ①if-else结构 if(判断条件) { 条件为true时执行 } else{ 条件为false时执行 } ②if-else-if结构(阶梯if) if(条件一){ 条件一成立 } else if( 条件二){ 条件一不成立&&条件二成立 (else-if部分可以有多个) } else{ 条件一不成立&&条件二不成立 } ③嵌套if结构 结构写法 if(条件一){ 条件一成立 if(条件

JS基础与循环

JS 简介 [JS的三种方式] 1.HTML标签中内嵌JS <button onclick="javascript:alert('白痴')">呵呵呵</button> 2.HTML页面中直接使用JS <script type="text/javascript"> //JS代码 </script> 3.引用外部JS文件 <script language="JavaScript" src=&quo

JS基础知识回顾:引用类型(一)

在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起,而对象时引用类型的一个实例. 尽管ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构,所以虽然说引用类型与类看起来想死,但他们并不是相同的概念. 不过引用类型有的时候也可以被称为对象定义,因为他们描述的是一类对象所具有的属性和方法. 新对象是使用new操作符后跟一个构造函数来实现的,构造函数本身就是一个函数,只不过该函数时处于创建新对象的目的而定义的. ECMASc

js基础梳理-如何理解作用域和作用域链?

本文重点是要梳理执行上下文的生命周期中的建立作用域链,在此之前,先回顾下关于作用域的一些知识. 1.什么是作用域(scope)? 在<JavaScritp高级程序设计>中并没有找到确切的关于作用域的定义,只是在"4.2执行环境及作用域"中简单说了下执行环境(execution context)的概念.而执行环境其实就是之前博客:js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?中的执行上下文. 而在<JavaScript权威指南>中,对作

JS基础四

1.函数是一组可以随时随地运行的语句. 函数是 ECMAScript 的核心. 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 2.闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. 3.把对象的所有引用都设置为 null,可以强制性地废除对象.object  设置为null, 4.本地对象(native object) Object Function Array String Boolean Numb

js基础笔记

一.js中含有6种数据类型: 原始类型(即基本类型):number.boolean.null.undefined.string 和 对象类型object(包含function.array.date等): 二.==和===的区别: ==会尝试进行数据类型转换,再进行比较: null==undefined 相等: number==string 时会转成number 如 1=='1.0' //true boolean==?(无论?是什么)时会转成number 如 1==true  //true obj

JS基础知识回顾:变量、作用域和内存问题

ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值. 基本类型值指的是简单的数据段,而引用类型值指的是那些可能由多个值构成的对象. 引用类型的值是保存在内存中的对象,与其他语言不同,JavaScript不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间. 在操作对象时,实际上是在操作对象的引用而不是实际的对象. 在很多语言中,字符串以对象的形式来表示,因此被认为是引用类型的,ECMAScript放弃了这一传统. 定义基本类型值和引用类型值的方式是类似的:创建