JavaScript的入门

JavaScript

一、变量

JavaScript的变量类型

数值类型：number
字符串：String
对象：Object
布尔类型：boolean
函数类型：function

JavaScript中的特殊值

undefined：未定义（所有js变量未赋予初始值时，默认值都是undefined）
null：空值
NaN：Not a Number 非数字、非数值

JS中定义变量的格式：

var 变量名;
var 变量名 = 值;

var i;

// alert(i);   undefined

i = 12;

//typeof()是JavaScript语言提供的一个函数
// alert(typeof (i));    number

i = "abc";
//它可以取变量的数据类型返回
// alert(typeof (i));   String

var a = 12;
var b = "abc";

// alert(a * b);    NaN

二、关系运算

等于：== 等于是简单的做字面值的比较

全等于：=== 全等于除了比较字面值，还比较数据类型

var a = "12";
var b = 12;

alert(a == b);    //true
alert(a === b);       //false

三、逻辑运算

且运算： &&
或运算： ||
取反运算： !

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。

0 、null、 undefined、””(空串) 都认为是 false

var a = 0;
if (a){
    alert("0为真");
} else {
    alert("0为假");   //√
}

var b = null;
if (b){
    alert("null为真");
} else {
    alert("null为假");    //√
}

var c = undefined;
if (c){
    alert("undefined为真");
} else {
    alert("undefined为假");   //√
}

var d = "";
if (d){
    alert("空串为真");
} else {
    alert("空串为假");  //√
}

/*
&& 且运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算 和 ||或运算 有短路。
短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
*/

四、数组

var arr = [true, 1];   //定义一个空数组
// alert(arr.length);      //0

arr[0] = 12;
// alert(arr[0]);      //12
// alert(arr.length);      //1

//js语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作
arr[2] = "abc";
// alert(arr.length);      //3

// alert(arr[1]);      //undefined

//数组的遍历
for (var i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

五、函数

5.1函数的两种定义方式

可以使用function关键字来定义函数

格式如下：

function 函数名(形参列表){
    函数体;
}

function fun(){
    alert("无参函数被调用了");
}

// fun();

function fun2(a, b){
    alert("有参函数被调用了！----a=>" + a + "；b=>" + b);
}

fun2(12, "abc");

在JavaScript语言中，如何定义带有返回值的函数：只需要在函数体内直接使用return语句返回即可！

//定义带有返回值的函数
function sum(num1, num2){
    return num1 + num2;
}
alert(sum(100, 50));

可以使用function关键字来定义函数

格式如下：
```
var 函数名 = function(形参列表){
    函数体;
}
```

5.2 JavaScript中函数不能重载

5.3隐形参数

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。隐形参数特别像 java 的可变形参一样。

六、JS中的自定义对象

6.1Object形式的自定义对象

对象的定义：

var 变量名 = new Object();		//对象实例（空对象）
变量名.属性名 = 值;		//定义一个属性
变量名.函数名 = function(){}		//定义一个函数

对象的访问：

变量名.属性;
变量名.函数名();

var obj = new Object();
obj.name = "名字";
obj.age = 18;
obj.fun = function () {
    alert("姓名：" + this.name + "，年龄：" + this.age);
}
// alert(typeof (obj));    //Object
obj.fun();

6.2花括号形式的自定义对象

var 变量名 = {};	//空对象

var 变量名 = {
    属性名:值,
    属性名:值，
    函数名:function(){}
};

var obj = {
    name: "亚丝娜",
    age: 18,
    fun: function(){
        alert("姓名：" + this.name + "，年龄：" + this.age);
    }
};

obj.fun();

七、JS中的事件

7.1 常用的事件

常用的事件：
onload 加载完成事件	页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件	常用于按钮的点击响应操作
onblur 失去焦点事件	用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件	常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件	常用于表单提交前，验证所有表单项是否合法

7.2 事件的注册

什么是事件的注册(或绑定)？

其实就是告诉浏览器，当时间响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册

动态注册事件：指先通过js代码得到标签的dom对象，然后通过 dom对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册

动态注册的基本步骤：

获取标签对象
标签对象.事件名 = function(){}

7.3 onload事件

onload事件是浏览器解析完页面之后就会自动触发的事件

静态注册：

<head>
    <script type="text/javascript">
    	function onloadFun(){
            alert("静态注册");
        }
    </script>
</head>

<body onload="onloadFun()">
    
</body>

动态注册：

<head>
    <script type="text/javascript">
    	window.onload = function (){
            alert("动态注册");
        }
    </script>
</head>

<body>
    
</body>

7.4 onclick事件

静态注册：

<head>
    <script type="text/javascript">
        function onclickFun(){
            alert("静态注册..");
        }
    </script>
</head>
<body>
<!--静态注册onclick事件-->
    <button onclick="onclickFun()">按钮1</button>
</body>

动态注册：

<head>
    <script type="text/javascript">
        //动态注册
        window.oncload = function (){
            
            //1.获取标签对象
            	/*
            	*	document：是JavaScript语言提供的一个对象（文档）
             	*/
            var btnObj = document.getElementById("btn01");
            
            //2.通过标签对象.事件名 = function(){}
            btnObj.onclick = function (){
                alert("动态注册..");
            }
        }
    </script>
</head>
<body>
<!--动态注册onclick事件-->
    <button id="btn01">按钮2</button>
</body>

7.5 onblur事件

静态注册：

<head>
    <script type="text/javascript">
        function onblurFun(){
            console.log("静态注册");
        }
    </script>
</head>
<body>
    <form>
        用户名：<input type="text" onblur="onblurFun()"><br>
    </form>

</body>

动态注册：

<head>
    <script type="text/javascript">
        window.onload = function (){
            var pwdObj = document.getElementById("password");
            pwdObj.onblur = function (){
                console.log("动态注册");
            }
        }
    </script>
</head>
<body>
    <form>
        密码：<input type="text" id="password" ><br>
    </form>

</body>

7.6 onchange事件

静态注册：

<head>
    <script type="text/javascript">
        function onchangeFun(){
            alert("静态");
        }
    </script>
</head>
<body>
    请选择：
    <select onchange="onchangeFun()">
        <option>--选择--</option>
        <option>阿美</option>
        <option>阿芳</option>
    </select>
</body>

动态注册：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function (){
            var selectObj = document.getElementById("select01");
            selectObj.onchange = function (){
                alert("动态");
            }
        }
    </script>
</head>
<body>
    请选择：
    <select id="select01">
        <option>--选择--</option>
        <option>阿美</option>
        <option>阿芳</option>
    </select>
</body>

7.7 onsubmit事件

静态注册：

<head>
    <script type="text/javascript">
        function onsubmitFun(){
            //要验证所有表单是否合法，如果有一个不合法就组织表单提交
            alert("静态---不合法");

            return false;
        }
    </script>
</head>
<body>
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册">
    </form>
</body>

动态注册：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function (){
            var formObj = document.getElementById("form01");
            formObj.onsubmit = function (){
                alert("动态");
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="http://localhost:8080" method="get" id="form01">
        <input type="submit" value="动态注册">
    </form>
</body>

八、DOM模型

DOM 全称是 Document Object Model 文档对象模型

Document 对象的理解：

Document它管理了所有的HTML文档内容。
Document它是一种树结构的文档。有层级关系。
它让我们把所有的标签都对象化。
我们可以通过document访问所有的标签对象。

8.1 Document对象中的方法

document getElementById(elementId)

通过标签的 id 属性查找dom对象，elementID是标签的id属性值
document.getElementsByName(elementName)

通过标签的 name 属性查找标签dom对象，elementName标签的name属性值
document.getElementsByTagName(tagname)

通过标签名查找标签 dom 对象，tagname是标签名
document.createElement(tagName)

通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注意事项：document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询；如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询；如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

posted @ 2021-11-20 13:42 叁玖贰拾柒阅读(47) 评论(0) 收藏举报

刷新页面返回顶部

共勉至上

从零开始跟我学

JavaScript的入门

JavaScript

一、变量

二、关系运算

三、逻辑运算

四、数组

五、函数

5.1函数的两种定义方式

5.2 JavaScript中函数不能重载

5.3隐形参数

六、JS中的自定义对象

6.1Object形式的自定义对象

6.2花括号形式的自定义对象

七、JS中的事件

7.1 常用的事件

7.2 事件的注册

7.3 onload事件

7.4 onclick事件

7.5 onblur事件

7.6 onchange事件

7.7 onsubmit事件

八、DOM模型

8.1 Document对象中的方法

公告