java之学习记录 3 - 1 - js部分记录

最新推荐文章于 2024-05-21 14:15:14 发布

dear_Zzzx

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量84

点赞数

分类专栏： html 文章标签： javascript

本文链接：https://blog.csdn.net/dear_zx/article/details/111318781

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

.JavaScript介绍

虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关！
网景公司在Netscape2.0首先推出了JavaScript
JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”
JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为
JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

js特点：

可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序（后面会学习不用浏览器也能运行）
解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象
适宜：
- 客户端数据计算
- 客户端表单合法性验证
- 浏览器事件的触发
- 网页特殊显示效果制作

js的组成：

ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口大小
- 提供 Web 浏览器详细信息的定位对象
- 提供用户屏幕分辨率详细信息的屏幕对象
- 对 cookie 的支持
- IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而实现ajax局部刷新技术

数据类型转换函数：

parseInt：强制转换成整数
- 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字）
- 例如：parseInt("6.32")=6
parseFloat：强制转换成浮点数
- 如果不能转换，则返回 NaN
- 例如：parseFloat("6.32")=6.32
typeof：查询数值当前类型，返回 string / number / boolean / object
- 例如：typeof("test"+3)=="string"

常用字符串API：

length:获取字符串的长度（字符串中字符的个数）属性，没有小括号
toUpperCase/toLowerCase :转大小写
charAt(下标) ：返回某个下标上的字符
indexof(字符)：查找字符串中字符出现的首次下标
lastIndexof(字符)：查找字符串中字符最后一次出现的下标
substring(开始,结束)：截取字符串中一部分（结束是不包含的）
replace(旧的,新的)：将字符串中的旧字符替换成新字符
split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

数组的常用方法：

tostring()：将数组转换成字符串
join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。
concat(新元素)：将原来的数组连接新元素，原数组不变。
slice(开始，结束)：在数组中提取一部分，形成新的数组。
reverse()：数组的反转（倒序）
sort()：数组排序

Math数学对象：

Math 对象用于执行数学任务
没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法

Number对象：

Number.fixed(2); 自带四舍五入技能

var n = new Number( 12.345 );
var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
console.log( n1 );
var x = new Number( 12.3 );
var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
console.log( n2 );

正则表达式：

对字符串执行模式匹配的强大工具

var reg1 = /^\d{3,6}$/; // 匹配纯数字3-6个
var reg2 = new RegExp(“^\\d{3,6}$");

// 方式1
var age = "18"; // 判断：1-3位纯数字
var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束
var b = reg.test(age); // 验证age变量的是否符合reg的匹配
if (b == true) {
    console.log("验证通过！");
} else {
    console.log("格式错误");
}
// 方式2
var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束
if (reg.test(name)) {
    console.log("验证通过！");
} else {
    console.log("格式错误");
}

日期对象：

var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); // 年份
var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1
var day = time.getDate(); // 几号
var hour = time.getHours(); // 几点
var mm = time.getMinutes(); // 分钟
var s = time.getSeconds(); //秒
var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
console.log( timestr );

参数对象：

在函数内部，调用参数列表的属性

function func(a,b,c){
    console.log( arguments.length ); // 获得参数的个数
    console.log( arguments[1] ); // 获得下标为1的参数
}

构造函数：

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);

匿名函数

没有名称的函数

var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收
    return a * 10 + b;
};
console.log( fn(3, 4) );

全局函数：

sNaN：检查其参数是否是非数字值
eval：用来转换字符串中的运算
encodeURI转码与 decodeURI解码

var name = "你好";
console.log( "转码前：" + name );
name = encodeURI(name);
console.log( "转码后：" + name );
name = decodeURI(name);
console.log( "解码后：" + name );

DOM访问：

getElementById：通过id属性获得元素节点对象
getElementsByName：通过name属性获得元素节点对象集
getElementsByTagName：通过标签名称获得元素节点对象集

添加删除替换节点：

<body>
    <button onclick="add()">添加</button>
    <button onclick="del()">删除</button>
    <button onclick="rep()">替换</button>

    <div></div>
<script>
    function add(){
        var img = document.createElement("img"); // <img>
        img.setAttribute("src","../lagou-html/img/cat.gif"); // <img
        src="../lagou-html/img/cat.gif">
        img.setAttribute("title","小猫咪"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪">
        img.setAttribute("id","cat"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪" id="cat">
        var divs = document.getElementsByTagName("div");
        divs[0].appendChild(img);
    }

    function del(){
        var img = document.getElementById("cat");
        img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点
    }

    function rep(){
        var imgold = document.getElementById("cat");
        // 通过修改元素的属性，做的替换
        // img.setAttribute("src","../lagou-html/img/2.jpg");
        var imgnew = document.createElement("img");
        imgnew.setAttribute("src","../lagou-html/img/1.jpg");
        imgold.parentNode.replaceChild( imgnew, imgold );
    }

</script>
</body>

事件：

窗口事件（仅在 body 和 frameset 元素中有效。）
- onload 当文档被载入时执行脚本
表单元素事件（仅在表单元素中有效。）
- onblur 当元素失去焦点时执行脚本
- onfocus 当元素获得焦点时执行脚本
鼠标事件
- onclick 当鼠标被单击时执行脚本
- ondblclick 当鼠标被双击时执行脚本
- onmouseout 当鼠标指针移出某元素时执行脚本
- onmouseover 当鼠标指针悬停于某元素之上时执行脚本
键盘事件
- onkeydown 按下去
- onkeyup 弹上来
事件冒泡
- 先子，后父。事件的触发顺序*自内向外*，这就是事件冒泡；
- 创建两个div，一个大一些，一个小一些

<style>
#father {
    width: 200px;
    height: 200px;
    background: black;
    padding: 10px;
}
#child {
    width: 100px;
    height: 100px;
    background: greenyellow;
}
</style>
<body>
    <div id="father">
        <div id="child"></div>
    </div>
<script>
// 代码不重要，重要是知道这个事件发生，是正常现象
document.getElementById("father").addEventListener("click", function() {
    alert("父级元素的事件被触发：" + this.id);
});
document.getElementById("child").addEventListener("click", function(e) {
    e.stopPropagation() //取消事件的冒泡机制
    alert("子级元素的事件被触发：" + this.id);
});
</script>
</body>

事件捕获
- 先父,后子。事件触发顺序变更为*自外向内*，这就是事件捕获；
- 还是刚才创建两个div，一个大一些，一个小一些

<style>
#father {
    width: 200px;
    height: 200px;
    background: black;
    padding: 10px;
}
#child {
    width: 100px;
    height: 100px;
    background: greenyellow;
}
</style>
<body>
    <div id="father">
        <div id="child"></div>
    </div>
<script>
document.getElementById("father").addEventListener("click",function(){
    alert("父级：" + this.id);
},true);
document.getElementById("child").addEventListener("click",function(){
    alert("子级：" + this.id);
},true);
</script>
</body>

BOM操作（就是javascript对浏览器的一些常规操作的方法）

window对象

<button onclick="kai()">极速入职</button>
<script>
function kai(){
    window.open("http://lagou.com" , "拉勾网" ,"width=500,height=300,left=400");
    // window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才生效
}
</script>

screen屏幕对象（我想知道我的电脑屏幕多大？实际上，得到的就是分辨率）

<body>
    <button onclick="kai()">求大小</button>
</body>
<script>
function kai() {
    alert(window.screen.width + "|" + window.screen.height);
}
</script>

navigator 导航（了解：window.navigator 对象包含有关访问者浏览器的信息;）

<script>
    var str = "";
    str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>";
    str += "<p>浏览器的名称："+ navigator.appName+"</p>";
    str += "<p>浏览器的版本："+ navigator.appVersion+"</p>";
    str += "<p>硬件平台："+ navigator.platform+"</p>";
    str += "<p>用户代理："+ navigator.userAgent +"</p>";
    str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
    document.write(str);
</script>

储存对象：

本地存储 localStorage

//保存数据：
localStorage.setItem("name","curry");

//提取数据：
localStorage.getItem("name");

//删除数据：
localStorage.removeItem("name");


// 三种方式保存数据
localStorage["a"] = 1;
localStorage.b = 2;
localStorage.setItem("c",3);
// 查看数据类型
console.log( typeof localStorage["a"] )
console.log( typeof localStorage["b"] )
console.log( typeof localStorage["c"] )
// 第一种方式读取
var a = localStorage.a;
console.log(a);
// 第二种方式读取
var b = localStorage["b"];
console.log(b);
// 第三种方式读取
var c = localStorage.getItem("c");
console.log(c);

会话存储 sessionStorage
- 会话，就是保持浏览器别关闭。关闭浏览就等于结束了一次会话。开启浏览器就意味着创建了一次会话

// 保存数据
sessionStorage.setItem("name", "klay");

// 提取数据
var lastname = sessionStorage.getItem("name");

// 删除指定键的数据
sessionStorage.removeItem("name");

// 删除所有数据
sessionStorage.clear();

// 案例：记录点击了几下按钮
<button onclick="dian()">点我</button>
<h3 id="result"></h3>
<script>
function dian(){
    if( sessionStorage.getItem("clickCount") ){
        sessionStorage.setItem("clickCount",
        Number(sessionStorage.getItem("clickCount")) + 1);
    }else{
        sessionStorage.setItem("clickCount", 1);
    }
    document.getElementById("result").innerHTML = "已经点击了"+
    sessionStorage.getItem("clickCount") +"次！"
}
</script>

计时操作

周期性定时器 setInterval
- setInterval(1,2)：周期性触发代码exp （常用）
  - 1：执行语句
  - 2：时间周期，单位为毫秒

<body>
    <h1 id="title">极速入职</h1>
<script>
    var colors = ["red","blue","yellow","pink","orange","black"];
    var i = 0;
    function bian(){
        document.getElementById("title").style.color = colors[i++];
        if(i == colors.length){
            i = 0; // 颜色重新开始
        }
    }

    function time(){
        var d = new Date();
        var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";
        document.getElementById("title").innerHTML = str;
    }

    setInterval(bian,100); // 每隔0.1秒，执行一次bian函数
    setInterval(time,1000); // 每隔1秒，执行一次时间函数time
</script>
</body>

停止定时器 clearInterval
- 案例：模拟年会抽奖

<body>
    <img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
    <br />
    <button onclick="begin()">开始</button>
    <button onclick="stop()">停止</button>
<script>
    var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
    function begin() {
        timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
    }
    function stop() {
        clearInterval(timer); // 停止定时器
    }
    function bian() {
        var i = Math.floor(Math.random() * arr.length); // 0-4
        document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
    }
</script>
</body>

一次性定时器 setTimeout(相当于延迟的效果，只执行一次)

<script>
function bian(){
    document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>

dear_Zzzx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java之学习记录 3 - 1 - js部分记录

.JavaScript介绍虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关！网景公司在Netscape2.0首先推出了JavaScript JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js” JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为 JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代
复制链接

扫一扫