初识JavaScript
Posted 刘小鹿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识JavaScript相关的知识，希望对你有一定的参考价值。
一：javascript导读
JS属于编写运行在浏览器上的脚本语言
JS采用ECMScript语法
操作BOM：浏览器对象模型
操作DOM：文档对象模型
如：使用浏览器的历史记录，使用浏览器的弹出框，修改页面内容，修改页面样式，响应用户交互事件等
二：JavaScript引入
2.1行间式：存在于行间事件中
<!--行间式：就是代码块书写在全局事件属性中--> <!--单击，this就是激活该代码块（脚本）的页面标签（页面元素对象）--> <div id="box" onclick="this.style.borderRadius= ‘10px‘"></div> <!--双击--> <div id="box2" ondblclick="this.style.backgroundColor=‘orange‘"></div>
2.2内联式：存在于页面中script标签中
<div id="temp"></div> <!--内联式：id为标签的唯一标识，使用可以识别到html的具体标签--> <script> temp.onclick=function () {//完成某一项功能
this.style.width="280px" //this=>temp } </script>
2.3外联式：存在于外部JS文件中，通过script标签src属性连接
<div id="res"></div> </body> <!--外联式--> <script src="外联式JS文件.js"></script> </html>
外联式JS文件
res.onclick=function() { //res点击会触发一个功能
this.style.height="200px";
this.style.backgroundColor="cyan";
this.style.borderRadius="50%";
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS引入三种方式</title> <style> #box,#temp,#res,#box2{ height: 200px; width: 200px; background-color: darkcyan; margin-top: 10px; } </style> <script> alert("Hello JavaScript!") </script> </head> <body> <!--行间式--> <!--单击--> <div id="box" onclick="this.style.borderRadius= ‘10px‘"></div> <!--双击--> <div id="box2" ondblclick="this.style.backgroundColor=‘orange‘"></div> <div id="temp"></div> <!--内联式--> <script> temp.onclick=function () {this.style.width="280px" } </script> <div id="res"></div> </body> <!--外联式--> <script src="外联式JS文件.js"></script> </html>
三：JS选择器
JS选择器两种方式：getElement系列和querySelect系列
<div id=‘box‘ class="bb"></div> <div class=‘box1 bb‘></div> <div class=‘box1 bb‘></div> <script> // getElement系列 // box var box = document.getElementById(‘box‘); // [] | [.box1] | [.box1, ..., .box1] var boxs = document.getElementsByClassName(‘box1‘); // [] | [div] | [div, ..., div] var divs = document.getElementsByTagName(‘div‘); // 总结: 参数采用的是id名或类名或标签名,不需要带符号(#|.) </script> <script> // 只能获取检索到的第一个满足条件的标签(元素对象) var div = document.querySelector(‘.bb‘); // 获取的是满足条件的有双类名的.box1.bb var divs = document.querySelectorAll(‘body .box1.bb‘); // 总结: 参数采用的就是css选择器语法 </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS选择器</title> <style> #box, .box1, .box2{ background-color: coral; width: 200px; height: 200px; margin-top: 2px; } </style> </head> <body> <div id="box"></div> <!--虽然id可以重复, 但是js中就无法唯一标识识别, 所以约定俗成标签id名一定不能重复--> <div id="box"></div> <div class="box1"></div> <div class="box1"></div> <div class="box2">1</div> <div class="box2">2</div> </body> <script> // 事件绑定着函数的地址, 使用激活事件, 就会通过函数地址找到函数功能体, 完成指定功能 // 页面如果有两个id="box", 一个都匹配不上 // box.onclick = function () { // this.style.borderRadius = "50%"; // } // document对象 //getElement系列选择器，能够得到第一个id="box"，但是永远取不到第二个，所以id不能重复 document.getElementById(‘box‘).onclick=function () { this.style.borderRadius=‘50%‘; } //JS变量的定义：关键字（var） 变量名 = 变量值； var num =10; //如何查看变量名 var a=num; //1.调用浏览器使用打印机 // print(num) //2.弹出框查看 // alert(num) // alert(a) // 3.浏览器控制台查看（***） // console.log(num) // console.log(a) // 4.将内容书写到页面 // document.write(num) // document.write(a) // 5.断点调试（***） // 断点调节（debug） var box = document.getElementById(‘box‘); // 上面和下面获取的都是第一个box, box的点击事件最终绑定到的是改变背景颜色的函数地址 box.onclick=function () { this.style.backgroundColor="green"; } // 通过类名=>类名可以重复=>获取到的结果是数组（列表）,这里是第一个box1，所以用boxs[0]取值 var boxs=document.getElementsByClassName(‘box1‘); console.log(boxs); boxs[0].onclick=function () { this.style.backgroundColor=‘blue‘; } boxs[1].onclick=function () { this.style.backgroundColor=‘pink‘; } // 通过标签名=>标签名=>获取的结果是数组（列表） var divs=document.getElementsByTagName(‘div‘); console.log(divs); divs[1].ondblclick=function () { divs[1].style.borderRadius="50%"; } </script> <script> // 参数：CSS语法选择器 var box2s = document.querySelectorAll(‘body .box2‘); console.log(box2s) var box2=document.querySelector(‘body .box2‘); console.log(box2) </script> </html>
四：事件
var box = document.querySelector(‘.box‘);
// 元素对象.事件名 = 函数
box.onclick = function() {
// 具体功能代码块; this代表就是激活该事件的元素对象
this.style.color = ‘red‘; // 将box的字体颜色修改为红色
}
五：操作页面文档
// 1. 通过选择器获取页面元素对象(指定的标签) // 2. 为该对象绑定事件 // 3. 通过事件中的功能操作元素对象 // i) 修改内容: innerText | innerHTML // ii) 修改样式 // iii) 修改类名 var box = document.querySelector(‘.box‘); // 获取页面元素 box.onclick = function () { // 绑定事件 // 修改内容 // this.innerText = "innerText"; // 不能解析html标签 // this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签 // 修改样式 => 修改的是行间式 => 优先级高于所有内联外联样式(没有设置!important) // this.style.color = "green"; // this.style.fontSize = "12px"; // 修改类名 // this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们 // 在原类名基础上添加类型 this.className += " box1"; // 多类名之间用空格隔开, 所有做字符串拼接时一定需要添加空格 // 清除类名 this.className = ""; // 将类名等于空字符串就是置空类名 }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作页面文档</title> <style> .box { width: 200px; height: 200px; background-color: orange; font: 900 30px/200px "STSong"; text-align: center; color: red!important; margin: 0 auto; } .box.box1 { color: greenyellow!important; font-size: 12px; font-weight: lighter; } </style> </head> <body> <div class="box">文本内容</div> </body> <script> // 1. 通过选择器获取页面元素对象(指定的标签) // 2. 为该对象绑定事件 // 3. 通过事件中的功能操作元素对象 // i) 修改内容: innerText | innerHTML // ii) 修改样式 // iii) 修改类名 var box = document.querySelector(‘.box‘); box.onclick = function () { // 修改内容 // this.innerText = "innerText"; // this.innerHTML = "<i>innerHTML</i>"; // 可以解析html标签 // 修改样式 => 修改的是行间式 // this.style.color = "green"; // this.style.fontSize = "12px"; // 修改类名 // this.className = "box1"; // 直接修改类名, 会丢失之前类名下的属性们 // 在原类名基础上添加类型 this.className += " box1"; // var cName = this.className; // console.log(cName); // cName = cName + " " + "box1"; // console.log(cName); // this.className = cName; // 清除类名 this.className = ""; } </script> </html>
六：计算后样式
计算后样式：内联式和外联式书写的样式都叫计算后样式
// 内联或外联设置的(行间式设置getComputedStyle也能获取到)
.box {
font-size: 100px;
}
// 如何获取计算后样式
// getComputedStyle(元素对象, 伪类).属性名
var box = document.querySelector(‘.box‘);
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize); // 100px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算后样式</title> <style> /*计算后样式: 内联式和外联式书写的样式都叫计算后样式*/ .box { width: 200px; height: 200px; background-color: orange; font-size: 100px; } </style> </head> <body> <!--<div class="box" style="font-size: 30px">12345</div>--> <div class="box">12345</div> </body> <script> // 如何获取提取设置好的样式属性值 var box = document.querySelector(‘.box‘); var ftSize = box.style.fontSize; // 这种方式操作的永远是行间式 console.log(">>>>>>>>>>>>>>>>" + ftSize); // 如何获取计算后样式 // getComputedStyle(元素对象, 伪类).属性名 ftSize = getComputedStyle(box, null).fontSize; console.log("=================" + ftSize); </script> </html>
七：数据类型
7.1值类型
// Number: 数字类型
var a1 = 10;
var a2 = 3.14
// String: 字符串
var s1 = "123";
var s2 = ‘456‘;
// undefined: 未定义
var u1;
var u2 = undefined;
// Boolean: 布尔
var b1 = true;
var b2 = false;
// typeof() 来查看类型
7.2引用类型
// Object
var obj = {};
// Function
var func = function(){}
// Null
var n = null;
JS基础语法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js基础语法</title> </head> <body> js基础语法 <div id="box"></div> </body> <script> // 1.定义变量 var num = 10; var s = "hello js"; console.log(num, "<<>>", s); console.log("%d %s", num, s); // 将字符串赋值给页面元素对象 box.innerText = s; //命名规范： // 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符） // 区分大小写 // 不能出现关键字及保留字 // var var = 30; // 出错 // 数据类型 // 值类型 // 数字类型 | 字符串类型 | 未定义类型 | 布尔类型 // 用typeof()函数可以查看变量类型 // 1.Number var a = 10; console.log(a, typeof(a)); a = 3.14; console.log(a, typeof(a)); // 2.String a = ‘123‘; console.log(a, typeof(a)); a = "456"; console.log(a, typeof(a)); // 3.undefined var b; console.log(b); a = undefined; console.log(a, typeof(a)); // 4.boolean a = true; console.log(a, typeof(a)); b = false; console.log(b, typeof(b)); // 引用类型 // 5.Function a = function () { return 0; } console.log(a, typeof(a)); // 6.Object => 当做字典 a = { name: "Bob", age: 18 } console.log(a, typeof(a)); // 7.Null => 空对象 a = null; console.log(a, typeof(a)); // 其他 // 数组对象 a = new Array(1, 2, 3, 4, 5); console.log(a, typeof(a)); a = [5, 4, 3, 2, 1]; // 语法糖 console.log(a, typeof(a)); // 时间对象 (cookie) a = new Date(); // 当前时间 // a = new Date("2019-3-1 12:00:00"); // 设定的时间 console.log(a, typeof(a)); var year = a.getFullYear(); console.log(year) console.log(a.getDay()) // 周几 console.log(a.getMonth()) // 月份(从0) console.log(a.getDate()) // 几号 // 正则 var re = new RegExp(‘\d{3}‘, ‘g‘); var res = "abc123abc123".match(re); console.log(res); re = /d{2}/g; res = ‘a1b23c456‘.match(re); console.log(res); re = /[abc]/gi; res = ‘aBc‘.match(re); console.log(res); // 总结: // 1.正则 /正则语法/ // 2.参数g 全文匹配 // 3.参数i 不区分大小写 // 数组与对象(字典)的使用 var arr = [3, 5, 2, 1, 4]; console.log(arr[2]); var dic = { "name": "Bob", age: 18, "little-name": "b" } console.log(dic[‘name‘]); console.log(dic[‘age‘]); console.log(dic.name); console.log(dic.age); console.log(dic["little-name"]) // dic中所有的key都是string类型, value可以为任意类型 // dic中key可以通过中括号及.语法访问值,但key不满足js命名规范时,只能使用中括号语法 </script> </html>
以上是关于初识JavaScript的主要内容，如果未能解决你的问题，请参考以下文章
初识OpenGL 片段着色器(Fragment Shader)
初识OpenGL 片段着色器(Fragment Shader)
VSCode自定义代码片段12——JavaScript的Promise对象