javascript基础入门教程,javascript从入门到放弃

最新推荐文章于 2023-12-03 12:11:36 发布

chatgpt001

最新推荐文章于 2023-12-03 12:11:36 发布

阅读量425

点赞数 8

文章标签：人工智能

本文链接： https://blog.csdn.net/chatgpt001/article/details/134706156

版权

大家好，小编来为大家解答以下问题，javascript基础入门教程，javascript从入门到放弃，今天让我们一起来看看吧！

文章目录

1、JS书写位置
2、注释和结束符
3、输出输入语法
4、变量的声明赋值和使用
5、操作HTML元素
6、字面量
7、JavaScript 数据类型
8、对象
9、数组
10、字符串
11、条件
12、循环
13、创建函数
14、常用内置对象介绍
15、对话框
16、页面加载事件
17、获取浏览器尺寸
18、定时器
19、DOM
20、异常处理

1、JS书写位置

<body>
  <!-- 内部 -->
  <>
      // JS内容
  </>

  <!-- 外部 -->
  < src="JS路径"></>

  <!-- 行内 -->
  <button onclick="alert('开玩笑的啦')">点击</button>

    <!-- 注意事项：
    JavaScript书写的位置尽量写到文档末尾</body>前面
    外部JS标签中间不要写代码，否则会被忽略 -->
    
  <!-- 页面弹窗：alert('XXX') -->
</body>

2、注释和结束符

// 单行注释 快捷键：Ctrl + /
/* */ 多行注释 快捷键：Shift + Alt + A

// 结束符：使用英文的 ; 代表语句结束
// 实际开发中，可写可不写，浏览器可以自动推断语句的结束位置
// 约定：为了统一风格，结束符要么每句都写，要么每句都不写

3、输出输入语法

<>
  // 1、文档输出内容
  document.write("要输出的内容")
  document.write("<h1>标题</h1>")
  // 2、控制台打印输出
  console.log('控制台')

  // 输入语句
  prompt("请输入您的年龄：")
</>

4、变量的声明赋值和使用

// 变量是用于存储信息的"容器"。
// 声明变量：let 变量名（注：以前使用var）
let age

// 变量命名规则
// 1、不能用关键字
// 2、只能用下划线、字母、数字、$组成，且数字不能开头
// 3、字母严格区分大小写

// 赋值
age = 18

// 声明的同时直接赋值 变量的初始化
let age = 18

//声明多个变量
let name = '张三',age = 18

5、操作HTML元素

// 改变 HTML 内容
<!DOCTYPE html>
<html>

<body>

  <h1>我的第一个 Web 页面</h1>

  <p id="demo">我的第一个段落</p>

  <>
    document.getElementById("demo").innerHTML = "段落已修改 Deepl降重。";
  </>

</body>

</html>

// 改变 HTML 属性
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <img id="image" src="https://www.baidu.com/img/bd_logo1.png" />
    <>
      document.getElementById("image").src =
        "https://static.shiyanlou.com/img/shiyanlou_logo.svg";
    </>
  </body>
</html>

// 改变 HTML 元素的样式
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p id="syl" style="color: red;">实验楼</p>
    <>
      document.getElementById("syl").style.color = "green";
    </>
  </body>
</html>

6、字面量

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)：3.14 101 123e5

字符串（String）字面量 可以使用单引号或双引号：'Tom' "John"

表达式字面量 用于计算：5 + 6

数组（Array）字面量 定义一个数组：[40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数：function myFunction(a, b) { return a * b;}

7、JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、
未定义（Undefined）、Symbol（注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。）。
值类型的值是不可变的，不可变是指值类型指向的空间不可变。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，
还有两个特殊的对象：正则（RegExp）和日期（Date）。
引用类型赋值，是将地址复制一份。

变量的数据类型可以使用 typeof 操作符来查看：typeof "John" // 返回 string

8、对象

// 通过对象字面量来创建
var student = {
  name: "zhangsan",
  age: 18,
  gender: "male",
  sayHi: function () {
    console.log("hi,my name is " + this.name);
  },
};

// 通过 new Object() 创建对象
var student = new Object();
(student.name = "zhangsan"),
  (student.age = 18),
  (student.gender = "male"),
  (student.sayHi = function () {
    console.log("hi,my name is " + this.name);
  });

// 通过工厂函数创建对象
function createStudent(name, age, gender) {
  var student = new Object();
  student.name = name;
  student.age = age;
  student.gender = gender;
  student.sayHi = function () {
    console.log("hi,my name is " + this.name);
  };
  return student;
}
var s1 = createStudent("zhangsan", 18, "male");

// 自定义构造函数
function Student(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHi = function () {
    console.log("hi,my name is " + this.name);
  };
}
var s1 = new Student("zhangsan", 18, "male");

// 原型
function Student(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

Student.prototype.sayHi = function () {
  console.log("hi");
};

var s1 = new Student("zhangsan", 18, "male");
s1.sayHi(); // 打印 hi
var s2 = new Student("lisi", 18, "male");
s2.sayHi(); // 打印 hi
console.log(s1.sayHi == s2.sayHi); // 结果为 true

// 访问对象属性
Student.name;
Student["name"];

var student = {
  name: "zhangsan",
  age: 18,
  gender: "male",
};
// 遍历对象的属性
for (var key in student) {
  console.log(key);
  console.log(student[key]);
}
// 删除对象的属性
delete student.name;

9、数组

var myarray = new Array(1, 2, 3, 4, 5); // 创建数组同时赋值
// or
var myarray = [1, 2, 3, 4, 5]; // 直接输入一个数组（称“字面量数组”）

myarray.length; //获取数组长度

//字符串转换为数组
"1:2:3:4".split(":"); // returns ["1", "2", "3", "4"]
"|a|b|c".split("|"); // returns ["", "a", "b", "c"]

//数组转换为字符串
["1", "2", "3", "4"].join(":"); // returns "1:2:3:4"
["", "a", "b", "c"].join("|"); // returns "|a|b|c"

//在数组尾部添加一个或多个元素 开始 unshift()
myarray.push("6","7");

//删除数组的最后一个元素 开始 shift()
myarray.pop()

10、字符串

// 连接字符串
var one = "Hello,jack.";
var two = "I'm rose";
result = one + two;

// 字符串转换
// 把数字转换成字符串
var myNum = 123;
var myString = myNum.toString(); // 数值类型的 toString()，可以携带一个参数，输出对应进制的值 2 8 10 16
// or
var num = String(myNum); // 因为有的值没有 toString() 方法，所以需要用 String()
typeof myString;

// 字符串类型的数字转换为数字
var myString = "123";
var myNum = Number(myString);
typeof myNum;

// 获取字符串长度
var myString = "hello world ";
myString.length;

// 在字符串中查找子字符串
str.indexOf(searchValue, fromIndex);
/*
str 指的是我们需要查的较长的字符串，searchValue 表示我们指定的较小的字符串，
fromIndex 表示调用该方法的字符串中开始查找的位置，是一个可选的任意整数值，也可以不写，
默认是 0 表示从头开始查，fromIndex < 0 和 fromIndex = 0 是一样的效果，表示从头开始查找整个字符串。
如果 fromIndex >= str.length，则该方法的返回值为 -1。
这里有个特殊的情况：就是如果被查找的字符串（searchValue）是一个空字符串，
那么当 fromIndex <= 0 时返回 0，0 < fromIndex <= str.length 时返回 fromIndex，
fromIndex > str.length 时返回 str.length。
*/

// 在字符串中提取子字符串 
"Blue Sky".slice(0, 3); // returns "Blu"
// 第一个参数 start 是开始提取的字符位置，第二个参数 end 是提取的最后一个字符的后一个位置。
// 所以提取从第一个位置开始，直到但不包括最后一个位置。
// 另外第二个参数也可以不写，不写代表某个字符之后提取字符串中的所有剩余字符。

// 转换大小写
var string = "I like study";
string.toLowerCase(); // returns "i like study"
string.toUpperCase(); // returns "I LIKE STUDY"

// 替换字符串的某部分
var string = "I like study";
string.replace("study", "sleep"); // returns "I like sleep"

// 转换成数值类型
// Number() 可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回 NaN（not a number）
var num1 = Number(true);
num1; // true 返回 1，false 返回 0

var num2 = Number(undefined);
num2; // 返回 NaN

var num3 = Number(null);
num3; // 返回 0

var num4 = Number("syl");
num4; // 返回 NaN

var num5 = Number("   ");
num5; // 如果是空字符串返回 0

var num6 = Number(123);
num6; // 返回123，如果是数字型的字符，返回数字

var num7 = Number("123abc");
num7; // 返回 NaN

// parseInt() 把字符串转换成整数  可以传递两个参数，第一个参数是要转换的字符串，第二个参数是要转换的进制
var num1 = parseInt("12.3abc");
num1; // 返回 12，如果第一个字符是数字会解析知道遇到非数字结束，只取整，不是约等于

var num2 = parseInt("abc123");
num2; // 返回 NaN，如果第一个字符不是数字或者符号就返回 NaN

var num3 = parseInt("");
num3; // 空字符串返回 NaN，但是 Number("")返回 0

var num4 = parseInt("520");
num4; // 返回 520

var num5 = parseInt("0xA");
num5; // 返回 10

// parseFloat() 把字符串转换成浮点数。写法和 parseInt() 相似，主要有以下几个不同点：
// parseFloat 不支持第二个参数，只能解析 10 进制数。
// 如果解析的内容里只有整数，解析成整数。

// 转换成布尔类型
Boolean(123); // returns true
Boolean("abc"); // returns true
Boolean(null); // returns false
Boolean(undefined); // returns false
Boolean(NaN); // returns false
Boolean(0); // returns false
Boolean(""); // returns false
Boolean(false); // returns false
Boolean("false"); // returns true
Boolean(-1); // returns true

11、条件

if (条件) 
{
  // 当条件为 true 时执行的语句
} 
else 
{
  // 当条件为 false 时执行的语句
}


if(条件 1)
{
    // 当条件 1 为 true 时执行的代码
}
else if(条件 2)
{
    // 当条件 2 为 true 时执行的代码
}
else
{
    // 当条件 1 和 条件 2 都不为 true 时执行的代码
}


switch(k)
{
    case 1:
        执行代码块 1 ;
        break;
    case 2:
        执行代码块 2 ;
        break;
    default:
        默认执行（k 值没有在 case 中找到匹配时）;
}


// 三元运算符
条件表达式？结果 1:结果 2

12、循环

for (初始化; 条件; 增量) 
{
  循环代码;
}

使用 break 跳出循环

使用 continue 跳过迭代 不是完全跳出循环，而是跳过当前循环而执行下一个循环

while (条件) 
{
  // 需要执行的代码;
}
while 循环只有在条件为真的时候才执行

do 
{
  // 需要执行的代码;
} while (条件);
do while 循环在检测条件之前就会执行

while 循环，先判断再执行；do while 循环先执行一次再判断。

13、创建函数

函数声明创建函数
function functionName(parameters) 
{
  // 执行的代码
}

函数表达式创建函数
var functionName = function (parameters) 
{
  // 执行的代码
};

在 JavaScript 中没有重载

在 JavaScript 中函数的返回值
如果函数中没有 return 语句，那么函数默认的返回值是：undefined。
如果函数中有 return 语句，那么跟着 return 后面的值就是函数的返回值。
如果函数中有 return 语句，但是 return 后面没有任何值，那么函数的返回值也是：undefined。
函数在执行 return 语句后会停止并立即退出，也就是说 return 语句执行之后，剩下的代码都不会再执行了。
当函数外部需要使用函数内部的值的时候，我们不能直接给予，需要通过 return 返回。

匿名函数 匿名函数就是没有命名的函数，一般用在绑定事件的时候
function()
{
    // 执行的代码
}

匿名函数不能通过直接调用来执行，因此可以通过匿名函数的自调用的方式来执行
(function () {
  alert("hello");
})();

递归
function foo(n) {
  if (n == 0) {
    return 0;
  } // 临界条件
  else {
    return n + foo(n - 1);
  }
}
var a = foo(10);
a; // 55


闭包是指函数可以使用函数之外定义的变量。

简单的闭包
var num = 3;
function foo() {
  console.log(num);
}
foo(); //打印 3


复杂的闭包
function f1() {
  var num1 = 6;
  function f2() {
    var num2 = 7;
    return num2;
  }
  console.log(num1 + f2());
}
f1();

在函数代码中，使用特殊对象 arguments，无需明确指出参数名，我们就能访问它们。
第一个参数是 arguments[0]，第二个参数是 arguments[1]，以此类推。
function add() {
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
add(); // 0
add(1); // 1
add(1, 2); // 3
add(1, 2, 3); // 6


用 Function() 对象创建函数的语法如下：
var function_name = new Function(arg1, arg2, ..., argN, function_body)
注：每个参数都必须是字符串，function_body 是函数主体，也就是要执行的代码。
例子：
var add = new Function("a", "b", "console.log(a+b);");
add(2, 5); // 打印 7

function addF(foo, b, c) {
  foo(b, c);
}
var add = new Function("a", "b", "console.log(a+b);");
addF(add, 2, 5); // 打印 7

14、常用内置对象介绍

Array 对象

Array 对象的常用属性：length，获取数组的长度。

Array 对象的常用方法：
concat() 方法用于连接两个或多个数组，并返回结果。
var a = [1, 2, 3];
var b = [4, 5, 6];
var c = ["one", "two", "three"];
console.log(a.concat(b, c)); // 打印结果为：[1, 2, 3, 4, 5, 6, "one", "two", "three"]

join() 方法，将数组转换成字符串。
pop() 方法，删除并返回数组的最后一个元素。
push() 方法，向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 方法，颠倒数组的顺序。
shift() 方法，删除并返回数组的第一个元素。
unshift() 方法，向数组的开头添加一个或更多元素，并返回新的长度。

slice(start, end) 方法，从某个已有的数组返回选定的元素。
// strat 值是必需的，规定从何处开始选取
// end 值可选，规定从何处结束选取，如果没有设置，默认为从 start 开始选取到数组后面的所有元素

splice(start, deleteCount, options) 方法，删除或替换当前数组的某些项目。
// start 值是必需的，规定删除或替换项目的位置
// deleteCount 值是必需的，规定要删除的项目数量，如果设置为 0，则不会删除项目
// options 值是可选的，规定要替换的新项目
// 和 slice() 方法不同的是 splice() 方法会修改数组

sort() 方法，将数组进行排序。

String 对象

String 对象的常用属性：length，获取字符串的长度。

String 对象的常用方法：
charAt(index) 方法，获取指定位置处字符。
// 字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串

charCodeAt(index) 方法，获取指定位置处字符的 Unicode 编码。
concat() 方法，连接字符串，等效于 “+”，“+” 更常用。与数组中的 concat() 方法相似。
slice() 方法，提取字符串的片断，并在新的字符串中返回被提取的部分。
indexOf() 方法，检索字符串。
toString() 方法，返回字符串。
toLowerCase() 方法，把字符串转换为小写。
toUpperCase() 方法，把字符串转换为大写。
replace() 方法，替换字符串中的某部分。
split() 方法，把字符串分割为字符串数组。

Date 对象
Date 对象方法：
Date()：返回当日的日期和时间（输出的是中国标准时间）。
getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()：从 Date 对象返回月份 (0 ~ 11)。
getFullYear()：从 Date 对象以四位数字返回年份。
getHours()：返回 Date 对象的小时 (0 ~ 23)。
getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()：返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()：返回 Date 对象的毫秒(0 ~ 999)。

Math 对象

Math 对象的常用属性：
E ：返回常数 e (2.718281828...)。
LN2 ：返回 2 的自然对数 (ln 2)。
LN10 ：返回 10 的自然对数 (ln 10)。
LOG2E ：返回以 2 为底的 e 的对数 (log2e)。
LOG10E ：返回以 10 为底的 e 的对数 (log10e)。
PI ：返回 π（3.1415926535...)。
SQRT1_2 ：返回 1/2 的平方根。
SQRT2 ：返回 2 的平方根。

Math 对象的常用方法：
abs(x) ：返回 x 的绝对值。
round(x) ：返回 x 四舍五入后的值。
sqrt(x) ：返回 x 的平方根。
ceil(x) ：返回大于等于 x 的最小整数。
floor(x) ：返回小于等于 x 的最大整数。
sin(x) ：返回 x 的正弦。
cos(x) ：返回 x 的余弦。
tan(x) ：返回 x 的正切。
acos(x) ：返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。
asin(x) ：返回 x 的反正弦值。
atan(x) ：返回 x 的反正切值。
exp(x) ：返回 e 的 x 次幂 (e^x)。
pow(n, m) ：返回 n 的 m 次幂 (nm)。
log(x) ：返回 x 的自然对数 (ln x)。
max(a, b) ：返回 a, b 中较大的数。
min(a, b) ：返回 a, b 中较小的数。
random() ：返回大于 0 小于 1 的一个随机数。

15、对话框

alert()：显示带有一段消息和一个确认按钮的警告框。
prompt()：显示可提示用户输入的对话框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

16、页面加载事件

window.onload = function () {
  // 当页面加载完成执行
  // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
};

window.onunload = function () {
  // 当用户退出页面时执行
};

17、获取浏览器尺寸

var width = window.innerWidth;
document.documentElement.clientWidth;
document.body.clientWidth;

var height = window.innerHeight;
document.documentElement.clientHeight;
document.body.clientHeight;

18、定时器

// setTimeout() 方法在指定的毫秒数到达之后执行指定的函数，只执行一次。
// clearTimeout() 方法取消由 setTimeout() 方法设置的 timeout。

// 创建一个定时器，2000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
  console.log("Hello shiyanlou");
}, 2000);

// 取消定时器的执行
clearTimeout(timerId);

// setInterval() 方法设置定时调用的函数也就是可以按照给定的时间（单位毫秒）周期调用函数，
// clearInterval() 方法取消由 setInterval() 方法设置的 timeout。

// 创建一个定时器，每隔 2 秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 2000);

// 取消定时器的执行
clearInterval(timerId);

19、DOM

// 获取节点

// 通过 ID 找到 HTML 元素：使用方法 getElementById() 通过元素的 ID 而选取元素
document.getElementById("demo"); // 假定已经有一个 ID 名为 demo 的标签，可以这样来获取它

// 通过标签名找到 HTML 元素：使用方法 getElementsByTagName() 来选取元素，
// 如果有多个同类型标签，那么我们可以通过下标来确认
<html>
  <body>
    <input type="text" />
    <input type="text" />
    <>
      document.getElementsByTagName("input")[0].value = "hello"; // 下标为 [0] 表示选取第 1 个 input 标签
      document.getElementsByTagName("input")[1].value = "shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签
    </>
  </body>
</html>

// 通过类名来找到 HTML 元素：使用方法 getElementsByClassName() 通过元素的类名来选取元素。
document.getElementsByClassName("name"); // 返回包含 class = "name" 的所有元素的一个列表。

// 获取文档中第一个 <p> 元素：
document.querySelector("p");
// 获取文档中 class="example" 的第一个元素:
document.querySelector(".example");
// 获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");
// 获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector("a[target]");

// 创建节点
创建元素节点：使用 createElement() 方法。比如：var par = document.createElement("p");
创建属性节点：使用 createAttribute() 方法。
创建文本节点：使用 createTextNode() 方法。


// 插入子节点
appendChild () 方法向节点添加最后一个子节点。
insertBefore (插入的新的子节点，指定的子节点) 方法在指定的子节点前面插入新的子节点。如果第二个参数没写或者为 null，则默认插入到后面。


// 删除节点
父节点.removeChild(子节点);
node.parentNode.removeChild(node); // 如果不知道父节点是什么，可以这样写


// 替换子节点
node.replaceChild(newnode, oldnode);


// 设置节点属性
获取：getAttribute(name)
设置：setAttribute(name, value)
删除：removeAttribute(name)


// 常用的事件
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

// 添加事件
document.querySelector('.btn').addEventListener('click', () => {
  console.log("点击按钮")
})

20、异常处理

try {
  // 这里写可能出现异常的代码
} catch (err) {
  // 在这里写，出现异常后的处理代码
}
注意：
语句 try 和 catch 是成对出现的。
如果在 try 中出现了错误，try 里面出现错误的语句后面的代码都不再执行，直接跳转到 catch 中，catch 处理错误信息，然后再执行后面的代码。
如果 try 中没有出现错误，则不会执行 catch 中的代码，执行完 try 中的代码后直接执行后面的代码。
通过 try-catch 语句进行异常捕获之后，代码将会继续执行，而不会中断。

通过 throw 语句，我们可以创建自定义错误。throw 语句常常和 try catch 语句一起使用。
比如：throw "您输入的值为空";