JavaScript基础速成

最新推荐文章于 2024-05-30 11:27:58 发布

洒水水儿

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量671

点赞数 13

分类专栏：前端速成文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/cangshanjiang/article/details/136050622

版权

前端速成专栏收录该内容

4 篇文章 0 订阅

订阅专栏

由于学web时只学了后端，现在到了前后端联调的场景发现看不懂前端代码，于是开始恶补

看了下基础内容发现html和css比较好看懂，但JavaScript比较迷，大概知道组件id绑定事件

下面选取看菜鸟教程补充的JS知识

JS的作用

JS是在html搭建好骨架，css设计好样式的基础上添加交互性和其他动态功能。

下面是基本案例，可以看到JS定义函数绑定了html写的一个按钮，让这个按钮可以动态显示日期

<!DOCTYPE html>
<html>
<title>基础教程(cainiaojc.com)</title>
<body>

<h1>第一个javascript示例入门</h1>

<button type="button" onclick="showDate()">点我显示日期和时间</button>

<p id="output"></p>

<script>
function showDate() {
    document.getElementById("output").innerHTML = new Date();
}
</script>

</body>
</html>

具体而言，JS可以实现以下功能：

JavaScript可以更改HTML属性
JavaScript可以隐藏和显示HTML元素
JavaScript可以添加和删除HTML元素
JavaScript可以更改元素的样式（CSS）和位置
JavaScript可以修改文本内容
JavaScript可以监视鼠标单击，悬停等事件并对其做出反应
JavaScript可以创建警告弹出窗口，以向用户显示信息或警告消息
JavaScript可以在将用户输入提交到服务器之前对其进行验证

JS用法

（传统）可以在<script>标记之间插入JavaScript代码
（简单的JS代码）使用事件属性（例如onclick，onkeypress等）将JavaScript代码直接放在HTML标记内
（复杂的JS代码）创建一个外部JavaScript文件，然后通过

输出

经典Hello World 写入浏览器控制台使用 console.log()

<script>
console.log("Hello World")
</script>

写入HTML元素使用 innerHTML
写入文档流使用 document.write()
弹出警告框，使用 window.alert()

基本语法

变量

可以使用let（对于块级变量），var（对于函数级变量）或const（只读）声明变量。

仅使用var而没赋值时变量具有值undefined,表示尚未为变量分配值，或者根本没有声明变量。

var x;
x = 1;
var y = 1;

标识符

变量，函数或属性的名称在JavaScript中称为标识符，JavaScript 标识符必须以字母、下划线(_)或美元符（$）开始，后续的字符可以是字母、数字、下划线或美元符。

所有JavaScript标识符均区分大小写，标识符的约定是使用camelCase(驼峰命名)编写的。

注释

和Java的一样，单行注释以双斜杠（//）开头，行注释以斜杠和星号（/*）开头，以星号和斜杠（*/）结束。

数据类型

好消息，JS变量定义时不用声明类型，因为会动态分配

 var length = 4;// Number 数字
 var firstName = "Vishal";  // String 字符串
 var user = {firstName:"Vishal", age:22};  // Object 对象
 var fruits = ["Apple", "Mango", "Banana"];// Array 数组

Number

JS中数字具有64位，不分整数和浮点数，但底层也和其他语言一样

toExponential()，toFixed()，toPrecision()得到对应位数的数

valueOf()得到原始数值（像Java Integer拆包）

Number()转换数字,parseInt(),parseFloat()解析数字

String

JS中单双引号都可以包字符串

+ 运算符用于拼接字符串，还可以用于长代码换行

直接定义的字符串变量是string，而使用new创建的是字符串对象，属于object。

var city = new String("New Delhi");

length,concat(),toUpperCase(),split(),trim(),replace(),substring(),charAt()和Java一样

此外还有indexOf(),lastIndexOf(),search()用于匹配。

运算符

基本都跟其他语言一样，只有几个特殊的

**=：求幂之后再赋值

===：相等且同类型

!==：不相等且不同类型

三元运算符：

var status = (age >= 18) ? "adult" : "minor";

delete运算符可删除对象，对象的属性或数组中指定索引处的元素

var user = {firstName:"Vishal", age:"22", color:"blue"};
delete user.firstName;  // returns true
var fruits = ["Apple", "Mango", "Banana"];
delete fruits[0];   // delete "Apple"

in：看在不在集合里

instanceof：看指定的对象是否属于指定的对象类型

控制流

if语句，if...else语句，else...if语句，switch语句，while循环，do while循环，for循环都跟Java完全一样。也用continue和break跳出循环。

for...in循环迭代的对象的属性，以任意的顺序

var myObj = {
name: "VISHAL",
age: 22,
height: 175,
city: "New Delhi",
getNothing: function () {return "";}
};

for (let x in myObj) {
document.write(x);
}

for...of循环迭代数据，该迭代的对象定义要遍历

let iterable = [10, 20, 30, 40, 50];

for (let x of iterable) {
document.write(x);
}

函数

function nameOfFunction(parameter1, parameter2, ..., parameterN) {
     // 要执行的代码
     return 返回值;
 }
//调用函数，返回值将存储在x中
var x = nameOfFunction(parameter1, parameter2, ..., parameterN);

还有个类似匿名函数，用变量名调用

var square = function(number) { return number * number; };

var x = square(5);

对象

像经常看到的JSON，里面还可以定义函数

 var user = {
  firstName: "Vishal",
  lastName : "Choudhary",
  age  : 22,
  location : "New Delhi",
  getName  : function() {
   return this.firstName + " " + this.lastName;
  }
  };

可以用.和数组索引来访问对象属性

user.firstName;
user["firstName"];

访问对象方法也和Java一样

user.getName();

当使用关键字声明JavaScript变量时new，该变量将作为对象创建：

var a = new Number();  // 将a声明为Number对象
var b = new String();  // 将b声明为String对象
var c = new Boolean();   // 将c声明为Boolean对象

数组

也和Java一致，再添加元素事如果能刚好接上下一个可以为下一个索引分配值，不确定就用push

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";

其他的pop(),shift(),concat(),slice(),fill(),sort(),reverse()也可以望文生义

forEach()方法对数组的每个元素执行一次提供的函数，也和Java很像

var fruits = ["Apple", "Mango", "Banana", "Orange"];
var result = document.getElementById("result");

fruits.forEach(function(element, index, array) {
    result.innerHTML += index + ": " + element + "<br>";
});

map()方法返回一个新数组，不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素

var nums1 = [1, 5, 20, 14, 55, 16];
var nums2 = nums1.map(twice);

function twice(element, index, array) {
   return (element * 2);
}

filter(),find(),every()同理

事件

事件是在浏览器中发生的操作，可由用户或浏览器本身启动

页面加载完成
用户单击一个按钮
用户滚动文档
用户调整浏览器大小
用户移动鼠标
用户提交表单
用户按下键盘上的一个键
HTML输入字段已更改

使用方法为：

内联事件处理程序（html上）

<p onclick="this.innerHTML = 'Hello world'">单击此处更改此文本</p>

事件处理程序属性

let para = document.querySelector("#para");

para.onclick = function() {
   this.innerHTML = "Hello world";
}

事件监听器

let para = document.querySelector("#para");
para.addEventListener("click", changeText);

function changeText() {
   para.innerHTML = "Hello world";
}

洒水水儿

关注

13
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础速成

由于学web时只学了后端，现在到了前后端联调的场景发现看不懂前端代码，于是开始恶补看了下基础内容发现html和css比较好看懂，但JavaScript比较迷，大概知道组件id绑定事件下面选取看菜鸟教程补充的JS知识。
复制链接

扫一扫