Javascript笔记

==严格要求== 在代码开头前加上
1
'user strict'
==定义局部变量用let，定义全局变量用var==
1
2
let i = 1;
var i = 1;

==定义一个对象的方法==

var person = {
      name:"cc",
      age:3,
    // 数组可以有多种类型
      tags:['js',123,'javaweb']
    //最后一个不需要“,”
	}

==NaN表示不是一个数字，有个方法叫做 isNaN();==

NaN == NaN —- false

==定义字符串，字符串不可变性==

1
2
3

let name = "cc";
let age = 23;
let msg = `你好呀，${name}`

==数组长度可以任意改变==

var arr = [1, 2, 3, 4, 5];
arr.length = 10;
// 数组方法
arr.indexof(2) // 返回元素2的下标
arr.slice() // 相当于substr()
arr.push() //往尾部添加，一此可以添加多个
arr.pop() //弹出尾部的一个元素

arr.unshift() //往头部添加，一此可以添加多个
arr.shift() //弹出头部的一个元素

arr.sort()

arr.reverse()

arr.contact() // 拼接数组，返回一个新的数组

arr.join("-") // 拼接

// 多维数组
arr = [[1, 2], [3, 4], ["5", "6"]];

==对象==

//动态增删
var person = {
	name:"cc",
	age:3,
	score:100
}
delete person.age;
person.sex = 'nan';
'age' in person // 判断这个属性该对象是否拥有

==forEach==

var age = [1, 2, 3, 4, 5, 6, 7, 8];
age.forEach(function(value) {
	console.log(value)
})

==for …in==

for...in
for(var num in age) {
	console.log(age[num]) //这里的num是索引
}

for...of // 遍历map，set用这个
for (var x of age) {
    console.log(x)
}

==函数的定义==

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

// 另外一种方式  匿名函数定义的方式
var f = function(x) {
    if(x >= 0) {
        return x;
    }
    else {
        return -x;
    }
}
// 通过f就可以调用函数

==规避函数不传参的情况==

var f = function(x) {
    // 手动抛出异常来判断
    if(typeof x != 'number') {
        throw 	'Not a Number';
    }
    if(x >= 0) {
        return x;
    }
    else {
        return -x;
    }
}

==`arguments`关键字，`rest`关键字==

arguments代表传递进来的所有参数是一个数组！数组名字就叫 arguments
rest 获取处了已经定义的参数之外的所有参数
rest参数只能写在最后面，用...标识
function f(a, b, ...rest) {
	console.log(rest);	
}

将old_alert = window.alert，window.alert就失效了

需要再赋值回来

var是函数作用域，let是块级作用域。。。var应该不是函数作用域

建议以后使用用let定义局部作用域

const 常量关键字
1
const PI = '3.14';

==自己定义一个全局变量==

// 唯一全局变量
var cc = {};
// 定义全局变量
cc.name = "超人";
cc.age = 18;
cc.Gmail = ccwasyin@gmail.com;
cc.add = function(a, b) {
    reuturn a + b;
}

==alert变量==

<script>
  var  x = '你好';
  window.alert(x);
   var old_alert = alert;
   window.alert = function() {
  
   }
   alert = old_alert;
  window.alert(123);
  
</script>

==方法==

// 方法中的属性用逗号隔开
var cc = {
    name : 'rr',
    birth:2001,
    age: function() {
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
// 另一种定义方法
function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var cc = {
    age:getAge()
}

// apply 可以改变this的指向

getAge.apply(cc, []) // this指向了cc这个类， 参数为空

时间戳表示当前这个时间距离1970年0点0分0秒的毫秒数

格式：

对象用 {}

数组用[]

所有键值对都是用key:value

var user = {
    name: "cc",
    age:3,
    sex:'nan'
}

// 对象转化成json字符串 {"name": "cc", "age":3, "sex":"nan"};
var jsonUser = JSON.stringify(user);

// json 字符串转化为对象， 参数为json字符串
var obj = JSON.parise('{name:"cc", "age":3, "sex":"nan"}');

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

xiaoming.__proto__= bird;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  

+ ### ==class关键字==

  ```javascript
  class Student {
      constructor(name) {
          this.name = name;
      }
      hello() {
          alert('hello')
      }
  }
  
  var cc = new Student("cc");
  // name作为参数传进去，经过构造器变成属性

==3继承==

class cc extends Student {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
    myGrade() {
        alert('我是一名小学生')
    }
}
var xiaoming = new cc('xiaoming', 90);

操作BOM对象

window 代表浏览器窗口

window.alert()、window.innerHeight()
screen 代表屏幕尺寸

screen.width

screen.height
location 代表当前页面的url信息

location.assign(“www.ccwas.com")修改后在访问这个页面直接跳转到ccwas里去

document 代表当前页面，html dom文档树

document.title

“百度一下，你就知道”

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

cookie

获取cookie documentr.cookie

劫持cookie就是获取你的cookie

服务器端可以设置cookie：httpOnly
history 不建议使用

history.back() //后退

history.forward() //前进

获取dom节点

<body>
    <div id = "cc">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>

    <script>
        var h1 = document.getElementsByTagName('h1');
        var p1 = document.getElementById('p1');
        var p2 = document.getElementsByClassName("p2");
        var cc = document.getElementById('cc');
		var children = cc.children('cc'); // 获取父节点下的所有子节点
    </script>

</body>
// 这是原生代码，之后尽量用jQery

更新dom节点

<body>
  <div id = "id1">

  </div>

  <script>
    var id1 = document.getElementById("id1");
    id1.innerText = 12345;
    id1.innerHTML = '<strong>ccwas</strong>';
    id1.style.color = 'red';
    id1.style.fontSize = '200px';
  </script>

</body>

删除节点是一个动态的过程

步骤：先通过自己获取父节点，再通过父节点删除自己

1
2
3

var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);

增加一个节点

<body>
    <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);
        // 通过js创建一个新的节点
        var newP = document.createElement('p');
        newP.id = 'nextP';
        newP.innerText = 'hello,cc';
        list.appendChild(newP);
    </script>

</body>

获得和设置表单的值

<body>

  <form actioin = "#" method = "post">
    <p>
      <span>用户名：</span> <input type = "text" id = "username">
    </p>
    <p>
      <span>性别：</span>
      <input type = "radio" name = "sex" value = "man" id = "boy"> 男
      <input type = "radio" name = "sex" value = "woman" id = "girl"> 女
    </p>
  </form>

<script>
  var input_text = document.getElementById('username');
  var boy = document.getElementById('boy');
  var girl = document.getElementById('girl');
</script>

</body>

==jQuery==

公式：$(selector).action()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>

  <a href = "" id = "test_jquery"> 点我</a>

  <script>
    $('#test_jquery').click(function () {
      alert('hello,cc');
    })
  </script>

</body>

==严格要求== 在代码开头前加上

==定义局部变量用let，定义全局变量用var==

==定义一个对象的方法==

==数组长度可以任意改变==

==对象==

==forEach==

==for …in==

==函数的定义==

==规避函数不传参的情况==

==arguments关键字，rest关键字==

==自己定义一个全局变量==

==alert变量==

==方法==

操作BOM对象

获取dom节点

更新dom节点

增加一个节点

获得和设置表单的值

==jQuery==

==`arguments`关键字，`rest`关键字==