有没有专门招代理的网站,湖北专升本网站建设,怎么创建网站与网页,做信息图网站由于学web时只学了后端#xff0c;现在到了前后端联调的场景发现看不懂前端代码#xff0c;于是开始恶补
看了下基础内容发现html和css比较好看懂#xff0c;但JavaScript比较迷#xff0c;大概知道组件id绑定事件
下面选取看菜鸟教程补充的JS知识
JS的作用
JS是在html…由于学web时只学了后端现在到了前后端联调的场景发现看不懂前端代码于是开始恶补
看了下基础内容发现html和css比较好看懂但JavaScript比较迷大概知道组件id绑定事件
下面选取看菜鸟教程补充的JS知识
JS的作用
JS是在html搭建好骨架css设计好样式的基础上添加交互性和其他动态功能。
下面是基本案例可以看到JS定义函数绑定了html写的一个按钮让这个按钮可以动态显示日期
!DOCTYPE html
html
title基础教程(cainiaojc.com)/title
bodyh1第一个javascript示例入门/h1button typebutton onclickshowDate()点我显示日期和时间/buttonp idoutput/pscript
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代码使用事件属性例如onclickonkeypress等将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 onclickthis.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;
}
