【前端学习】JavaScript入门
一个简单的js入门学习...
前端学习：JavaScript入门
前言
在学习过HTML和CSS之后，我们终于到了前端三剑客的最后一位：JavaScript的学习的。
开宗明义，概念先行！什么是JavaScript呢？百度百科的解释如下：
JavaScript就是为网景公司的浏览器而生的。因为网景的高层特别喜欢Java这门语言，所以决定仿照Java风格设计一门语言。这就是JavaScript的诞生原因。
现在JavaScript的标准是ECMAScript。因为JavaScript语言的本身不严谨性，所以给其设置了一套规范。
class01
1.我的第一个JavaScript
JavaScript的写法很简单，也是分为内部引入和外部引入。
内部就是写一个<script>标签，在其中写下JavaScript的代码就行了。外部映入就是引入一个src，用法就是<script src="js/jsp.js"></script>，其中src就是外部js文件的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
script标签内部输入JavaScript代码
<script>
alert("hello world");
</script>
<!--外部引入一个js文件-->
<script src="js/jsp.js"></script>
<!--不写默认是JavaScript的type-->
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
2.js基本语法
js和所有语言一眼，都有变量，但是它的独特性就是，没有所谓的int型、char型、bool型。就只有var和let。var一般用来做成员变量，let用来做局部变量。（其实都用一种也行）。当然，还有一种恒量，我们用const表示。 js的条件流程控制和c语言、Java都一样，if-else语句，while循环，for循环，do-while循环都是存在的，语法规范也都一样，这里就不多赘述了。 上一个例子。
<!--JavaScript严格区分大小写-->
<script>
// 1、定义变量 变量类型 变量名 = 变量值；
var num1 = 1;
var num2 = 2;
const PI = '3.14';
// alert(num);
// 2、条件控制
if (num1 < num2){
alert("true");
}
// 在浏览器的控制台打印
// console.log(num1);
</script>
3.严格模式
由于js这门语言的规范性太过于松散，基本上除了乱写，写什么都不会报错，所以有了严格strict模式，使用方法就是在script的最开头写一行
"use strict"
举个例子：
<script>
"use strict" // 严格检查模式
// 都使用let 设置变量
// var相当于成员变量
// let相当于局部变量
let i;
i = 1;
</script>
4.数据类型
在刚刚我们已经讲过JavaScript的数据类型了，我们直接看：
<script>
"use strict" // 严格检查模式
// 都使用let 设置变量
// var相当于成员变量
// let相当于局部变量
let i;
i = 1;
</script>
class02
1.字符串
JavaScript中的字符串其实也是let变量，只不过js中有内置方法来处理字符串。而且有多行字符串编写的：
<script>
// 字符串不可变,不可再次被重新赋值
// 字符串方法、属性和java差不多
let str = "1234";
console.log(str.length); // 字符串的长度
console.log(str.charAt(0)); // 0号位置的元素
str.toLocaleLowerCase(); // 转化为小写
str.toLocaleUpperCase(); // 转化为大写
// 多行字符串编写 用 ``
let str1 = `你好
您好
他好
我也好`;
// 模板字符串
// ${xxx} 直接在其他字符串中应用xxx字符串
let name = "woodwhale";
let msg = `你好,${name}`;
</script>
2.数组
JavaScript中数组的方法和Java中的处理数组的方法类似。下面我们举几个具体的方法来看：
<script>
// Array可以包含任意的数据类型
let arr = [1,2,3,4,"123",true];
console.log(arr.length);
// 如果给数组赋值,数组的大小会改变
arr.length = 1; // 这样操作arr只剩下 1
arr.indexof(2); // 获取下标为 2 的元素
// slice() 截取数组的一部分,返回一个新数组,类似于String中的substring
let arr0 = arr.slice();
// push() pop()
arr.push(1); // 压入到尾部
arr.pop(1); // 弹出尾巴的一个元素
// unshift() shift()
arr.unshift(1); // 压入到头部
arr.shift(1); // 弹出头部的一个元素
// 排序 sort()
arr1 = ["B","C","A"];
arr1.sort();
// 元素反转 reverse()
arr2 = ["a","b","c"];
arr2.reverse();
// 数组拼接 concat()
arr.concat([1,2,3]); // 没有改变原数组，只是会返回一个新的数组
// 连接符 join
arr.join('-'); // 打印拼接数组，使用特定的字符串连接
// 多维数组
arr = [[1,2],[3,4],[5,6]];
// 数组填充
arr.fill(1);
</script>
3.对象
JavaScript也是一门面向对象的语言，自然存在“对象”的说法。对象的表示方法和Java并不一样。Java中是通过new的方式创建对象，而JavaScript是通过“键值对”的方式来描述对象。下面我们来看例子：
<script>
"use strict"
// 若干个键值对构建对线
// JavaScript中所有的键都是字符串，值是任意对象
/*
var 对象名 = {
属性名: 属性值，
属性名: 属性值，
属性名: 属性值
}
*/
// 若干个属性用逗号隔开，最后一个属性不加逗号
let person = {
name: "woodwhale",
age: "18",
email: "1966890773@qq.com"
}
// 给对象赋值
person.age = "19";
// 使用一个不存在的对象属性不会报错，只会返回undefined
console.log(person.n);
// 动态的的删减属性， 通过delete删除对象的属性
delete person.name;
// 动态的添加——直接赋值就行了
person.new = "new";
// 判断属性值是否在这个对象中 xxx in xxx
"age" in person;
// 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty("toString");
person.hasOwnProperty("age");
</script>
4.流程控制
js中的流程控制说白了其实和其他语言的一样,下面举一些例子来引入吧
<script>
"use strict"
// 简单的if else语句 和 Java 一样
let age = 3;
if (age > 3) {
alert("true");
} else {
alert("false");
}
// 循环语句 和 Java 一致
while (age < 100) {
age += 1;
}
console.log(age);
for (let i = 0; i < 100; i++) {
console.log(i);
}
let arr = [12,123,4,24,43,4,324,234,3,34,2];
arr.forEach(function (value){
console.log((value));
})
/*
java 中的foreach循环
for(Tyep str : el){}
js中是
for (let index in object){} index是下标
for （let x of object）{}
*/
for (let num in arr) {
if (arr.hasOwnProperty(num)){
console.log("存在");
console.log(arr[num]);
}
}
// 遍历arr
for (let num of arr) {
console.log(num);
}
</script>
5.map和set
js中的map和set功能和java中的set、map是一样的，但是写法并不相同。我们直接看：
<script>
"use strict"
// ES6新特性
let map = new Map([['tom',100],['jack',90],['woodwhale',100]]);
let name = map.get('woodwhale'); // 通过key获得value
map.set('admin',123456); // 添加
// 遍历map
for (let mapElement of map) {
console.log(mapElement);
}
let set = new Set([3,1,2,3,1,1,2,1,1]); // set可以去重
set.delete(1); // set中删除
set.add(2); // set中添加
let flag = set.has(3); // 是否包含 返回true、false
console.log(flag);
// 遍历set
for (let setElement of set) {
console.log(setElement);
}
class03
1.定义函数
由于js没有特定的类型，所以函数返回的都是let\var，并且函数统一用function来新建
<script>
// 如果没有执行return，函数也会返回结果，undefined
// 定义一个绝对值函数
function abs(x) {
// 手动抛出异常
if (typeof x !== 'number') {
throw 'not a number';
}
if (x >= 0) {
return x;
}else {
return -x;
}
}
// 调用函数
// JavaScript可以传任意个参数，也可以不传参数
let num = abs(10);
let num2 = abs();
</script>
2.函数参数
js的函数参数可以是多个，使用方法和Java一样，但是js有两种特殊的传参方式，分别是arguments和rest，具体方法如下
<script>
// arguments可以将传递进来的所有参数转化为一个数组
function f(x) {
for (let argument of arguments) {
console.log(argument);
}
}
// rest获取除了已经定义的参数之外的其他多余参数，必须加载最后，用三个.描述
function f2(a,b,...rest){
console.log("a->"+a);
console.log("b->"+b);
console.log(rest);
}
</script>
3.变量作用域
js的函数变量域和Java略有不同，我们通过下面几个例子来看看！
function x() {
let x = 1;
x += 1;
}
// 函数中的x是不能脱离函数存在的
//如果 x += 2; 写在外面 会报错
// 内部函数可以访问外部函数的成员
function x2() {
let x = 1;
function x3() {
let y = x +1;
}
console.log(y);
}
// 如果内部函数的成员名和外部函数成员名相同，那么内部函数会屏蔽外部函数成员
function x4() {
let x = 1;
function x3() {
let x = x +1;
console.log(x);
}
console.log(x);
}
// window包含所有全局变量
var str = 'str';
alert(str);
alert(window.str);
// JavaScript只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数
//作用范围内找到，就会向外查找，如果在全局作用域都没有找到，或报错 “Refrence”\
var old = window.alert;
window.alert = function () {
}
old(str); // 会执行
window.alert(str); // 不会执行
window.alert = old; // 改回来
// 规范
// 由于我们所有的全局变量会绑定到我们的windows上，如果不同的js文件，使用了相同的全局变量，那么会产生冲突
// 把自己的代码全部放入自己定义的唯一空间名字中，降低全局变量名冲突的问题
var woodwhale = {};
woodwhale.name = "wyh";
woodwhale.add = function ( a, b) {
return a + b;
}
// 局部作用域let
function For() {
for(var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i); // 发现这条语句也会被执行
}
// 为了解决上述的问题,引出let关键字 (ES6特性),建议使用let去定义局部作用域的变量
// 常量const (类似于java的final)
const PI = '3.14';
console.log(PI);
4.方法
js作为面向对象语言，方法的创建思想和Java一样，只不过写法不同而已，具体的两种写法如下：
<script>
// 方法的定义、调用
// 在woodwhale这个类中设置age方法
let woodwhale = {
name: 'wyh',
birth: 2002,
age : function () {
return new Date().getFullYear() - this.birth;
}
}
// 直接调用woodwhale中的age（）方法
console.log(woodwhale.age());
// 等价于如下
function getAge() {
return new Date().getFullYear() - this.birth; // 这里的this如果不适用wooodwhale1.getAge(),默认使用windows.getAge()
}
let woodwhale1 = {
name: 'wyh',
birth: 2002,
age : getAge()
}
// apply 可以将this指针指向指定的对象
// apply(对象名，[传参]）
console.log(getAge.apply(woodwhale1,[]));
</script>
5.内部对象
所谓内部对象,其实就是js内部自带的对象，这些可以去js官网查阅
<script>
// typeof 可以显示对象
typeof 123;
typeof true;
typeof '123';
typeof Math.abs();
// 1、Date
let now = new Date();
now.getFullYear(); // 年
now.getMonth(); // 月 0-11 分别代表1-12月
now.getDate(); // 日期
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 时间戳 （全世界统一标准） 1970.1.1 0：00：00 到现在的毫秒数
now.toLocaleDateString(); // 获取本地时间，String类型
</script>
6.JSON
所谓JSON其实是一种轻量级的数据交换格式。JSON存储类型可以将对象存储，我们也可以将JSON转化为对象。
<script>
// JSON存储类型，可以将对象存储
let woodwhale = {
name: 'wyh',
age: 18,
sex: '男'
}
// 将对象转化为JSON格式
console.log(JSON.stringify(woodwhale));
// 输出：{"name":"wyh","age":18,"sex":"男"}
// JSON格式 （字符串）
// 对象用{} 数组用[] 所有的键值对用key：value
// 将JSON格式转化为对象
let obj = JSON.parse('{"name":"wyh","age":18,"sex":"男"}');
console.log(obj);
/*
打印出如下
Objectage: name: "wyh"sex: "男"__proto__: Object
*/
</script>
class04
1.面向对象
js作为面向对象语言，必然是有面向对象的思想的。这里我们学习__proto__，这个指的就是一个对象的“原型”。下面我们来看例子
<script>
// 类：模板
// 对象：具体的实例
// 在JavaScript这个需要
let Student = {
name: 'woodwhale',
age: 18,
run:function (){
console.log(this.name + "run...");
}
};
let xiaoming = {
name: 'xiaoming';
};
// xiaoming 的 “原型” 是 Student
xiaoming.__proto__ = Student;
console.log(xiaoming.run);
let Bird = {
fly:function () {
console.log((this.name + 'fly...'))
}
};
// 重新将xiaoming 的 “原型” 定义为 Bird
xiaoming.__proto__ = Bird;
console.log(xiaoming.fly);
</script>
2.class继承
在ES6的新特性中，js多出了class关键字，即Java中的“类”，也有了extends关键字，即Java中的“继承”，我们来看具体的例子：
<script>
// ES6之前的对象
function student(name) {
this.name = name;
}
// 给Student新增一个方法
student().prototype.hello = function () {
alert('Hello');
}
// class继承 ES6新特性
// 直接定义一个学生的类
class Student {
// 构造器
constructor(name) {
this.name = name;
}
hello() {
alert('hello');
}
}
// 继承父类
class xiaoStudent extends Student {
constructor(name,garde) {
super(name);
this.garde = garde;
}
myGrade() {
alert("I am studnet!");
}
}
let xiaoming = new Student('xiaoming');
let xiaohong = new xiaoStudent('xiaohong');
xiaoming.hello();
xiaohong.myGrade();
</script>
class05
1.操作BOM
BOM即浏览器对象模型，我们可以通过js来操作BOM
<script>
// JavaScript和浏览器的关系？
// JavaScript诞生就是为了能够让他在浏览器中运行
// 浏览器主流内核：IE、chrome、safari、Firefox
// BOM：浏览器对象模型
// window
// 代表浏览器窗口
window.alert(1);
window.innerHeight; // 查看浏览器当前尺寸
window.innerWidth;
window.outerHeight;
window.outerWidth;
// navigator
// 封装了浏览器的信息
// 大多数时候，我们不会使用navigator对象，因为会被认为修改
// 不建议使用这些属性来判断和编写代码
navigator.appVersion; // 浏览器版本等信息
navigator.userAgent;
navigator.platform;
// screen
screen.height; // 电脑尺寸
screen.width;
// location
// 代表当前页面的url信息
location.reload(); // 刷新
location.assign("https://www.bilibili.com"); // 设置新的地址
// document
// 代表当前的页面，html dom文档树
document.title = "woodwhale"; // 改变当前页面titl
let app = document.getElementById('app'); // 获取 id 为 app 的html，转为对象
document.cookie; // 获取cookie
// history
// 代表浏览器的历史记录
history.back(); // 返回
history.forward(); // 前进
</script>
2.操作DOM
DOM即文档对象模型，我们操作DOM的核心就是对浏览器网页进行“增删改查”的功能。在我们操作一个DOM节点之前，js必须先获得这个DOM节点。
<script>
// DOM：文档对象模型
// 核心：
// 浏览器网页就是一个DOM树形结构
// 更新：更新DOM节点
// 遍历：遍历DOM节点
// 删除：删除DOM节点
// 添加：添加一个新的节点
// 要操作一个DOM节点，就必须先获得这个DOM节点
// 获取节点
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
// 获取父节点下的所有子节点
let children = father.children;
// 更新节点
let id1 = document.getElementById('id1'); // 先获取DOM节点
id1.innerText = 'new p1'; // 修改文本
id1.innerHTML = '<strong> new new p1</strong>'; // 修改HTML
id1.style.color = 'red'; // css方式改变颜色
id1.style.fontSize = '200px'; // css方式改变字体大小（驼峰命名）
// 删除节点
// 删除节点的步骤：找到自己的父节点，调用父节点的方法来删除自己 （不能自杀，通过父节点这个中介来删除）
let Father = p1.parentElement;
Father.removeChild(p1); // 移除p1
Father.removeChild(father.children[0]); // 移除第一孩子
// 删除是动态的，0孩子删除完，1孩子会到0孩子位置上
// 插入节点
// 我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了
// 到那时这个DOM节点已经存在元素了，就不能按上述方法操作
// 我们通过追加的方式完成 “插入节点” 的操作
let js = document.getElementById('js');
let list = document.getElementById('list');
list.appendChild(js); // 将js追加到list子项
// 通过js创建一个新的节点
let newP = document.createElement('p'); // 创建一个p标签
newP.id = 'newp';
newP.innerText = 'hello!';
list.appendChild(newP);
// 创建一个标签节点
let myScript = document.createElement('script');
// 通过setAttribute修改任意属性
myScript.setAttribute('type','test/javascript');
myScript.innerText = '12345';
list.appendChild(myScript);
// 创建一个空的style标签
let myStyle = document.createElement('style');
myStyle.setAttribute('type','test/css');
myStyle.innerHTML = 'body{background-color: aqua;}'; // 设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
let ee = document.getElementById('ee');
let js2 = document.getElementById('js');
let list2 = document.getElementById('list');
// 要包含的节点.insertBefore（newNode，targetNode）
list2.insertBefore(js2,ee);
</script>
3.提交表单
表单我们在HTML中就学习过了。文本框、下拉框、单选框、多选框、隐藏域、密码框等等等等都是表单的内容。表单的目的就是提交信息，而我们js可以通过代码提交表单信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
表单是什么？ from DOM树
文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
....
*/
/*
表单的目的：提交信息
1、获得要提交的信息
-->
<body>
<form action="#" method="post">
<p>
<span>用户名：</span>
<input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy"> 男
<input type="radio" name="sex" value="women" id="girl"> 女
</p>
<input type="submit">
</form>
</body>
<script>
let username = document.getElementById('username');
// 修改输入框的值
username.value = 'woodwhale';
// 得到输入框的值
console.log(username.value);
let boy = document.getElementById('boy');
let girl = document.getElementById('girl');
// 查看返回的结果是否为ture,true表示被选中
console.log(boy.checked);
console.log(girl.checked);
boy.checked = true;
</script>
</html>
页面效果如下:
4.提交表单
我们提交表单时，可以通过js代码来获取提交表单时的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--onsubmit 提交表单时触发-->
<form action="#" method="post" onsubmit="submit()">
<p>
<span>用户名：</span>
<input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span>
<input type="password" id="password">
</p>
<!--绑定事件 onclick 被点击触发-->
<input type="submit">
</form>
</body>
<script>
function submit() {
let uname = document.getElementById('username');
let pwd = document.getElementById('password');
}
</script>
</html>
class06
1.jQuery
jQuery的概念介绍:
其实jQuery就是一个外部框架,类似于Java和python的外部包一样。
我们首先去官网下载jQuery。下载地址
下载完了之后放入lib目录，之后可以直接引用。
之后使用这样就可以了，lib是我自己放的目录。
<script src="lib/jQuery.js"></script>
我们先学习jQuery的基本语法：
<script>
// jQuery语法
// $(selector).action()
// 选择器就是css的选择器
$('#test-jQuery').click(function (){
alert("hello,jQuery")
})
</script>
2.选择器
jQuery的选择器包含了css的多种选择器，但不止这些。更多的可以去网站上找。
<script>
// 原生js，选择器少，麻烦不好记
// 标签选择器
document.getElementsByTagName();
// id选择器
document.getElementById();
// 类选择器
document.getElementsByClassName();
// jQuery实现选择器（更多去网上找）
$('p').click() // 标签选择器
$('#id1').click() // id选择器
$('.class1').click() // 类选择器
</script>
3.事件
这里我们用鼠标事件举例 用jQuery的 mousemove方法来实现鼠标坐标的实时显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jQuery.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--获取鼠标的移动轨迹-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
// 当网页元素加载完毕之后才能响应事件
$(document).ready(function () {
})
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
})
})
</script>
</body>
</html>
效果如下：
4.jQuery操作DOM元素
jQuery也可以操作DOM元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jQuery.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">javascript</li>
<li name="python">python</li>
</ul>
<script>
// 节点文本操作
$('#test-ul li[name=python]').text(); // 获取值
$('#test-ul li[name=python]').text('new_python'); // 设置值
// $('#test-ul').html(); // 获取值
// $('#test-ul').html('<strong>new</strong>'); // 设置值
// css的操作
$('#test-ul li[name=python]').css('color', 'red');
// 元素的显示和隐藏 ： 本质 display：none
$('#test-ul li[name=python]').hide(); // 元素隐藏
$('#test-ul li[name=python]').show(); // 元素显示
</script>
</body>
</html>
效果如下：
后话
到这里JavaScript的初步学习就告一段落了，至此前端三剑客HTML、CSS、JavaScript都学习完了。想要深入学习原生js，可以参考网站菜鸟教程、W3school。想要深入学习jQuery，可以参考网站jQuery API。
此外，推荐JavaScript学习视频【狂神说Java】JavaScript最新教程通俗易懂
如果本文有任何问题和错误，欢迎在评论区指出。
thanks for reading :: enf of this article :: Read other posts