JS-基本语法-CSDN博客

本文链接：https://blog.csdn.net/Steven_______/article/details/146502226

一.变量声明

数字不能开头可以是任何字母数字下划线美元符号不能是关键字驼峰命名法

javaScript是弱类型语言

var 定义的作用域是全局的

var 赋值可以多次覆盖

 var a = 10;

  a ="张三";

  alert(a);   //window.alert window可省略

效果如图：

let 定义的作用域是局部的

let 赋值可以多次覆盖

const 定义的作用域是局部的常量不可修改

二.JavaScript 类型

两种基本类型和引用类型

基本类型数字字符串布尔值空值 undefined null

  number//(整数 小数)

  string//(单双引皆可)  

  boolean  

  null  

  undefined

引用类型对象数组函数

typeof 可以判断变量的类型未声明的变量默认是undefined

typeof null 是 object 是因为早期ECMAScript的一个bug 被沿用至今 null被认为是对象的占位符

三.运算符

算术运算符 + - * / % ++ --

赋值运算符 = += -= *= /= %=

比较运算符 > < >= <= == === != !==

逻辑运算符 && || !

三元运算符 ? :

== 会进行类型转换 === (全等运算符)不会进行类型转换

四.类型转换

parseInt("12") 类型转换

parseInt("12A45") 12 转换到字符就停止转换

parseInt("A45") NaN 如果字面不是数字就会转换成NaN (not a number)

其他类型转换为boolean

number: 0 NaN false 其他都是true

string: 空字符串 false 其他都是true

null undefined 转换为false

流程控制语句与java类似

if else switch case for 循环 while 循环 do while 循环 break continue

五.Js 函数

在java中函数又叫做方法

函数的声明

function 函数名(参数1,参数2,...){ JavaScript是弱类型语言函数的形参类型可以不写返回值也不需要定义类型直接return即可

函数体

return 返回值;

}

在JS中函数的调用可以传递任意个参数也可以不传递参数

 //定义方式一

 function add(a,b){

    return a + b ;

  }

  alert(add(10,15));

 //定义方式二

  var add = function(a,b){

    return a + b ;

  }

六.JS 对象

Array 数组

类似Java中的集合可以存储任意类型的数据长度可变类型可变

//定义数组

  var array = new Array(1,2,3,4);

  var arr2 = [1,2,3,4];

  alert(arr[2]);

  alert(arr.length);

如果一个变量未赋值默认是undefined

 //Array 的方法

  forEach() 遍历数组中有值的元素

  array.forEach(function(e){

    console.log(e);

  });

pop() 删除数组的最后一个元素返回被删除的元素

splice() 删除数组的指定元素返回被删除的元素

ES6 箭头函数:(形参...) => {函数体内容} 简化函数的定义

箭头函数没有自己的this 箭头函数的this指向的是外层的this

箭头函数没有arguments

  array.forEach((e) => {

    console.log(e);

  });

  //push:添加元素到数组的末尾 返回数组的长度

  array.push(5);

  console.log(array); 



  //slice:截取数组的指定元素 返回截取的元素

  array.splice(2,2);//(从哪开始,截取多少个)

  console.log(array);

String 字符串对象的创建方式

方式1.var str = new String("hello world");

方式2.var str = "...";

常见的属性 length

常见的方法 charAt() 返回在指定位置的字符

indexOf() 检索字符串

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

substring() 截取两个索引号之间的字符串

  var str = "hello world";

  var str1 = new String("hello world1");  
  
  console.log(str.length);
  
  console.log(str.charAt(2));
   
  console.log(str.indexOf("world"));

  console.log(str.trim());    //str.trim(start,end)

  console.log(str.substring(2,5));

效果如图：

JSON

· 概念：JavaScript Object Notation , JavaScript对象标记法。

·JSON 是通过JavaScript 对象标记法书写的文本。

·由于其语法简单，层次结构鲜明，现在用于作为数据载体，在网络中进行数据传输。

数据载体：在前端和后端中进行数据交互常用为JSON

JavaScript 自定义对象

var 对象名 = {

属性名1:属性值,

属性名2:属性值

函数名1:function(形参列表){

}

}

调用格式：对象名.属性名，对象名.函数名();

  var person = {
    name:"张三",
    age:18,
    sex:"男",
    sayHello:function(){
      alert("hello world!");
    }
  }
  person.age;
  person.sayHello();

·JSON 基础语法

定义

var 变量名 = '{"Key1":"Value1","Key2":"Value2"}'

示例

var person = '{"name":"张三","age":18,"sex":"男 ,"addr":["北京","上海","广州"]}';

  //定义JSON
  var jsonstr = '{"name":"张三","age":18,"sex":"男","addr":["北京","上海","广州"]}';
  //将JSON字符串转换成JS对象
  var person = JSON.parse(jsonstr);
  //JS对象转换为JSON字符串
  var jsonstr1 = JSON.stringify(person);

BOM

概念:Browser Object Model 浏览器对象模型 ,允许JavaScript与浏览器进行交互,JavaScript将浏览器的各个组成部分封装成了对象

组成:

window: 浏览器窗口对象

navigator: 浏览器信息对象

location: 浏览器地址对象

history: 浏览器历史对象

screen:屏幕对象

document: 文档对象

介绍:浏览窗口对象

获取:浏览器直接使用window,其中window,可以省略。

属性:

history:对History对象的只读引用

location:用于框架或窗口的Location对象

navigator:对Navigator对象的只读引用

方法:

alert():显示带有一条指定消息和一个确认按钮的警告框

confirm():显示一个带有指定消息和确认和取消按钮的对话框

setInterval():设置一个定时器，以便在指定的毫秒数后调用函数或计算表达式

setTimeout():设置一个定时器，以便在指定的毫秒数后调用函数或计算表达式

prompt():显示可提示用户进行输入的对话框
  window.alert("hello world");
  alert("hello world");
  window.confirm("是否确认删除?");//confirm 方法返回true或false

  //定时器 setInterval() 周期性的执行某个函数
  var count = 0;
  setInterval(function(){
    count++;
    alert("hello world"+count+"次");
  },1000);//每隔1秒执行一次
  //定时器 setTimeout() 延迟指定时间执行一次
  setTimeout(function(){
    alert("hello world");
  },3000);

介绍:地址栏对象

获取:使用window.location获取其中window.可以省略

window.location.属性 location.属性

属性:

href:设置或返回当前页面的URL

host:返回服务器名称和端口号

hostname:返回服务器名称

DOM

·概念:Document Object Model 文档对象模型将标记语言的各个组成部分封装成对应的对象:

·扩展:DOM树 W3C手册https://www.w3school.com.cn/

·DOM是W3C(万维网联盟)的标准，定义了访问HTML和XML文档的标准，分为三个不同的部分:

1. Core DOM - 所有文档类型的标准模型

Document:整个文档对象

Element:元素对象

Attribute:属性对象

Text:文本对象

Commit:注释对象

2. XML DOM - XML文档的标准类型

3.HTML DOM - HTML文档的标准类型

Image:<img>

Button:<input type = 'button'>

·作用: javaScript可以通过DOM,对HTML进行操作

改变HTML的元素

改变HTML的元素样式

改变HTML的元素内容

对HTML DOM事件作出反应

添加和删除 HTML元素

HTML中Element对象可以通过Document对象获取,而Document对象可以通过window对象获取

Document对象中提供了以下Element对象的获取函数:

  var div1 = document.getElementById("div1");
  //2.根据标签名获取，返回一个Element对象数组
  var divs = document.getElementsByTagName("div");
  //3.根据类名/Class属性获取，返回一个Element对象数组
  var divs = document.getElementsByClassName("div");
  //4.根据name属性获取，返回一个Element对象数组
  var divs = document.getElementsByName("div");

Js事件监听

事件:HTML事件是指发生在HTML元素上的事情。

例如:点击、鼠标移动、页面加载、表单提交等。

事件监听:JavaScript可以在事件被侦测到时执行代码

事件绑定
//方式一
<input type = "button" onlick = "on()" value = "按钮">
<script>
  function on(){
   alert("按钮被点击了"); 
  }
</script>
//方式二
<input type = "button" id = "btn" value = "按钮">
<script>
    //获取元素
    var btn = document.getElementById("btn");
    //事件监听
    btn.onclick = function(){
        alert("按钮被点击了");
    }
</script>
常见事件

事件名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 表单提交时触发该事件
onkeydown 某个键盘的键被按下
onmouseover/onmouseout 鼠标移到某元素上/移开

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover/onmouseout	鼠标移到某元素上/移开