JavaScript基础

JavaScript基础

(一)特点

1.交互性

(他可以做的就是信息的动态交互)

2.安全性

(不允许直接访问本地硬盘)

3.跨平台性

(只要可以可以解释JS的浏览器都可以执行,和平台无关)

(二)JS和HTML代码的结合方式

1. 嵌入式
<!--位于head内--->
<script type="text/javascript">
alert("hello,world!");
</script>
2. 引入式
<!--
	需要用javascript标签引入js文件
	src属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径)
	script标签可以定义js代码,也可以引入js代码文件
	但是两者二选一
-->
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" >alert("hello,world!")</script>

(三)变量

1. JS数据类型
变量类型名称
数值类型number
字符串类型string
对象类型object
布尔类型boolean
函数类型function
2. 特殊的值
特殊的值解释
undefined未定义,所有js变量没有赋初始值,默认值都为undefined
null空值
NANNot a Number 非数字非数值
3. JS中定义变量格式:

var 变量名;

var 变量名=值;

<script type="text/javascript">
    var i;
    alert(i);//undefined
    i=12;
    alert(typeof(i));//取出变量的数据类型-number
    var j="abc"
    alert(typeof(j))//string 
    alert(i*j)//NaN,非数字,非数值
</script>ty

(四)关系运算

1. ==表示内容相等
2. ===内容相等,并且数据类型相同
<script type="text/javascript">
    var i=12;
    var j="12";
    alert(i==j);//true
    alert(i===j);//false
</script>ty

(五)逻辑运算

1.且运算:&&
2. 或运算: ||
3. 取反运算: !
注: Javascript语言中,所有变量,都可以作为一个boolean类型的变量去使用
<script type="text/javascript">
    var i=12;
    var j="12";
    alert(i==j);//true
    alert(i===j);//false
</script>

(六)数组

1. JS数组,最大下标对数组扩容
<script type="text/javascript">
    var a=[];//定义空数组
    alert(a.length);//0
    a[0]=12;
    alert(a.length);//1
    a[2]="abc";
    alert(a.length);//3
    alert(a[1]);//undefined
    for(var i=0;i<a.length;i++)
        alert(a[i]);
</script>

(七)函数定义

1. 定义形式
<script type="text/javascript">
    function fun(){
		alert("无参函数被调用")
    }
    function fun2(a,b){
	alert("有参函数被调用-->"+a+b)
    }
    function sum(num1,num2){
	var sum=num1+num2;
        return sum;
    }
    fun();
    fun2(Str,ing);
    sum(1,2);
</script>
2. 函数不能重载,如果硬要,就只能覆盖
3. 隐形参数,无形参,直接传实参也可以运行
<script type="text/javascript">
    function fun(){
        //和数组差不多,可以取出,可以遍历
        alert(arguments[0])
        alert(arguments[1])
        for(var i=0;i<arguments.length;i++)
            alert(arguments[i]);
		alert(arguments.length)//可查看参数个数
        alert("隐形参数");
    }
    fun(123,"abc",true);
</script>
<script type="text/javascript">
        function fun(num1,num2){
            var sum=0;
            for(var i=0;i<arguments.length;i++){
                if(typeof(arguments[i])=="number")
                    sum+=arguments[i];
            }
            return sum;
        }
        alert(fun(1,2,3,"abc",4,5,6,7,8,9));
</script>

(八)自定义对象

00. 对象

对象的定义:

​ var 变量名=new Object();//对象实例化

​ 变量名.属性名=值;//定义属性

​ 变量名.函数名=function(){}//定义函数

对象的访问

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

1.Object形式的自定义对象
var obj =new Object();
obj.name="skz";
obj.age=18;
obj.fun=function(){
	alert("姓名:"+this.name+",年龄:"+this.age);
}
obj.fun();

2.花括号形式的自定义对象
var obj={
            name:"skz",
            age:18,
            fun:function() {
                alert("姓名:" + this.name + ",年龄:" + this.age)
            }
        };
        alert(obj.name);
        alert(obj.age);
        obj.fun();

(九) JS事件-电脑输入设备与页面交互的响应

名称常用事件说明
onload加载完成事件页面加载完成后,常用于做页面js代码初始化操作
onclick点击事件常用于按钮的点击响应操作
onblur失去焦点事件常用于输入框失去焦点后验证其输入内容是否合法
onchange内容发生改变事件常用于下拉列表和输入框内容发生该表后操作
onsubmit表单提交事件常用于表单提交前,验证所有表单项是否合法
00. 事件的注册又分为静态注册(绑定)和动态注册(绑定)两种:
1. 静态注册事件

​ 通过html标签的事件属性直接复制与事件响应后的代码,这种方式叫静态注册.

2. 动态注册事件

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

3. 动态注册基本步骤
  1. 获取标签对象
  2. 标签对象.事件名 =function(){}
1.onload 加载完成事件

静态注册. 事件的注册又分为静态注册(绑定)和动态注册(绑定)两种:

<html>
    <head>
        <meta charest="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
        	function onloadFun(){
			alert('静态注册onload事件,所有代码');
            }
        </script>
    </head>
    <body onload="onloadFun();">
        
    </body>
</html>

动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function(){
            alert("动态注册onload事件")
        }
    </script>
</head>
<body>
</body>
</html>

2.onclick点击事件

静态注册和动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册
        function onclickFun(){
            alert('静态注册onclick事件');
        }
        //动态注册
        //(1)获取对象
        //(2)对象.事件名=function(){}
        window.onclick=function(){
            var clickobj=document.getElementById("btn02");
            clickobj.onclick=function(){
                alert("动态注册click事件");
            }
        }
    </script>
</head>
<body>
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn02">按钮2</button>
</body>
</html>

3.onblur失去焦点事件

静态注册和动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册
        function onblurFun(){
            console.log("静态注册onblur事件");
        }
        //动态注册
        window.onblur=function(){
            var passwordobj=document.getElementById("password");
            passwordobj.onblur=function(){
                console.log("动态注册onblur事件");
            }
        }

    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun()">
    密  码:<input id="password"  type="text" >
</body>
</html>

4.onchange内容发生改变事件

静态和动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册
        function onchangeFun(){
            alert("地区已更改");
        }
        //动态注册
        window.onchange=function(){
            var areaobj=document.getElementById("area");
            areaobj.onchange=function(){
                alert("快递公司已更改")
            }
        }

    </script>
</head>
<body>
    请选择所在区域:<br/>
    <select onchange="onchangeFun()">
        <option>--省市--</option>
        <option>--北京市--</option>
        <option>--天津市--</option>
        <option>--上海市--</option>
        <option>--重庆市--</option>
    </select>
    请选择快递公司:<br/>
    <select id="area">
        <option>--省市--</option>
        <option>--东风快递--</option>
        <option>--顺丰快递--</option>
        <option>--中通快递--</option>
        <option>--人肉快递--</option>
    </select>
</body>
</html>

5.表单提交事件

静态注册和动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册
        function onsubmitFun(){
            alert("静态注册表单提交失败");
            //如果不阻止直接return true;
            //否则
            return false;
        }
        //动态注册
        window.onload=function () {
            //(1)获得对象
            var onsubmitobj=document.getElementById("submit");
            //(2)对象.事件=function(){}
            onsubmitobj.onsubmit=function () {
                alert("动态注册表单提交失败")
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
        <input  type="submit" value="静态注册">
    </form>
    <form action="http://www.baidu.com" method="get" id="submit">
        <input  type="submit" value="动态注册">
    </form>
</body>
</html>

(十)DOM对象

1.说明

​ 全称:Document Object Model 把文档中的属性,文本,标签,转换成对象来管理.

2.结构图
文档  
根元素  
元素:< head >
元素: < body >    
元素< title >
文本:文档标题
元素:< a >    
属性:href
元素:< h1 >
文本:我的链接
文本:我的标题    
Document 文档树内存结构图         

Document 对象的理解

  • Document它管理了所有HTML的文档内容.
  • Document是一种树结构的文档,有层级关系.
  • 它让我们把所有的标签都对象化.
  • 我们可以通过Document访问所有标签对象.
3.Document对象的方法
  • document.getElementById(element Id)

    通过标签的id属性查找dom对象,elementId是标签的id属性值

  • document.getElementByName(elementName)

    通过标签的name属性查找标签的dom对象,elementName标签的name属性值

  • document.getElementByTagName(tagname)

    通过标签名查找dom对象 tagname是标签名

  • document.createElement(tagName)

    方法,通过给定的标签名,创建一个标签对象,tagName是要创建的标签名.

示例:

<!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 usernameText=usernameobj.value;
            var patt=/^\w{5,12}$/;//正则表达式
            if(patt.test(usernameText)) alert("用户名合法");
            else alert("用户名不合法")
        }
    </script>
</head>
<body>
    用户名:
    <input type="text" id="username" value=" ">
    <button onclick="onclickFun()">按钮1</button>
</body>
</html>

4.正则表达式
1.格式
//第一种
var patt=new RegExp(pattern,modifiers);
//第二种
var patt=/pattern/modifiers; 

2.内容

modifiers 修饰符

修饰符描述
i对大小写不区分
q找到所有匹配不是找到第一个就停止
m多行匹配

方括号

表达式描述
[abc]查找abc之间任意一个字符
[^abc]查找除abc任意一个字符
[0-9]查找0-9任意一个数字
[a-z]查找除0-9任意一个数字
[A-Z]查找A-Z之间任意一个字符
[A-z]查找A-z之间任意一个字符

元字符

元字符描述
.查找单个字符,除了换行和行结束符。
\w查找单词字符(包含a-z A-Z 0-9以及下划线)
\W查找非单词字符
\d查找数字
\D查找非数字字符
\s查找空白字符
\S查找非空白字符
\b查找单词边界字符
\B查找非单词边界字符
\n查找换行字符
\f查找换页字符
\r查找回车字符
\t查找制表字符
\v查找单个字符

量词

量词描述
n+至少一个为n的字符串
n*0个或多个n的字符串
n?0个或1个为n的字符串
n{X}X个n的序列字符串
n{X,Y}X或Y个n的序列字符串
n{X,}至少X个n的序列字符串
n$结尾为 n 的字符串。
^n开头为 n 的字符串。
?=n其后紧接指定字符串 n 的字符串。
?!=n其后没有紧接指定字符串 n 的字符串。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript是一种广泛使用的脚本语言,主要用于网页开发,为网页提供动态交互功能。它是浏览器端的主要执行环境,支持客户端和服务器端编程。以下是一些JavaScript基础概念: 1. **变量**:在JavaScript中,不需要预先声明就可以使用变量。可以直接赋值给变量名。例如: ```javascript let name = "John Doe"; ``` 2. **数据类型**:主要有字符串(String)、数值(Number,包括整数和浮点数)、布尔(Boolean)、null、undefined、数组(Array)和对象(Object)。例如: ```javascript var num = 5; var str = "Hello, World!"; ``` 3. **运算符**:有算术运算符、比较运算符、逻辑运算符等。例如加法 `+` 和等于 `==`: ```javascript var sum = 1 + 2; // sum is now 3 if (num == 5) { /* ... */ } ``` 4. **控制结构**:包括条件语句(if...else)、循环(for, while, do...while),如: ```javascript if (condition) { // code to execute if condition is true } else { // alternative code } for (let i = 0; i < 5; i++) { console.log(i); } ``` 5. **函数**:用于封装可重用的代码块。基本形式如下: ```javascript function greet(name) { return "Hello, " + name + "!"; } ``` 6. **DOM操作**:JavaScript可以操作HTML文档,如获取元素、修改样式、添加或删除节点等。 7. **异步编程**:JavaScript采用事件驱动模型,常用回调函数、Promise和async/await处理异步操作。 要深入了解JavaScript,你可以学习语法、DOM操作、网络请求、模块化、ES6及以上版本的新特性和现代前端框架如React或Vue.js。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值