JavaScript从入门到精通

1、JS书写位置

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

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

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

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

2、注释和结束符

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

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

3、输出输入语法

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

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

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>

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

</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" />
    <script>
      document.getElementById("image").src =
        "https://static.shiyanlou.com/img/shiyanlou_logo.svg";
    </script>
  </body>
</html>

// 改变 HTML 元素的样式
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p id="syl" style="color: red;">实验楼</p>
    <script>
      document.getElementById("syl").style.color = "green";
    </script>
  </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" />
    <script>
      document.getElementsByTagName("input")[0].value = "hello"; // 下标为 [0] 表示选取第 1 个 input 标签
      document.getElementsByTagName("input")[1].value = "shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签
    </script>
  </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 "您输入的值为空";
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值