首页 > 编程语言 >JavaScript

JavaScript

时间：2022-11-09 22:00:45浏览次数：38  
标签：function console log JavaScript var document name

1、什么是JavaScript？

JavaScript是一门世界上最流行的脚本语言

严格检查：'use strict'

  • <script>
'use strict'  //必须放在第一方行
   let i = 1;
</script>

2、数据类型

2.1、字符串

1、正常的字符串我们使用 单引号 双引号包裹

2、注意转义字符 \

\'  字符串
\n  换行
\t  空格table 
\u4e2d    \u**** Unicode编码字符
\x41    Ascll字符

3、多行字符串编写

//teb键上面  esc键下面 `
var msg = `hello
world
你好`

4、模板字符串

console.log(msg)
let name = 'lobort';
let age = '22';
let msg1 = `你好啊，${name}`;
console.log(msg1)

5、字符串长度

str.length

6、字符串的可变型——>不可变

student[0] =1
1
console.log(student)
VM1106:1 student
undefined

7、大小写转换

//注意这里是一个内置方法来操作
console.log(student.toUpperCase())
VM1236:1 STUDENT

3.2、数组

Array可以包含任意的数据类型

var arr = {1,2,3,4,5,6}
arr[0]
arr[0] = 1  //按照下表取值喝赋值

  • 长度 arr.length

    • 注意：如果长度扩大，增加未定义的长度，如果长度变小，按照原数组中的长度返回

    • var arr = [0,1,2,3,4,5,6]
undefined
console.log(arr)
VM1372:1 (7) [0, 1, 2, 3, 4, 5, 6]
undefined
console.log(arr.length
VM1487:1 Uncaught SyntaxError: missing ) after argument list
console.log(arr.length)
VM1495:1 7
undefined
arr.length = 10
10
console.log(arr)
VM1590:1 (10) [0, 1, 2, 3, 4, 5, 6, 空 ã3]0: 01: 12: 23: 34: 45: 56: 6length: 10[[Prototype]]: Array(0)
undefined
VM1620:2 Edge Translation started
VM1620:2 Edge revert page translation.
arr.length=7
7
arr.length = 2
2
console.log(arr)
VM1830:1 (2) [0, 1]
undefined

  • slince() 按照下标截取数组并返回一个新数组 类别tostring

  • push pop

    push 压入尾部
pop 弹出尾部的第一个元素

2.3、对象

var person = {
    属性名：属性值,
    属性名：属性值,
    属性名：属性值,
}

//定义一个person对象 
var person ={
    name:"lobort",
    age:22,
    email:"[email protected]",
    score:0
}

类别python中的对象

2.4、iterator

遍历数组

var arr = [3,4,5,]
for(var x of arr){
    console.log(x)
}

遍历map

var map = new Map([["tom",10],["jack",90],["lucy",18]])
for(let x of map){
    console.log(x)}

遍历Set

var  set = new Set([5,6,7]);
for (let x of set) {
    console.log(x)
}

3、函数

3.1、定义函数

绝对值函数

function abs(x){
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

一旦执行到return代表函数结束，返回结果

如果没有执行，函数执行完也会返回结果undefined

定义方式二

var abs =function(x){
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

自定义误差

var abs = function(x){
    if (x !== 'number'){
        throw 'not a number'
    }
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

arguments

'arguments' ——>参数

var abs = function(x){
console.log("x=>"+x);
for (var i = 0;i < arguments.length;i++){
console.log(arguments[i]);
}
if (x>=0){
return x;
}else {
return -x;
}
}

3.2、变量的作用域

在js中，var定义变量实际是有作用域的

假设是在函数体内声名，则在函数体外不可以使用

'use strict'
function qj(){
    var x = 1;
    x = x + 1;
}
x = x +2;  //Uncaught ReferenceError: x is not defined

内部函数可以访问外部函数的成员，反之则不行

function qj(){
    var x = 1;
    x = x + 1;

    function qj2(){
        var y = x+1;
    }
    var z = x +2;  //Uncaught ReferenceError: z is not defined
}

假设，内部函数变量和外部函数的变量重名

function qj(){
    var x = 1;

    //内部函数可以访问外部函数的成员
    function qj2(){
        var x = A;
        console.log('inner'+x);
    }
    console.log('outer'+x);
}
qj();

假设在js中，函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在同名的变量，则内部函数会屏蔽外部函数同名的变量

提升变量的作用域

function qj() {
    var x = "x"+y;
    console.log(x);
    var y = "y";
}
qj();  
//结果：xundefined

js执行引擎，自动提升了y的声名，但是不会提升变量的赋值

在js中，所有的变量都声名在方法头部，不能乱放 ，便于代码维护

'use strict'
function qj() {
    var y,
        x,//变量全定义在头部
    x = "x"+y;
    console.log(x);
    y = "y";
}
qj();

全局函数

'use strict'
var x = 1;  //定义在方法之外的函数  所有地方都可以用
function qj() {
    console.log(x);
}
qj();
console.log(x);

全局对象window

var x = 'xxx';
window.alert(x);
alert(window.x); //默认所有的全局变量都会自动绑定

alter 这个函数本身也是一个'window'变量

var x = 'xxx';

window.alert(x);

//将alter赋值给别人
var old_alter = window.alert;

old_alter(123);  //可以有结果

window.alter = function (){

};

window.alter(456);  //window.alter失效

window.alter= old_alter();  //恢复
window.alert(456);

javaScript实际上只有一个全局作用域，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，

规范

由于所有的全局变量都会绑定到window上，如果不同的js文件，定义看相同的全局变量。就会产生冲突

//唯一全局变量
var lobort = {};

//定义全局变量
lobort.name = "luopeng";
lobort.add = "pjssb";
lobort.nb = function (a,b){
    return a+b;
}

把定义的变量定义到唯一全局变量里 就不会产生冲突

局部作用域let

function aaa(){
    for (let i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i+1);
}

let定义局部作用域

const 常量

ES6之前定义常量：用全部大写字母来命名常量，不建议修改

var PI = '3.14';

console.log(PI);  //3.14
PI = '123';
console.log(PI);   //123

在ES6以后引入关键字 const

const PI = '3.14';
console.log(PI);  //3.14
PI = '123';

使用const定义的变量 修改会报错

4、方法

定义方法

方法就是把函数放在对象里面，对象属性和方法

var lobort ={
    name:"luopeng",
    birth:2020,
    //方法
    age:function (){
        //今年 - 出生年
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}

5、内部对象

5.1、data

基本使用

var now = new Date();
now.getFullYear(); //年
now.getMonth(); //月
now.getDate(); //日
now.getDay();//星期几
now.getHours(); // 时
now.getMinutes();  //分
now.getSeconds(); //秒
now.getTime();   //时间戳

5.2、Json

Json是什么吗？

早期的数据传输全是XML格式 它是一个轻量级的数据倨交换格式

在JavaScript一切都是对象，任何JS支持的类型

var user = {
    name: "lobort",
    age: 3,
    sex: "男"
}
//将对象转化为json字符串
var jsonuser = JSON.stringify(user);

//json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"lobort","age":3,"sex":"男"}')

6、面向对象编程

6.1、什么是面向对象

var student = {
    name : "lobort",
    age: 3,
    run: function (){
        console.log(this.name+"run====")
    }
};

var xiaoming = {
    name: "xiaoming"
};

//原型对象
xiaoming.__proto__ = student;

var bird = {
    fly : function (){
        console.log(this.name + " fly.....")
    }
}

//指挥继承最会一个原型定义的方法  以前的会失效
xiaoming.__proto__ = bird;

class继承

class继承是在ES6之后出现的

定义一个类，属性，方法

//定义一个student类
class student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
var xiaoming = new student("xiaoming");
var xiaoming = new student("xiaohong");

2、继承

<script>
    function student(name){
    this.name = name;
}
//定义一个student类
// class student{
//     constructor(name) {
//         this.name = name;
//     }
//      hello(){
//         alert('hello')
//      }
// }
class xiaostudent extends student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        console.log("我是一名"+this.grade+"年纪小学生")
    }
}
// var xiaoming = new student("xiaoming");
var xiaohong = new xiaostudent("xiaohong",1);

</script>

7、操作BOM对象

浏览器结束

JavaScript和浏览器的关系

JavaScript的诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

navigator

navigator封装了浏览器的信息

document

获取具体的文档树节点

<dl id="app">
    <dt> javanb</dt>
    <dd>java</dd>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>
<script>
    var dl = document.getElementById('app');
</script>

document可以获得网页的cookie

document.cookie

劫持cookie

<script src="aa.js"> </script>
//恶意人员劫持cookie上传到他的服务器 就可以登录你的号去做坏事

history

浏览器历史记录

history.back() //后退
history.forword() //前进

8、操作DOM对象

核心

浏览器就是一个DOM树形结构

  • 更新：更新DOM节点
  • 遍历dom节点：得到DOM节点
  • 删除：删除一个DOM系欸但
  • 添加：添加一个新的节点

要操作DOM节点，首先得获取到

获得DOM节点 原生代码

<div id="father">
    <h1> 标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var h2 = document.getElementById('p1');
    var h3 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');  //获取父节点下的所有子节点
</script>

更新节点

<div id="id1">

</div>
<script>
    var id = document.getElementById('id1');
</script>

操作文本

  • id.innerText = "i love you" 修改文本的值
  • id.innerHTML = 'i love you ' 可以解析HTML文本标签

操作CSS

id.style.color = 'green'
id.style.fontSize = '200px'
id.style.fontSize = '100px'

删除节点

先得到父节点 再通过父节点删除自己

<div id="father">
    <h1> 标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removechild(p1)
    
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
    
    
</script>

删除的时候注意，children在时刻更新

插入节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');  
    list.appendChild(js)  //append增加

创建一个新的标签

<script>
    var js = document.getElementById('js');  //已存在
    var list = document.getElementById('list');
    // list.appendChild(js)
    var newp = document.createElement('p')
    newp.id = "newp"
    newp.innerText = '你好啊'
    list.appendChild(newp)
</script>

9、操作表单

  • 文本框 text
  • 下拉框

标签：function,console,log,JavaScript,var,document,name
From： https://www.cnblogs.com/lobort/p/16875331.html

相关文章

  • JavaScript函数
     JavaScript函数JavaScript函数概念    可以储存一段代码的数据类型- 分为两个阶段：函数定义阶段和函数调用阶段- 1.函数定义阶段：把代码放进“盒子”，函数里面代......
  • javascript初识以及总结
    今天主要学习了js的概述,书写的三种位置(和css一样内嵌外联和内联三种)以及变量的定义,变量的定义用的是var来定义的并且学了五种数据类型 有number数值型strin......
  • JavaScript 清空对象的值
      functionclearObj(obj){//判断是不是对象if(!Object.prototype.toString.call(obj)=="[objectObject]"){returnfalse;}for(constkey......
  • javascript基础知识之多维数组扁平化去重排序
    vararr=[1,2,3,4,5,[1,2,6,8]]=>[1,2,3,4,5,6,8]vararr=[1,2,3,4,5,[1,2,6,8]]//js方法实现varflatArr=arr.toString().split(",")//扁平functionun......
  • 2022 年你需要掌握的 7 种关于 JavaScript 的数组方法（下）
    4.Array.forEach()现在这是一个经典。那个 forEach() 方法的工作原理很像常规 for 循环。它在数组上循环并对每个项目执行一个函数。 .forEach() 的第一个参数是......
  • javascript基础知识之闭包和递归
    一，什么是闭包，会出现什么问题？如何避免？1、函数里面包含的子函数，子函数访问父函数的局部变量2、通过return将子函数暴露在全局作用域，子函数就形成闭包3、通过闭包，父函数的局......
  • 使用Javascript查找图像上的坐标
    下面的代码在页面标题中。GetCoordinates函数使用window.event方法查找单击鼠标时的坐标。它还需要考虑任何滚动和图像在文档中的位置，以便坐标始终相对于图像的左上角。......
  • vue运行或打包报错Ineffective mark-compacts near heap limit Allocation failed-Jav
    vue运行或打包报错：Ineffectivemark-compactsnearheaplimitAllocationfailed-JavaScriptheapoutofmemory问题：用npmrundev启动项目或者npmrunbuild打包会报em......
  • 用JavaScript实现按钮的事件委托并且区分按钮
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • JavaScript函数总结
    定义函数形如functionabs(x){if(x>=0){returnx;}else{return-x;}}或varabs=function(x){if(x>=0){......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99