JS学习

最新推荐文章于 2024-04-28 11:43:36 发布

敷衍小伙

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/weixin_45680043/article/details/104233292

版权

JavaScript

是一种弱类型脚本语言，源代码不需要编译直接由浏览器运行解释，用于控制网页的行为。
一个合格的后端人员必须精通js

关键字变量流程

一个简单的代码
内部和外部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('hello');
    </script>
</head>
<body>

</body>
</html>

另一种引用方式和css相似

<script src="1.js"></script>

1.js文件里面是这一句代码

alert('hello');

定义变量，条件控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style></style>
</head>
<body>
<script>
    var num=1;
    var name = "张三";

    if(true){
        alert('你好')
    }else if(num<1){
        alert('123')
    }

</script>
</body>
</html>

试着在浏览器的控制台使用
调试过程可以自己查一下

数据类型

数值，文本，图片等等
js不区分小数和整数也会有精度问题存在
字符和字符串
布尔值
逻辑运算符
比较运算符(三个为绝对等于)
NaN===NaN 这个与所有都不相等，判断是不是它得使用方法isNaN()
数组 Java数组中必须是同类型的对象 js不需要这个条件
对象对象是大括号数组是中括号

123
123.1
1.123e3  科学计数法
-99 复数
‘abc’  "abc"
true false
&& || !
= == ===



var person ={
name :"zhangsan",
age:3,
sex:"男"
}

严格检查模式 ‘use strict’
放在js的第一行

字符串
正常的字符串我们使用单引号或者双引号包起来
注意转义字符

\'
\n
\t
\41
\u4e2d

字符串不可变，大小写转换这里是方法，并不是属性
使用各种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict';
        console.log('a')
        console.log('a\'')
        console.log("a")
        let mas = "nihao";
        var mss = `你好,${mas}`
        console.log(mas.length);
        console.log(mas.toUpperCase());
        console.log(mas.indexOf('n'));
    </script>
</head>
<body>

</body>
</html>

数组 array可以包含任意数据类型
几种方法slice push pop unshift shift sort reverse concat join

var arr =[1,2,3]

对象

var 对象名称 ={
   对象的各种属性
   名字，
   性别，
   年龄
}

delete 删除对象的属性
使用不存在的对象属性会报错

流程控制

if 判断

var age =3;
if(age>3){
alert("hi")
}else{
alert("hello")
}

循环 while for forEach

这里的循环与java没有太大的区别
语法方面基本相同

map和set

var map = new Map([1,2],[3,4]):
map.set(5,6);

var set =new Set([1,2,3,4,5,1]);//可以去重
set.add(7);
set,delete(1);

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

函数

定义函数

public 返回值类型 方法名(){
 return ;
}

一旦执行到return代表函数结果，返回结果
如果没有执行return，会返回undefined

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

function是绝对值函数

变量的作用域

假设在函数体中声明，在函数体外不能使用，就是函数的大括号里面的定义，在外面使用会报错
各自的声明在各自的大括号里面使用
尽量做到所有的函数定义都放在函数头部。

全局对象 window
默认所有的全局变量都会自动绑定在window对象下

规范

所有的全局变量都会自动绑定在window对象下
如果不同的js文件使用相同的全局变量，就会产生冲突
将自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突的问题。

出了局部作用域的变量

使用let定义局部作用域的变量解决

常量constant

不能改变值

const PI=‘111’；

方法

var nihao ={
  name = 'zhangsan';
  age =12;
  //方法
  age:function(){
    var now = new Date().getFullYear();
    return now-this.age;
}
}

js的面向对象

 var xiaoming
 var Bird
 xiaoming._proto_=Student;
 xiaoming._proto_=Bird;

class继承

定义一个类，属性和方法

// 定义一个学生的类
class Student{

    constructor(name){
        this.name = name;
    }

    hello(){
        alert('hello')
    }

}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()

继承

class XiaoStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }

    myGrade(){
        alert('我是一名小学生')
    }

}
var xiaohong = new XiaoStudent("xiaohong",1);

BOM对象

BOM 浏览器对象模型

JS和浏览器关系： JS就是为了能够在浏览器中运行

window

window
代表浏览器窗口
Navigator
封装了浏览器的信息
screen 屏幕尺寸
location 代表当前页面的URL信息
document 代表当前的页面 HTML DOM文档树
获取 cookie document.cookie

history 代表浏览器的历史记录
history.back() //后退
history.forward() //前进

DOM对象

核心在于浏览器就是一个DOM树形结构
更新更新DOM节点
遍历 DOM节点
删除 DOM节点
添加 DOM节点

获得dom节点

<div id="father">......</div>
var father = document.getElementById('father');
var childrens = father.children[index]; //获取父节点下的所有子节点

更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
    id1.innerText='456' //修改文本的值
</script>

id1.style.color = 'yellow'; // 属性使用 字符串 包裹
id1.style.fontSize='20px'; // - 转 驼峰命名问题
id1.style.padding = '2em'

删除节点
先获取父节点，在通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
   var self = document.getElementById('p1');
   var father =  p1.parentElement;
   father.removeChild(self)
    
    // 删除是一个动态的过程；
    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);// 追加到后面
</script>

敷衍小伙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习

JavaScript是一种弱类型脚本语言，源代码不需要编译直接由浏览器运行解释，用于控制网页的行为。一个合格的后端人员必须精通js关键字变量流程一个简单的代码内部和外部标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g...
复制链接

扫一扫