javascript零基础入门书籍,javascript基础入门教程

原创 于 2023-12-03 12:15:22 发布 · 894 阅读 · 22 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小狗写作

本篇文章给大家谈谈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('执行完毕！');
}
chatgpt001
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值