JavaScript基础知识看这一篇就够了！

JS 基础知识

简称JS，是一门跨平台、面向对象的脚本语言，用来控制网页行为的，他能让网页进行交互
JavaScript引入方式

内部脚本：JavaScript代码必须放置在<script></script>标签之间

外部脚本：外部JS文件中只包含js代码，不包含<script>标签（<script>不能自闭和）
JS基础语法

区分大小写，与Java相同，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾分号可有可无（建议大家加上）

注释
- 单行注释：// //
- 多行注释：/* */
- 可以安装该插件，同步IDEA中的注释快捷键
大括号代表代码块

输出语句
- 使用window.alert() 写入警告框
- 使用document.write() 写入HTML输出
- 使用console.log() 写入浏览器控制台
变量

var

JavaScript中用关键词var（variable）来声明变量；JavaScript是一门弱语言，变量可以存放不同类型的值；变量名需要遵循一下规则：组成字符可以是任何字母、数字、下划线（_）或美元符号（$），数字不能开头，建议使用驼峰命名

var的特点
- 作用域比较大，全局变量
- 可以重复使用
let

与var相似，是局部变量，不能被重新定义

const

用来声明一个只读常量，一旦声明，常量的值就不能改变
数据类型

使用 typeo 可以获取数据类型

运输符与Java相似，补充：===不进行类型转换，==进行类型转换

类型转换

字符串类型转换为数字：parsent 可以将字符串转化为数字类型

其他类型转换为Boolean
- number：0和NaN为false，其他都转为true
- String：空字符为false，其他转为true
- Null和undefined：均转为false
原始类型
- number 数字
- string 字符串，单双引皆可
- boolean 布尔（ture/false）
- null 对象为空
- undefined 当未声明变量初始化时，该变量的默认值是undefined
引用类型
- Object类型
- Array类型
- Function类型
函数

定义：JavaScript 函数通过 function 关键字进行定义，语法为
```
function functionName(Num1,Num2...){
    //要执行的代码
}

//定义方式二：
var functionName = function(Num1,Num2...){
    //要执行的代码
}

//函数调用
var result = add(Num1,Num2);
alert(result);
```
形式参数不需要类型，因为JavaScript是弱类型语言。返回值也不需要定义类型，可以在函数内部直接使用return返回即可
JS对象

JS基础对象

Array——数组对象
```
//两种定义方式
var name = new Array(num1,num2...)
var name = [num1,num2...]

//访问
arr[索引] = 值;
```
Array属性

length——设置返回数组中元素的数量

Array方法

forEach()——遍历数组中的每个有值的元素，并调用一次传入的函数

push()——将新的元素添加到数组的末尾，并返回新的长度

splice()——从数组中删除元素
```
var arr = [1,2,3,4];

    for (let index = 0; index < arr.length; index++) {
        console.log(arr[index]);
    }

    //forEach:遍历数组中有值的元素
    arr.forEach(function(e){
        console.log(e);
    })

    //箭头函数
    arr.forEach((e) => {
        console.log(e);
    })

    //push:添加元素
    arr.push[7,8,9];
    console.log(arr);

    //splice:删除元素
    arr.splice[2,2];
    console.log(arr);
```
String——字符串对象

String属性

length——字符串的长度

String方法

charAt()——返回在指定位置的字符

indexOf()——检索字符串

trim()——去除字符串两边的空格

substring()——提取字符串中的两个指定的索引号之间的字符
```
var str = new String("Hello js");
    var str =("Hello js");

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(3));
    //indexOf
    console.log(str.indexOf("lo"));
    //trim
    var s = str.trim;
    console.log(s);
    //substring(start,end)——开始索引，结束索引(含头不含尾)
    console.log(str.substring(0,5));
```
JSON

JSON概念

全称：JavaScript Object Notation，JavaScript对象标记法。由于语法简单，层次结构鲜明，现多用于作为数据载体，在网络进行数据传输。

JOSN的基本语法
- 定义
  
  var 变量名 = '{"key1" : value1,"key2 : value2}';
- value的数据类型：
  - 数字(整数或浮点数)
  - 字符串(在双引号中)
  - 逻辑值(true或false)
  - 数组(在方括号中)
  - 对象(在花括号中)
  - null
- parse 将JOSN字符串转为JS对象
- stringify 将JS对象转为JSON字符串
浏览器对象模型BOM
- 概念：
  
  Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象
- 组成
  - Windows : 浏览器窗口对象
    - 获取：直接使用window，其中window. 可以忽略。
```
window.alert("Hello Word");
alert("Hello Word")
```
    - 属性
      - history：对History对象的只读引用
      - location：用于窗口或框架的Location对象
      - navigation：对Navigation对象的只读引用
    - 方法
      - alert：显示带有一段消息和一个确认按钮的警告框
      - confirm()：显示带有一段消息以及劝人按钮和取消按钮的对话框
      - setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
      - setTimeout()：在指定的毫秒数后调用函数或计算表达式
  - Location : 地址栏对象
    - 获取：使用 window.location 获取，其中 window. 可以省略
```
window.location.属性;
location.属性;
```
    - 属性：href：设置或返回完整的URL
```
location.href = "https://www.baidu.cn";
```
  - Navigator : 浏览器对象
  - Screen : 屏幕对象
  - History : 历史记录对象
文档对象模型DOM
- 概念
  
  Document Object Model，文档对象模型
- JavaScript通过DOM，就能够对HTML进行操作
  - 改变HTML元素的内容
  - 改变HTML的样式（CSS）
  - 对HTML DOM事件作出反应
  - 添加和删除HTML元素
- DOM是W3C的标准，定义了HTML和XML文档的标准
  - Core DOM - 所有文档类型的标准类型
    - Document：整个文档对象
    - Element：元素对象
    - Attribute：属性对象
    - Text：文本对象
    - Comment：注释对象
  - XML DOM - XML 文档的标准模型
  - HTML DOM - HTML 文档的标准模型
    - Image：<img>
    - Button：<input type='button'>
- DOM对象的获取
  - HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的
  - Cocument对象中提供了一下Element元素对象的函数
    - 根据id属性值获取，返回单个Element对象
```
var h1 = document.getElementById('h1');
```
    - 根据标签名获取，返回Element对象数组
```
var divs = document.getElementByTagName('div');
```
    - 根据name属性获取，返回Element对象数组
```
var hobbys = document.getElementByName('hobby');
```
    - 根据class属性值获取，返回Element对象数组
```
var clss = document.getElementByClssName('cls');
```

JS事件监听
- 事件绑定
  - 通过HTML标签进行绑定
```
<input type="button" οnclick="on()" value="按钮1">

<script>
    function on(){
        alter('被点击了');
    }
</script>
```
  - 通过DOM元素属性进行绑定
```
<input type="button" id="btn" value="按钮2">

<script>
    document.getElementById('btn').οnclick=function(){
        alert('被点击了') 
    }
</script>
```
- 常见事件
  - onclick——鼠标单击事件
  - onblur——元素失去焦点
  - onfocus——元素获得焦点
  - onload——某个页面或图像被完全加载
  - onsubmit——当表单提交时触发该事件
  - onkeydown——某个键盘被按下
  - onmouseover——鼠标被移到某个元素上
  - onmouseout——鼠标从某个元素移开

且将新火试新茶诗酒趁年华

大床落地窗

关注

18
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识看这一篇就够了！

Core DOM - 所有文档类型的标准类型Document：整个文档对象Element：元素对象Attribute：属性对象Text：文本对象Comment：注释对象XML DOM - XML 文档的标准模型HTML DOM - HTML 文档的标准模型。
复制链接

扫一扫