本篇文章给大家谈谈javascript零基础入门书籍,以及javascript基础入门教程,希望对各位有所帮助,不要忘了收藏本站喔。
目录
一.JavaScript介绍
1.JavaScript历史
2.JavaScript简介
如果把HTML比做一个人,那么CSS就是衣服,那JS就是指人的动作和行为
JavaScript的书写:
JS代码可以直接写在标签里面,或者写在其他的.js后缀文件中,并通过标签引入。
注意:在引入js文件的里面,一定不能写js代码python for语句用法。当然也可以在标签内写js代码,但是这种方式并不推荐。
3.JavaScript书写
要求:
1.一般把标签写在 head 或者 body 里
2.要注意的是是否需要加上window.onload (表示加载)
3.如果没有特殊要求,一般标签放在body结束之前
在head中书写
<head>
<meta charset="UTF-8">
<title>JS的书写</title>
< type="text/java">
alert("头部的js") //弹窗,提示框
// 正常情况js从上往下运行,如果要让js在之后运行加上 window.onload
// window.onload = function () {
// alert("头部的js")
// }
</>
</head>
在body中书写
<body>
< type="text/java">
alert("内部的js") //弹窗,提示框
</>
</body>
在js文件中书写
< src="../JS/js1.js">
alert("111") //已经引用外部的js文件的标签,里面书写的js代码是无效的
</>
4.JavaScript注释
// 单行注释
/* */ 多行注释
5.JavaScript打印
console.log 打印输出控制台
console.log(document) //打印 document 整个文档的信息
console.log(document.body.innerHTML); //innerHTML 获取某个标签里面的所有标签内容
console.log(document.body.innerText); //innerText 获取某个标签里面的所有文本内容
6.声明变量
(1)var
1、var可以在同一作用域下多次声明同一变量
2、可以在变量声明前调用,提升变量层级,先声明变量,再定义值
console.log(num) //undefined
var num = 1
var num = 2
console.log(num) //2
var num
(2)let
1、let不可以在同一作用域下多次声明同一变量
2、不可以在变量声明前调用,不会提升变量层级
console.log(num) //报错
let num = 1
console.log(num) //2
let num1
(3)const
1、const 不可以在同一作用域下多次声明同一变量
2、不可以在变量声明前调用,不会提升变量层级
3、声明一个量时,必须要给值
const num
console.log(num); //报错
const num = 1
console.log(num); //1
(4)直接定义变量
num = 2
console.log(num); //2
二.JS获取元素
1.JS获取独有的标签
document . title 获取标题
console.log(document.title) //获取标题
document.title = '圣美' //修改标题为圣美
document . head 获取头部信息
console.log(document.head) //获取头部信息
document . body 获取body内容
console.log(document.body) //获取body内容
console.log(document.body.p) //获取p内容
2.修改标签内容
修改标题
document.title = '修改标题' //修改标题为圣美
修改body内容
document.body.innerHTML = "<h1>关于我</h1>" //innerHTML 获取某个标签里面的所有标签内容
document.body.innerText = '222' //innerText 获取某个标签里面的所有文本内容
3.通过id获取元素
可以通过标签中的id来操作元素
<p id="p1">关于中国</p>
< type="text/java">
by_id = document.getElementById("p1")
console.log(by_id.innerText)
by_id.innerText = '你好中国'
</>
4.通过class获取元素
这里获取的是多个标签,因此具体要操作哪一个标签,需要使用下标。
<span class="sp1">子冧</span>
<span class="sp1">北斗</span>
< type="text/java">
by_class = document.getElementsByClassName("sp1")
console.log(by_class[0].innerText)
by_class[0].innerText = '圣美'
</>
5.通过标签名获取元素
这里获取的是多个标签,因此具体要操作哪一个标签,需要使用下标。
<span class="sp1">子冧</span>
<span class="sp1">北斗</span>
< type="text/java">
by_tagname = document.getElementsByTagName("span")
console.log(by_tagname[1].innerText)
by_tagname[1].innerText = '圣美'
</>
6.通过name属性获取表单标签
这里获取的是多个标签,因此具体要操作哪一个标签,需要使用下标。
<form action="#">
<input type="text" name="txt" value="nan">
</form>
< type="text/java">
by_name = document.getElementsByName("txt")
by_name[0].value = "圣美"
console.log(by_name1[0].value);
</>
一般用于表单标签
7.selector选择器获取元素
document.querySelector (“”); 通过CSS选择器获取一个
<span class="sp1">子冧</span>
<span class="sp1">北斗</span>
< type="text/java">
sp1 = document.querySelector(".sp1")
console.log(sp1.innerText);
sp1.innerText = '圣美'
</>
document.querySelectorAll(“”); 通过CSS选择器获取所有
<span class="sp1">子冧</span>
<span class="sp1">北斗</span>
< type="text/java">
sp1 = document.querySelectorAll(".sp1")
console.log(sp1[1].innerText);
sp1[1].innerText = '圣美'
</>
三.JS基础事件
1.左键单击 onclick
p1 = document.getElementById("p1")
p1.onclick = function () {
p1.innerText = '你好中国'
}
2.左键双击 ondblctick
p1 = document.getElementById("p1")
p1.ondblclick = function () {
p1.innerText = '关于中国'
}
3.鼠标移入 onmouseover/onmouseenter
p1 = document.getElementById("p1")
p1.onmouseover = function () {
p1.innerText = '关于中国'
}
4.鼠标移出 onmouseout/onmouseleave
p1 = document.getElementById("p1")
p1.onmouseout = function () {
p1.innerText = '关于中国'
}
四.JS修改属性
1.获取属性值
p1 = document.getElementById('p1')
console.log(p1.getAttribute("id")); //获取属性值
//直接获取
console.log(p1.className); //通过className获取类属性值
console.log(p1.id); //获取id
2.设置属性值
p1 = document.getElementById('p1')
//设置属性值 有责改,无则增
p1.setAttribute("id","pp")
p1.setAttribute("class","p1")
//直接改
p1.className = 'p2'
p1.id = 'p2'
3.移除属性
p1 = document.getElementById('p1')
//移除属性
p1.removeAttribute("id")
4.修改样式
//不会保留之前的样式
p1.style.cssText = 'color:red;'
//保留之前的样式
p1.style["color"] = "red" //style[]可以是是变量也可以是字符串
五.JS基本数据类型
//对象object
console.log(typeof null) //空值对象
console.log(typeof [1,2,3,4]) //数组对象
console.log(typeof {1:'a',2:'b'}) //字典对象
//new Set 创建集合
set1 = new Set([1,2,3,4,]);
console.log(typeof set1) //集合对象
console.log(typeof p1) //标签对象
六.JS操作符
1.算术运算符
算术运算符(基础数字运算) + - * / %
注意:
当不是数字之间的运算的时候,+号两边一旦有字符串(引号引起的部分),那么+号就不再是数学运算了,而是拼接,最终结果是字符串。
-/*% 尽量将字符串转换成数字(隐式类型转换)
NaN: Not a Number number(不是一个数字)
2.赋值运算符
+= -= *= /= = 这些是基本的赋值运算符,除此之外还有++ --,这两个都存在隐式类型转换,会全部转成数字。
注意:
++和--的两种写法:
++、--写在数值的后面,需要二次输出才可变。
++、--写在前,立马就加一。
3.逻辑运算符
JS中的逻辑运算用:&&、||、! 来表示。 && 和 || 不会进行类型转换,!则会进行类型转换,将后面的数据先转换为布尔型在取反
注意:
逻辑运算符的算数优先级:!> && > ||
4.比较运算符
> < != >= <= ==等于、 ===全等于
如果等号两边是boolean、string、number三者中任意两者进行比较时,优先转换为数字进行比较。
console.log(null==undefined) //true 值相等,类型不等
console.log(NaN==NaN) //false NaN与NaN值不等
==等于:只比较值,不比较类型
===全等于:即比较值,也比较类型
注意:
如果等号两边出现了null或undefined,null和undefined除了和自己相等,就彼此相等
NaN==NaN 返回false,NaN和所有值包括自己都不相等。
七.JS流程控制
1、if语法:
if(条件语句){
代码段
}
else if(条件语句){
代码段
}
else{
代码段
}
2、switch选择语法:
switch (要判断的变量) {
case 值:
代码段
break //一定要加上break结束流程控制语句,否则会一直往后运行下去
case 值:
代码段
break
case 值:
代码段
break
default:
代码段
}
// 优点:只判断一次,效率高,更加严谨,判断全是全等于在判断 case(全等于===)
//一定要加上break结束流程控制语句
3、三目运算:三元运算 if else
// 语法结构:条件表达式?表达式1:表达式2
num = 10
if(num>5){
console.log('是的')
}
else {
console.log('不是')
}
res = num>5 ? '是的':'不是'
console.log(res) //是的
八.JS循环
1、for in
/*for in 语法:
for(虚构变量 in 迭代对象){
循环体
}*/
a = 'abc'
b = 1 //计数
for(i in a){ //虚构变量获取的是迭代对象的索引下标或键
console.log('这是我第'+ b + '次循环获取到的值'+ a[i])
b++
}
2、for
/*for循环语法:像while循环一样,能够使用循环三要素去做循环操作
for(初始变量;条件语句;计数运算){
循环体
}*/
for(a=1;a<=10;a++){
console.log('这是我第'+ a + '次循环')
}
3、while
/*while循环语法:
while(条件语句){
循环体
}*/
a = 6 //初始值
while (a<=5){
console.log('这是我第'+ a + '次循环')
a++
}
4、do while
/*do while循环语法:至少会执行一次
do{
循环体
}while(条件语句)*/
a = 6
do{
console.log('这是我第'+ a + '次循环')
a++
}while (a<=5)
九.JS字符串方法
1.长度 length
st = 'this is string'
console.log(st.length);
2.切片 slice
st = 'this is string'
console.log(st[2]); //单值切片
st[2] = 'I' //修改字符是无效的
console.log(st.slice(1, 4)); //双值切片,左闭右开
console.log(st.slice(1)); //向后取所有
3.截取 substring
st = 'this is string'
console.log(st.substring(1, 4)); //字符截断,左闭右开
console.log(st.substr(6,5)); //字符截取,从索引为6的地方向后取5个字符
4.分割 split
st = 'this is string'
console.log(st.split(''));
console.log(st.split(' '));
console.log(st.split(' ',2)); //切割时保留个数
5.替换 replace
st = 'this is string'
console.log(st.replace('is', 'IS')); //替换一个
console.log(st.replaceAll('is', 'IS')); //替换所有
console.log(st.replaceAll('is', '')); //替换当删除
6.转大写 toUpperCase()
st = 'this is string'
console.log(st.toUpperCase()); //转大写
7.转小写 toLowerCase()
st = 'this is string'
console.log(st.toLowerCase()); //转小写
8.查找索引 indexOf
st = 'this is string'
console.log(st.indexOf('i')); //没有返回-1
console.log(st.indexOf('i',3)); //指定位置向后找索引
9.查看对象方法 object
st = 'this is string'
console.log(Object.keys(st)); //得到一个数组,迭代对象的索引或键
console.log(Object.values(st)); //得到一个数组,迭代对象的值
10.转类型
nu = 123
res = nu.toString() //转字符串
console.log(typeof parseInt(res)); // 转整数
console.log(typeof parseFloat(res)); //转小数
11.拼接
拼接 +
shy = '帅哥'
a = '我是' + shy
console.log(a);
join数组拼接
arr = ['hello','world']
str1 = arr.join("--") //以--拼接
console.log(str1);
十.数组方法
1.长度 length
arr = [1,2,3,4,5]
console.log(arr.length)
2.切片 slice
arr = [1,2,3,4,5]
console.log(arr[0]) //单值切片
console.log(arr.slice(1,15)) //双值切片
3.增 unshift 或 push
arr = [1,2,3,4,5]
arr.push('python', 'js') //追加,向后追加
arr.unshift('python1', 'js1') //添加,向前追加
4.删 pop 或 shift
arr = [1,2,3,4,5]
arr.pop() //单个删除,默认从最后删
arr.shift() //单个删除,默认从前面删
//删除并添加
arr.splice(2,2) //指定索引批量删除
arr.splice(2,0,'python','c++') //指定索引批量删除,并添加
5.改 splice
arr = [1,2,3,4,5]
arr[0] = 111
arr[5] = 222 //无则增,有则改
arr.splice(2,1,'python','c++') //指定索引修改
6.查 indexOf
arr = [1,2,3,4,5]
console.log(arr.indexOf(2)); //查看索引位置
7.升序 sort() 降序reverse()
arr = [3,-5,1,8]
console.log(arr.sort()); //升序
console.log(arr.reverse()); //降序
8.拼接 join
x arr = [3,-5,1,8]
console.log(arr.join("--")); //以--拼接
9.定义一个空数组
arr = new Array(); //定义一个空数组
十一.JS的内置对象
可以直接使用,并且对象一般不需要导入
1.Math对象
Math对象是一个处理数学相关的对象,可以用来执行在数学相关的内容
Math.PI //圆周率 3.141592653589793
Math.pow(2, 4) //幂次方 16
Math.round(5.56) //四舍五入 不保留小数,满5进1
Math.ceil(1.2) //向上取整 不保留小数直接进1
Math.floor(1.5) //向下取整 直接不保留小数
Math.max(1,2,3,4,5) //最大值
Math.min(1,2,3,4,5) //最小值
Math.random() //随机取 0-1
2.Date对象
data = new Date() //获得当前时间
strap = data.getTime() //时间戳
year = data.getFullYear() //年份
month = data.getMonth()+1 //月份 返回值0-11
date = data.getDate() //日期
hour = data.getHours() //时
minut = data.getMinutes() //分
sec = data.getSeconds() //秒
day = data.getDay() //星期
//console.log(day);
document.body.innerText = year+'年'+month+'月'+date+'日'+hour+'时'+minut+'分'+sec+'秒'
十二.JS的Window对象
Window对象是所有客户端JS特性和API的主要接入点。它表示Web浏览器的一个窗口或窗体,并且可以用标识符window来引用它。
Window对象定义了一些属性和方法,比如:alert()方法、非常重要的document属性等
1.计时器
setTimeout() 延迟计时器,只能执行一次
setInterval() 间隔计时器,重复执行
// 计时器 1000 毫秒 = 1秒
a = 0
setTimeout(function () {
a++
console.log('延迟计时器执行了'+a+'次')
},2000) //2000毫秒后执行一次
b = 0
setInterval(function () {
b++
console.log('间隔计时器执行了'+ b +'次')
},3000) //每隔3000毫秒
clearTimeout() 清除延迟计时器
clearInterval() 清除间隔计时器
<button id="btn">计时器停止</button>
< type="text/java">
b = 0
interval = setInterval(function () {
b++
console.log('间隔计时器执行了'+ b +'次')
},3000)
btn = document.getElementById('btn')
btn.onclick = function () { //点击事件
clearInterval(interval) //传入具体的计时器对象
}
</>
2.window窗口
<span id="timer">5s</span>后跳转到百度
< type="text/java">
timer = document.getElementById('timer')
num = 5
time = setInterval(function () {
num--
timer.innerHTML = num + 's'
if(num===1){
clearInterval(time)
//跳转窗口(百度) 当前页面进行跳转,只跳转一次
// window.location.href = 'https://www.baidu.com/?tn=57095150_7_oem_dg'
//打开一个新的窗口进行跳转
w = window.open()
w.location = 'https://www.baidu.com/?tn=57095150_7_oem_dg'
//新方法
// window.open('https://www.baidu.com/?tn=57095150_7_oem_dg')
// window.close() //关闭窗口
}
},1000)
</>
十三.JS的函数
1.JS函数介绍
JS 的函数包裹在花括号当中,使用关键词function来定义。函数可以挂载在一个对象上,作为一个对象的属性,称为对象的方法。
js函数特性:
在JS中,函数即对象,程序可以随意操控它们。比如,JS可以把函数赋值给变量,或者作为参数传递给其他的函数,甚至可以设置属性,调用它们的方法。
2.有名函数
有名字的函数,使用时是:函数名加上括号执行,充当时间函数执行
/*有名函数 :可以在函数定义前调用,也可以在函数定义后调用
function 函数名(参数,参数...) {
函数体
return 返回值
}
函数名(参数值,参数值...)*/
function func(x,y) {
alert(x+y)
return x+y
}
a = func(1,2) //调用
console.log(a); //当函数未写返回值时,返回undefined
3.匿名函数
没有名字的函数,匿名函数一般不单独出现,一般充当事件函数,比如点击事件调用的函数。
/*匿名函数:不可以在函数定义前调用,可以在函数定义后调用
fa = function (参数,参数...) {
函数体
return 返回值
}
a = fa(参数值,参数值...)*/
fa = function (x,y) {
alert(x+y)
return x+y
}
a = fa(2,2)
console.log(a);
4.函数自调用
//函数自调用 + - ! ~ ()匿名函数
+function () {
alert(111)
}() //调用
5.函数传参
//函数的传参 , 不定长参数(arguments),
function func(x,y) { //形参
console.log(x) //1
console.log(y) // 参数未传值时返回 undefined
console.log(arguments) //不定长 (伪数组) 不具备pop、push
console.log(arguments.callee) //不定长 函数本身
console.log(arguments.length) //获取长度 7
for (i=0;i<arguments.length;i++){
console.log(arguments[i])
}
}
//实参可以和形参不等
func(1,2,3,4,5,6,7) //实参
6.函数递归
//函数递归 callee函数本身
function fac(x) {
if(x<=1){
return 1
}
return x*arguments.callee(x-1) //5*4*3*2*1
}
console.log(fac(5));
7.函数作用域
函数作用域 全局和局部作用域(变量的位置)
在函数内,如果是var、let、const局部变量 ,直接定义变量,是全局变量
var a = 11 //全局变量
function func() {
var a = 22 //局部变量
//a = 22 //全局变量
}
func()
console.log(a) //11
如果变量与函数重名 , 变量优先
十四.JS的异常处理
js异常处理语法:
try{
//可能出现异常的代码
}
catch(e){
//异常后返回的异常信息,e接受异常信息
}
finally {
//不管是否异常都会执行
}
例:
function fac(x) {
if(x<=1){
return 1
}
return x*arguments.callee(x-1) //5*4*3*2*1
}
try{
num = Number(prompt("请输入一个正整数")) //input输入函数
// console.log(typeof num)
fa = fac(num)
console.log(fa)
}
catch(e){
console.log(e); //返回异常信息
}
finally {
console.log('执行完毕!');
}