首页 > 编程语言 >JavaScript小结

JavaScript小结

时间：2022-11-11 22:13:47浏览次数：74  
标签：console log JavaScript js var document 小结 name

JavaScript

1、什么是JavaScript

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

一个合格的程序员必须精通JavaScript

2、快速入门

  1. 内部标签

    <script>
    这里面写代码
</script>

  2. 外部标签

    js里面代码
alert('李永辉');
    <script src="js/lyh.js"></script>

  3. 测试代码

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- <script>
            alert('Hello Word');
        </script> -->
        <!-- 外部引入 -->
        <script src="js/lyh.js">
            
        </script>
        <!-- 不用显示定义type,也默认就是Javascript -->
        <script type="text/javascript"> 
        </script>
    </head>
    <body>
    </body>
</html>

  4. 基础语法

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //1.定义变量  变量类型  变量名
            var score=71;
            //2.条件控制
            if (score>60 && score<70) {
                alert("李永辉");
            } else if(score>70&&score<80){
                alert("李永辉");
            }
            //在浏览器的控制台打印变量System.out.print();
            //console.log(score);
        </script>
    </head>
    <body>
    </body>
</html>

3、数据类型(简单介绍)

数值，文本，图形，音频，视频......

  1. 变量

    //不能以数字开头命名var：列 var 1a=1;不规范
var a=1;

     

  2. number

    js不区分小数和整数

    123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计算法
-99 //复数
NaN   //not a number
Infinity //表现无限大

     

  3. 字符串

    ‘abv’ "avc"

  4. 布尔值

    true false

  5. 逻辑运算符

    && //两个都为真，结果为真
|| //一个为真，结果为真
!  //真即假，假即真

     

  6. 比较运算符（重要）

    =       //赋值
==      //等于（类型不一样，值一样，也会判断为true
===     //绝对等于（类型一样，值一样）

    这就是一个js的缺陷，坚持不要使用 ==比较

    • NaN===NaN,这个与所有的数值都不相等，包括自己

    • 只能通过isNaN(NaN)来判断这个数是否NaN

  7. 浮点数问题：

    尽量不要使用浮点数运算，存在精度问题

  8. null和undefined

    • null 空

    • undefined 未定义

  9. 数组

    Java的数值必须是相同类型的对象，JS中不需要这样

    var arr=[1,2,3,'ss',"456",true,null];
console.log(arr[2]);
new Array(1,12,4);

    取数组小标：如果越界了，就会

    underfined

  10. 对象

    对象是大括号，数组是中括号 

    //Person person=new Person(1,2,3);
var person={
    name: "李永辉",
    age:12,
    tags:['js','java']
}

  11. 取对象的值

    person.name

4、严格检查格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--'use strict';
        严格检查模式，预防Javascript的随意性导致产生的一些问题必须写在JavaScript的第一行 
         局部变量建议都使用let去定义-->
        <script>
            'use strict';
             i=1;
        </script>
    </head>
    <body>
    </body>
</html>

5、数据类型

5.1、字符串

  1. 正常字符串我们使用 单引号， 或者双引号包裹

  2. 注意转义字符 \

    console.log("\n");
console.log("\t");
console.log("\u4e2d");  //打印一个中字

  3. 多行字符串编写

    var msg=`hello
            word
            您好呀
            `;

  4. 模板字符串

    let name="李永辉";
let age=3;
let msg1=`您好呀，${name}`;
console.log(msg1);
//打印=您好呀，李永辉

  5. 字符串长度

    var student="student";
undefined
console.log(student.length);

  6. 字符串可变性，不可变

  7. 大小写转换

    //注意，这里的方法，不是属性；了
console.log(student.toUpperCase());
VM977:1 STUDENT
undefined
console.log(student.toLowerCase());
VM1091:1 student

  8. 查找索引值

    console.log(student.indexOf("n"));
VM1295:1 5

  9. 查询字符串中的第几个字符

    console.log(student.substring(2));//注意重第三个字符串截取到最后一个字符串
VM1402:1 udent
undefined
console.log(student.substring(2,5));
VM1420:1 ude

5.2、数组

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

var arr=[1,2,3,'ss',"456",true,null];
arr[0]

  1. 长度

    arr.length=10

    注意：加入arr.length赋值，数组大小就会发生变化，如果元素赋值过小就会数据丢失

  2. indexOf()，通过元素获得下标索引

    indexOf(2);

  3. slice() 截取Array的一部分，返回一个新数组，类似与String中的substring

  4. push() 和pop() 尾部

    push://把你添加的元素压缩到末尾这个数组中
pop://从后向前弹出一个个元素

  5. unshift()和shift() 头部

    unshift://把你添加的元素压缩头部到这个数组中
shift://从前向前弹出一个个元素

  6. 排序sort()

    arr.sort();

  7. 元素反转reverse()

    arr.reverse();

  8. 连接符join

    var arr=["a","b","c"];
arr.join('-')
'a-b-c'

  9. 多维数组

    var arr=[[1,2],[3,4],[5,6]];
arr[1][1]
//输出为4

5.3、对象

若干个键值对

var 对象名 ={
     属性名:属性值,
     属性名:属性值,
     属性名:属性值
}
//定义了一个person对象，它有三个属性
var person={
    name:"李永辉",
    age:2,
    score:0
}

js中对象，{....}表示一个对象，键值对描述属性xxxxx:xxxxxx,多属性之间使用逗号隔开，最后一个不加逗号。

JavaScript中所有的键都是字符串，值是任意对象

  1. 对象赋值 

    person.name="代雅鑫"
"代雅鑫"
person.name
"代雅鑫"

     

  2. 使用一个不存在的对象属性，不会报错

    person.haha
undefined

  3. 动态的删减属性

    delete person.name

  4. 动态的添加,直接给新的属性添加值即可

    person.haha="haha"
"haha"
person

5.4、流程控制

  1. if判断

    		var age=3;
		if(age>2){
			alert("lyh");
			console.log("lyh");
		}

  2. while循环，避免死循环

    while(age<100){
			age=age+1;
			alert("lyh");
			console.log("lyh");
		}

  3. forEach循环

    var age=[1,56,12,1,4,5];
//打印数组中值
age.forEach(function (value){
		console.log(value);
});

  4. Map和Set

    1. Map：

      var map=new Map([["tom",50],["lyh",80],["haha",90]]);
var name=map.get("tom");//可以通过key来获得value
		 map.set("李永辉","admin");
		 console.log(name);

       

    2. Set：(set集合可以去重)

      var set =new Set([1,11,1,2,3,4]);
set.add(8);
set.delete(8);
console.log(set.has(3));

  5. iterator遍历

    1. 遍历数组

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

    2. 遍历map

      var map=new Map([["tom",50],["lyh",80],["haha",90]]);
		for(let x of map){
			console.log(x);
		}

    3. 遍历set

      var set =new Set([1,11,1,2,3,4]);
for(let x of set){
	console.log(x);
}

       

6、函数

6.1、定义函数

  1. 方式一：

    绝对值函数

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

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

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

  2. 方式二：

    绝对值函数

    var abs=function(x){//匿名内部类
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

    这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数方式一等价于方式二。

  3. 调用函数

    abs(10)  //10
abs(-10) //10

    参数问题：Javascript可以传入任何参数，也可以不传参数

    参数传进来是否存在

    假设不存在参数，如果规避？

    var abs=function(x){
    //手动添加异常
    if(typeof x!=="number"){
        throw 'Not a Number';
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
}

  4. arguments

    arguments是一个js免费赠送的关键字；代表，传递进来的所有的参数，上一个数组

    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;
    }
}

    问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数

  5. rest

    function aaa(a,b,...rest) {
    console.log(a);
    console.log(b);
    console.log(rest);
}

    注意：参数只能写在最后面，必须用...rest

6.2、变量的作用域

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

  1. 假设在函数体中声明，则在函数体外可以用

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

  1. 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function ly(){
    var x=1;
    x=x+1;
}
function ly2(){
    var x="a";
    x=x+1;
}

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

function ly(){
    var x=1;
    //内部函数可以访问外部函数的成员，反之这不行
    function ly2(){
        var y=x+1;//2
    }
    var z=y+1;
}

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

  1. 提升变量的作用域

    function ly(){
    var x="x"+y;
    console.log(x);
    var y='y';
}

    结果：xundefined

    说明：JavaScript执行引擎，自动提升了y的声明，但撒不会提升变量y的赋值；

  2. 这个实在JavaScript简历之初就存在的特性，养成规范：所有的变量定义都在函数的头部，不要乱放，便于代码维护；

  3. 全局函数

    x=1;
function f(){
    console.log(x);
}
f();
console.log(x);

  4. 全局对象window

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

    alert()这个函数本身也是一个window变量；

    var x="xx";
window.alert(x);
var old_alert=window.alert;
window.alert=function(){
    
};
//发现alert()失效了
window。alert(123);
//回复
window。alert=old_alert;
window.alert(456);

    JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量）；

  5. 规范

    由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突->如果能够减少冲突？

    //唯一全局变量
var ly={};
//定义全局变量
ly.name="lyh";
ly.add=function(a,b){
    return a + b;
}

    把自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突问题

  6. 局部作用域let

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

    ES6关键字，解决局部作用域的冲突

6.3、方法

  1. 定义方法

    方法就是把函数放在对象里面，对象只有两个东西

    var liyonghui={
    name:'李永辉',
    bitrh:2000,
    //方法
    age:function () {
        //今年-出生的年
        var now=new Date().getFullYear();
        return now-this.bitrh;
    }
}
//属性
liyonghui.name
//方法，一点过要带（）
liyonghui.age()

7、内部对象

  1. 标准对象

    liyonghui.age()
22
typeof 123
'number'
typeof "123"
'string'
typeof true
'boolean'
typeof Math.abs
'function'

     

7.1、Date

  1. 基本使用

    date.getFullYear();//年
2022
date.getMonth();//月
10
date.getDate();//日
6
date.getDay();//星期几
0
date.getHours();//时
20
date.getMinutes();//分
6
date.getSeconds();//秒
36
date.getTime();//时间戳
1667736396611

  2. 时间转换（注意调用是一个方法）

    new Date(1667736396611);
Sun Nov 06 2022 20:06:36 GMT+0800 (中国标准时间)
date.toLocaleString();
'2022/11/6 20:06:36'
date.toLocaleTimeString();
'20:06:36'

7.2、JSON

  1. JSON是什么

    早期，所有数据传输习惯使用XML.文件

    • JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。

    • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

    • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

  2. 在JavaScript一切皆对象，任何js支持的类型都可以使用JSON来表示：

    格式：

    • 对象都用{}

    • 数组都用[]

    • 所有的键值对都是用key:values

    JSON字符串和JS对象的转换

    var user={
    name:"李永辉",
    age:3,
    sex : '男'
}
//JSON把对象转换成字符串
var jsonUser=JSON.stringify(user);
//JSON把字符串转换成对象
var parse = JSON.parse('{"name":“永辉”,"age": 3,"sex": "男"}');
// user
// {name: '李永辉', age: 3, sex: '男'}
// console.log(jsonUser);
// VM72:1 {"name":"李永辉","age":3,"sex":"男"}

    很多人搞不清楚，JSON和JS对象的区别

    var obj={a:'hello',b:'hellob'};
var json='{"a":"hello","b":"hellob"}';

7.3、Ajax

  • 原生的js写法 xhr异步请求

  • jQuey封装好的方法$("#name").ajax("")

  • axious 请求

8、面向对象编程

8.1、什么是面向对象

JavaScript、Java、C#...面向对象；JavaScript有区别

  • 类：模板 原型对象

  • 对象：具体的实例

class Student {
    //构造器
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}
class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert('我是小学生');
    }
}
var xiaoming=new Student("xiaoming");

9、操作BOM对象（重点）

  1. 浏览器介绍

    JavaScript和浏览器关系？

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

    BOM:浏览器对象模型

    • IE6-11

    • Chrome

    • Safari

    • FireFox

  2. 三方

    • QQ浏览器

    • 360浏览器

  3. window代表 浏览器窗口

    window.alert(1);
undefined
window.innerHeight
720
window.innerWidth
436
Window.outerHeight
//可以试一试调整浏览器窗口大小...

  4. Navigator

    Navigator，封装了浏览器的信息

    navigator.appName
'Netscape'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
//版本信息
navigator.appVersion
'5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
navigator.platform
'Win32'

    大多数时候，我们不会使用navigator对象，因为会被人修改

    不建议使用这个属性来判断和编写

  5. screen(屏幕)

    screen.height
864
screen.width
1536

  6. location（重点）

    location代表当前页面的URL信息

    host: "www.baidu.com"
href: "https://www.baidu.com/"
location.reload()  // 刷新网页
location.assign('https://www.cnblogs.com/')

  7. document代表当前的页面，HTML DOM文档树

    document.title
"百度一下，你就知道"
document.title='李彦宏和';
"李彦宏和"

    获得具体的文档树节点

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

    获得cookle

    document.cookie

    劫持cookle原理

    • 服务器端可以设置cookle:httpOnly

  8. history：代表浏览器的历史记录

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

10、操作DOM对象（重点）

10.1、核心

浏览器网页就是一个Dom树形结构

  • 更新：更新Dom节点

  • 遍历dom节点：得到Dom节点

  • 删除：删除一个Dom节点

  • 添加：添加一个新节点

要操作一个Dom节点，就必须要先获得这个Dom节点

10.2、获得dom节点

//对应css选择器
var h1=document.getElementsByTagName("h1");
var p1=document.getElementById("p1");
var p2=document.getElementsByClassName("p2");
var father = document.getElementById("father");
//获得父节点下的所有子节点
var childrens=father.children;

这些原生代码，之后我们尽量都在jQuery（）；

10.3、更新节点

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

操作文本

  • id1.innerText='abc';修改文本的值

  • id1.getInnerHTML='123'；可以解析HTML文件

操作js

id1.innerText='456';
'456'
id1.innerText='abc';
'abc'
id1.style.color='red';
'red'
id1.style.fontSize='200px';
'200px'

操作百度一下样式

document.getElementById('su');
<input type=•"submit" id=•"su" value=•"百度一下" class=•"bg s_btn">•
var ss=document.getElementById('su');
undefined
ss.style.color='red';
'red'

10.4、删除Dom节点

删除节点的步骤：先获取父节点，在通过父节点删除子节点

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

注意：删除多个节点的时候，children是在时刻变化，删除节点的时候一定要注意。

10.5、插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点如果已经存在，那么我们就不能这么干了，因为会把之前的覆盖掉

  1. 追加

    <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>
    //获取id标签
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    // 给div这个标签追加一个儿子
    list.appendChild(js);
</script>

    效果：

    image-20221110090209539

  2. 创建一个新的标签

    <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>
    //获取id选择器
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    // 给div这个标签追加一个儿子
    // list.appendChild(js);
    //通过js创建一个新的节点
    //创建一个新的标签，返回一个对象
    var newp = document.createElement('p');
    //给新标签赋值一个id选择器
    newp.id='newp';
    //给新的标签里面赋值内容
    newp.innerText='helloword';
    //给list-id选择器添加一个新的标签
    list.appendChild(newp);
</script>

    效果：

    image-20221110093213455

  3. 创建一个新标签，插入标签(用js完成样式)

    <script>
    //获取id选择器
    var js = document.getElementById("js");
    var list = document.getElementById("list");
    // 给div这个标签追加一个儿子
    // list.appendChild(js);
    //通过js创建一个新的节点
    //创建一个新的标签，返回一个对象
    var newp = document.createElement('p');
    //给新标签赋值一个id选择器
    newp.id='newp';
    //给新的标签里面赋值内容
    newp.innerText='helloword';
    //给list-id选择器添加一个新的标签
    list.appendChild(newp);
    //创建一个标签节点
    var myStyle = document.createElement('style');
    //setAttribute一个key-values
    myStyle.setAttribute('type','text/css');
    //给boby添加一个样式
    myStyle.innerHTML="body{}";
    //获得head这个标签的位置，给他追加一个style标签
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

  4. insert插入

    <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 ee = document.getElementById('ee');
​
    var js = document.getElementById('js');
​
    var list = document.getElementById('list');
    list.insertBefore(js,ee);
</script>

11操作表单（验证）

  1. 表单是什么 form DOM树

    • 文本框 text

    • 下拉框 <select>

    • 单选框 redio

    • 多选框 checkbox

    • 隐藏框 hidden

    • 密码框 password

    • .......

    表单的目的：提交

  2. 获得要提交的信息

    <form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" value="men" id="boy">男
        <input type="radio" value="women" id="girl">女
    </p>
</form>
<script>
    var userName = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //获取你在文本框输入的值
    userName.value;
    //修改文本框里的值
    userName.value='123';
    //对于单选框，多选框等等固定的值，boy_radio.value只能取得当前的值
    boy_radio.checked;//查看返回结果，是否为true，如果为true，则被选中
    boy_radio.checked=true;//赋值为true
</script>

  3. md5加密

     <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form action="https://www.baidu.com/" method="post"  onsubmit="aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>
    <button type="submit">提交</button>
</form>
<script>
    function aaa() {
        alert("1");
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(uname.value);
        //md5算法
        pwd.value=md5(pwd.value);
        console.log(pwd.value);
    }
</script>

 

 

 

 

 

 

 

 

标签：console,log,JavaScript,js,var,document,小结,name
From： https://www.cnblogs.com/lyhidea/p/16882170.html

相关文章

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99