JavaScript基础

最新推荐文章于 2022-11-23 17:32:46 发布
茶缸与长虫
最新推荐文章于 2022-11-23 17:32:46 发布
阅读量997
点赞数 1
文章标签：前端 javascript
本文链接：https://blog.csdn.net/qq_61326476/article/details/124144469
版权
对于控制台输出:
console.log('输出一条日志');
console.info('输出一条信息');
console.warn('输出一条警告');
console.error('输出一条错误');

其中console.log()  最常用

document.write是向html文件中写入
document.write('Hello world!<br>');


javascript文件引入html的两种方式:
1.<script>
    alert('Hello world!');
</script>
2.<script src="../JavaScriptCode/JavaScriptStudy_1.js"></script>
说明:alert()是JavaScript的一个内置函数,可以发送警告框

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

特殊值:
undefined:未定义,JavaScript变量未负值时变量默认都为undefined
null:空值
NAN:Not A Number非数字,非数值

变量的定义:
var 变量名 = 变量值;

var i;
alert(i);
警告框中输出为undefined,表示的是未定义

var i = 12;
alert(typeof (i));
对于变量进行赋值,警告框中输出的是number

var i;
i = 12;
i = 'abc';
alert(typeof (i));
此时的类型为string(相当于强制类型转换)

关系运算:
==      等于,做字面值的比较
var a = '12';
var b = 12;
alert(a == b);
这个返回的是true

===     全等于,除了做字面值的比较,还进行数据类型的比较
var a = '12';
var b = 12;
alert(a === b);
这个返回的是false

逻辑运算:
所有变量都可以作为一个Boolean变量进行使用
0,null,undefined,""(空串),都会被认为false

var a = undefined;
if(a){
    console.log(true);
}else{
    console.log(false);
}

&&是且运算,||是或运算,也可进行短路运算

数组:
JavaScript的数组是可变的,数组的类型也不固定
var a = [1,2,4,56,7];
a[5] = 781;
a[6] = 'aaas';
a[7] = undefined;
for(var i=0; i<a.length; i++){
    console.log(a[i]);
}
数组的默认为undefined
var a = [];
console.log(a[0]);

这是加强for循环的写法:
var a = ['aaa', '臭宝', 12315, null, undefined, 'aaa'*3];
for(var i in a){
    console.log(a[i]);
}
结果:
aaa
臭宝
12315
null
undefined
NaN

函数:
无参函数的调用:
function func() {
    console.log('函数被调用');
}
func();

有参函数的调用:
function func(a, b) {
    console.log('a='+a, 'b='+b);
}
func(1, '1');

有返回值:
function func(a, b) {
    return 'a='+a+' b='+b;
}
console.log(func(1,'1'));

函数也可以这样写
var func = function(a, b) {
    console.log(a+b);
};
func(1, 2);

函数不允许被重载,否则直接覆盖掉

隐藏参数:
var func = function () {
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
};
func('a', 1234, undefined);

arguments,也可以使用循环遍历输出
var func = function () {
    for(var i in arguments){
        console.log(arguments[i]);
    }
};
func('a', 'b', 1123, null, undefined, 'ad');

使用隐藏参数算所有数的值:
var func = function () {
    var ret = 0;
    for(var i in arguments){
        ret+=arguments[i];
    }
    return ret;
};
console.log(func(1, 2 ,3, 4, 5, 6, 7, 8, 9, 10));
数值与字符串相加时,做的是字符串的拼接

对象初始化的方法:
var 变量名 = new Object();
var obj = new Object();
console.log(typeof (obj));

定义一个属性:变量名.属性名 = 值;
定义一个函数:变量.函数名 = function(){};
访问:变量名.属性/函数();
var obj = new Object();

obj.name = 'abc';
obj.age = 18;
obj.eat = function () {
  console.log('我会吃饭');
};
obj.introduce = function () {
  console.log(obj.name+obj.age);
};
obj.introduce();
obj.eat();

大括号也可以定义一个对象

var obj = {};
obj.name = 'abc';
obj.age = 18;
obj.eat = function () {
  console.log('我会吃饭');
};
obj.introduce = function () {
  console.log(obj.name+obj.age);
};
obj.introduce();
obj.eat();
大括号里面可以写
属性: 值;

var obj = {
    name: 'abc',
    age: 18,

    eat: function () {
        console.log('I can eat');
    },

    introduce: function () {
      console.log(this.name+','+this.age);
    }
};

// obj.name = 'abc';
// obj.age = 18;
// obj.eat = function () {
//   console.log('我会吃饭');
// };
// obj.introduce = function () {
//   console.log(obj.name+obj.age);
// };

obj.introduce();
obj.eat();
上面的写法可以替换为这种写法

事件:
onload加载完成事件
页面加载完成之后,常用于做页面json代码初始化
onclick单击事件
常用于按钮的点击反馈操作
onblur失去焦点事件
常用于输入框失去焦点后其输入是否合法
onchange内容发生改变事件
常用于下拉列表和输入框内容发生改变后操作
onsubmit表单提交事件
常用与表单提交前,表单内容是否合法

事件的注册:
静态注册:
通过html标签事件直接赋予事件响应后的代码,这种方式成为静态注册
动态注册:
通过js代码获得dom对象,然后通过dom对象.事件名 = function(){};8

onload:
静态注册:
<body οnlοad="alert('静态注册onload事件')">(通常来说只写一句代码)
</body>

js代码:
function onloadFunc(){
    console.log('动态注册onload事件');
}
html代码:
<body οnlοad="onloadFunc()">
</body>

动态注册onload对象:
window.onload = function () {
    alert('我是动态注册');
};

静态注册onclink事件:
function onclickFunc () {
    alert('我是静态注册对象');
}
<button οnclick="onclickFunc()">按钮1</button>

// 动态注册onclink事件
/*
*
* 1.获取document对象
* 2.通过对象.事件名 = function(){};获取标签的对象
*
window.onload = function () {
    // 通过id获取对象
    var btnoj = document.getElementById("btn");
    btnoj.onclick = function () {
        alert('动态注册onclick对象')
    }

};

<head>
    <meta charset="UTF-8">
    <title>javascript study</title>
    <script type="text/javascript">

        function onclickFunc(){

            alert('我是静态注册');

        }

        window.onload = function () {
            var btnobj = document.getElementById("btn");
            btnobj.onclick = function () {
                alert('我是动态注册');
            }
        }

    </script>
</head>

<body>
    <button οnclick="onclickFunc()">按钮1</button>
    <button id="btn">按钮2</button>
</body>


失去焦点事件:
静态注册:
<script type="text/javascript">
    function onblurFunc() {
        console.log('静态注册失去焦点事件');
    }
</script>
文本:<input type="text" οnblur="onblurFunc()" />

动态注册:
window.onload = function () {
    var obj = document.getElementById('jiao');
    obj.onblur = function () {
        console.log('动态注册失去焦点事件');
    }
}
密码:<input type="password" id="jiao" />

内容发生改变事件:
注册:
<head>
    <meta charset="UTF-8">
    <title>javascript study</title>
    <script type="text/javascript">

        function onchangFunc() {
            console.log('臭宝臭死了');
        }

        window.onload = function () {
            var obj = document.getElementById('se');
            obj.onchange = function () {
                console.log('坏宝坏死了');
            }
        }

    </script>
</head>

<body>
    谁是臭宝:
    <br>
    <select οnchange="onchangFunc()">
        <option>珊珊</option>
        <option>臭宝</option>
        <option>老婆</option>
    </select>
    <br>
    谁是坏宝:
    <br>
    <select id="se">
        <option>珊珊</option>
        <option>臭宝</option>
        <option>坏宝</option>
    </select>
</body>

表单提交事件:
function onsubmitFunc () {
    alert('发现表单不合法');

    return false;
}
<form action="http://localhost:8080" method="get" οnsubmit="return onsubmitFunc()">
    <input type="submit" value="确定">
</form>

window.onload = function () {
    var obj = document.getElementById('sub');
    obj.onsubmit = function () {
        alert('表单合法');
    };

    return true;
}
<form action="http://localhost:8080" method="get" id="sub">
    <input type="submit" value="确定动态">
</form>
注册动态

dom模型:
把文档中的标签文本属性转换成对象进行管理

document管理了所有html文档内容
是一种树形结构文档,具有层级关系
可以把所有标签都对象化
可以通过document访问所有的标签对象

几个重要的方法:
document.getElementById(elementId)
通过标签的id查找dom对象
document.getElementsByName(elementName)
通过name属性查找dom对象
document.getElementsByTagName()
通过TagName查找dom对象
document.createElement(tagName)
创建一个标签对象,tagName是要创建的标签名

function onclickFunc() {
    var obj = document.getElementById('username');

    alert(obj.value);
}
用户名<input type="text" id="username" value="dss" />
<button οnclick="onclickFunc()">校验</button>

字符串是否匹配的方法:.text()

正则表达式:
正则表达式：

元字符
. 匹配除换行之外的所有字符  在re模块中需要注意
\w 匹配所有的字母跟数字跟下划线
\s 匹配任意空白符
\d 匹配任意数字
\n 匹配一个换行符
\t 匹配一个制表符

^ 匹配一个字符串的开始
$ 匹配字符串的结尾

\W 匹配非字母数字下划线
\D 匹配非数字
\S 匹配非空白字符
a|b 匹配字符a或字符b
() 匹配括号内的表达式，也表示一个组
[...] 匹配字符组中的字符
[^...] 匹配除了字符组中的字符

量词:
* 重复0次或更多次
+ 重复1次或更多次
？ 重复0次或更多次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复

贪婪匹配与惰性匹配
贪婪匹配: .*
惰性匹配: .*?

// var patt = new RegExp('e');
var patt = /e/;
var str = 'Hello world!';
alert(patt.test(str));
正则表达式

document.getElementsByName();

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">

            function checkedAll() {
                var hobbies = document.getElementsByName('hobby');

                for(var i=0; i<hobbies.length; i++){
                    hobbies[i].checked = true;
                }
            }

            function checkedNone() {
                var hobbies = document.getElementsByName('hobby');

                for(var i=0; i<hobbies.length; i++){
                    hobbies[i].checked = false;
                }

            }

            function checkedReverse() {

                var hobbies = document.getElementsByName('hobby');

                for(var i=0; i<hobbies.length; i++){
                    if(hobbies[i].checked === true){
                        hobbies[i].checked = false;
                    }else{
                        hobbies[i].checked = true;
                    }
                }

            }

        </script>
    </head>

    <body>
        兴趣选择:
        <input type="checkbox" name="hobby" value="cpp">cpp
        <input type="checkbox" name="hobby" value="java">java
        <input type="checkbox" name="hobby" value="javascript">javascript
        <br>
        <button οnclick="checkedAll()">全选</button>
        <button οnclick="checkedNone()">全不选</button>
        <button οnclick="checkedReverse()">反选</button>
    </body>

</html>

var hobbies = document.getElementsByTagName('input');
此方法是通过标签名来进行查询,返回的是集合,集合中是dom对象
顺序是html中从上到下的顺序

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">

            function checkedAll() {
                var hobbies = document.getElementsByTagName('input');

                for(var i=0; i<hobbies.length; i++){
                    hobbies[i].checked = true;
                }
            }

        </script>
    </head>

    <body>
        兴趣选择:
        <input type="checkbox" value="cpp">cpp
        <input type="checkbox" value="java">java
        <input type="checkbox" value="javascript">javascript
        <br>
        <button οnclick="checkedAll()">全选</button>
    </body>

</html>

使用顺序:
如果有id,使用getElementById
没有id优先使用etElementsByName
如果id与name属性都没有,使用getElementsByTagName
茶缸与长虫
关注
1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基础

对于控制台输出:console.log('输出一条日志');console.info('输出一条信息');console.warn('输出一条警告');console.error('输出一条错误');其中console.log() 最常用document.write是向html文件中写入document.write('Hello world!<br>');javascript文件引入html的两种方式:1.<script> alert('Hell.
复制链接

扫一扫