JavaScript入门

简介: JavaScript入门

1.在html中“<script></script>”必须成对出现不能自闭合,否则代码无法生效.

2.在JavaScript中== 等于(类型不一样,值一样也会返回true);=== 绝对等于(类型一样,值一样结果为true);

3.NaN===NaN 返回false与所有的数值都不相等包括自己

4.尽量避免浮点数进行运算,存在精度问题

5.null空,undefined未定义

6.var arr=[1,2,3,4,'hello',null,true];定义数组可以储存不同类型的值,new array(1,2,3,'hello');也可以实现,但是为了保证代码可读性建议使用前者

7.对象是大括号,数组是中括号

var person={
name:"peng",
age:3,
sex:"男"}
/*通过以下方式可以取值*/
console.log(person.name)
console.log(person.age)
console.log(person.sex)


8.前提是IDEA支持ES6,"use strict"严格检查模式,预防JavaScript的随意性出错,而且必须写在第一行

9.模板字符串

==`==这个点是Tab上面那个

let name ="penggege";
let age = 3;
let msg=`你好,${name}`;
/*可以通过这种方式进行拼接*/


10.JavaScript字符串有不可变性,大小写转换,是个方法不是属性

student.toUpperCase()转换为大写

student.toLowerCase()转换为小写

11.substring[num,num);与slice()效果一样包含第一个不包含第二个

12.数组长度arr.length可以赋值,但是多出来的位置未定义undefined

13.push()向数字内增加元素压入到尾部,pop()从尾部向外弹元素(删除元素)

14.unshift()压入到头部shift()弹出头部的元素

15.排序arr.sort() 反转arr.reverse()

16.concat()拼接数组,原数组不会改变会生成一个新的数组

17. 连接字符join打印数组使用特定字符拼接

["A","B","C"]
arr.join('-')
"A-B-C"


18.多维数组与Java相同

19.动态增删属性,通过delete删除对象的属性

delete person.name

动态添加直接赋予即可

person.haha=“haha”

20.hasOwnProperty()判断属性值是否是自身拥有属性

21.for循环与Java一致,forEach遍历输出需要借助函数

arr.forEach(function(value){console.log(value)})

22.Map与Java一样都是以键值对的方式存值

var  map=new Map([['tom',10],['jack',100],['ok',1000]])
map.set(['admin',123])//向map内添加值


23.Set无序不重复集合

24.arguments:是一个关键字,代表传递进函数的所有参数形成一个数组这个数组就是arguments

function T(x){
for(var i=0;i<arguments.length;i++){
console.log(arguments[i])
}
}
T(1,2,3,4,5,6,7,8,9);
//可以遍历出所有传进来的参数,但是由于第一个参数也存在arguments中所以数字要从1开始也就是第二个下标开始


25.ES6新引入rest可以直接接受后面的参数必须用...标志识

   

function abs(x,...rest) {
         console.log(rest)
        }

image.png


26.内部函数可以访问外部函数成员变量,但是外部函数无法访问内部函数成员变量

27.JavaScript中函数找查变量从自身开始由”内“向”外“找查,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量.

28.时间戳转化为标准时间console.log( new Date(1651737066639))


image.png


时间戳转化为本地时间console.log( new Date(1651737066639).toLocaleString())


image.png


29.对象转化为json字符串,json字符串转化为对象

var user={name:"peng",age:3,sex:'男'}
//对象转化为json字符串{"name":"peng","age":20,"sex":"男"}
var jsonUser=JSON.string(user);
//json转化为对象{name:"peng",age:20,sex:'男'}
var obj=JSON.parse('{"name":"peng","age":20,"sex":"男"}')


30.location代表当前页面的URL信息

location.assign("URL")//转向这个url

image.png


32. 获得Dom节点

var h1=document.getElementsByTagName('h1');//设置name属性
var p1=document.getElementsById('p1');//设置id属性
var p2=document.getElementsByClassName('p2');//设置class属性
var father=document.getElementsById('father');
//father.firstChild
//father.lastChild


33.表单判断用户名是否为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return login()"style="text-align: center">
   <p><input type="text" name="username" id="username"></p>
    <p> <input type="password" name="password" id="password"></p>
    <button type="submit">提交</button>
</form>
</body>
<script>
    function login() {
        let name=document.getElementById("username").value;
        let password=document.getElementById("password").value;
        if(name!=""&&password!=""){
            return true
        }else {
            alert("用户名密码不能为空")
            return false
        }
    }
</script>
</html>


34.jQuery选择器


①可使用CDN引入: https://www.jq22.com/cdn/进去直接复制JavaScript标签引入

②去官网下载 https://jquery.com/download/直接下载js文件引入

初识公式:${selector}.action()

工具站不会可查https://jquery.cuishifeng.cn/

其中selector为选择器例如


image.png

<button id="btn" type="submit"></bitton>
$('#btn').click(function(){alert('hello')})
相关文章
|
1月前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
24 1
|
3月前
|
JSON JavaScript 前端开发
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
47 0
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)(上)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
29 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
3月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
35 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(上)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
42 0
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)(下)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
26 0
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
65 1