JavaScript简单入门

最新推荐文章于 2024-07-08 16:22:29 发布

晴天jay

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量68

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/jay1452/article/details/114672331

版权

JavaScript基础入门

1.JavaScript简介

JavaScript是一门开发web页面的前端脚本语言，主要解决与用户的动态交互问题。其主要有三大特点：简单、跨平台性、交互性。跨平台的含义是不依赖于特定的操作系统，绝大多数浏览器都支持JavaScript。

2.JavaScript与html的结合方式

（1）在head标签或body标签加入script标签书写JavaScript代码。

（2）使用script标签的src属性引入js文件

注：以上两种方式只能二选一。

3.JS变量

（1）定义

var 变量名;

var 变量名=值;

（2）变量类型


数值类型	number
字符串类型	string
对象类型	object
布尔类型	boolean
函数类型	function

（3）JavaScript的特殊值

undefined 未定义(没有被赋值的变量)

null 空值

NAN 非数值

4.JS数组

（1）数组的定义

var 数组名 = []; 定义空数组

var 数组名 = [123,“abc”,true]; 定义数组并赋值

注：javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。

5.JS函数

（1）函数定义的两种方式

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

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

6.{}花括号形式的自定义对象

（1）对象的定义

var 变量名 = { 

属性名：值, 						// 定义一个属性 

属性名：值, 						// 定义一个属性 

函数名：function(){				// 定义一个函数
    
} 					 
};

（2）对象的访问

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

7.JS中的事件

（1）事件的定义

事件是电脑输入设备与页面进行交互的响应。

（2）常用的事件


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

（3）事件注册

静态注册：通过 html 标签的事件属性直接赋于事件响应后的代码

动态注册：1、获取标签对象 2、标签对象.事件名 = function(){}

（4）代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onsubmitFun(){
            alert("静态注册表单事件----发现不合法");
            return false;
        }

        window.onload = function (){
            var formObj = document.getElementById("form01");
            formObj.onsubmit = function (){
                alert("动态注册表单事件----发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态注册">
    </form>
    <br/>
    <form action="http://www.baidu.com" id="form01">
        <input type="submit" value="动态注册">
    </form>
</body>
</html>

8.DOM模型

（1）定义

把文档中的标签，属性，文本，转换成为对象来管理。

（2）document对象常用的方法


getElementById	通过id属性获取标签对象
getElementsByName	通过name属性获取标签对象的集合
getElementsByTagName	通过标签名获取标签对象集合
createElement	用来创建html标签

（3）代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            var usernameObj = document.getElementById("username");
            var value = usernameObj.value;
            var patt = /^\w{5,12}$/;
            if(patt.test(value)){
                alert("用户名合法！");
            }else {
                alert("用户名不合法！");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username">
    <button onclick="onclickFun()">按钮</button>
</body>
</html>

晴天jay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简单入门

一、JavaScript基础1.JavaScript与html的结合方式（1）在head标签或body标签加入script标签书写JavaScript代码。（2）使用script标签的src属性引入js文件注：以上两种方式只能二选一。2.JS变量（1）定义 var 变量名; var 变量名=值;（2）变量类型数值类型number字符串类型string对象类型object布尔类型boolean函数类型function（3）
复制链接

扫一扫