正文 

当前位置： 首页 > java > java语法

javascript基本操作

Crazy丶迷恋      2022-02-07     659

关键词：

1.JavaScript代码存在形式

<!-- 方式一 -->
<script type="text/javascript" src="JS文件"></script>
   
<!-- 方式二 -->
<script type="text/javascript">
    Js代码内容
</script>

2.JavaScript存放位置 

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

这里，推荐放在body体底部；

3.注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头。

// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

多行注释以 /* 开始，以 */ 结尾。

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/

二、变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

var x=5;
var y=6;
var z=x+y;

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 语句和 JavaScript 变量都对大小写敏感。

<script type="text/javascript">
  
    // 全局变量
    name = 'seven';
  
    function func(){
        // 局部变量
        var age = 18;
  
        // 全局变量
        gender = "男"
    }
</script>

三、数据类型 

JavaScript 中的数据类型分为原始类型和对象类型：

  • 原始类型
    • 数字
    • 字符串
    • 布尔值
  • 对象类型
    • 数组
    • 对象
    • ...

1.数字

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

转换：

  • parseInt(..)    将某值转换成数字，不成功则NaN
  • parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

  •  NaN，非数字。可使用 isNaN(num) 来判断。
  • Infinity，无穷大。可使用 isFinite(num) 来判断。

2.字符串

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

常见功能：

.length 获取当前字符串长度
.trim() 移除空白
.trimLeft()
.trimRight)
.charAt(n) 返回字符串中的第n个字符
.concat(value, ...) 拼接
.indexOf(substring,start) 子序列位置
.lastIndexOf(substring,start) 子序列位置
.substring(from, to) 根据索引获取子序列---起始位置，结束位置
.slice(start, end) 切片
.toLowerCase() 大写
.toUpperCase() 小写
.split(delimiter, limit) 分割
.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号

 例子：

字符串：var obj="  Singing to wine, life geometry  "

obj.length    // 字符串长度
obj.trim()      // 移除左右空白
obj.charAt(2) // 返回下标为2的字符
obj.concat("a "," b") // 拼接
obj.substring(3,34) // 根据索引获取子序列
obj.indexOf("to") // 返回to的下标
obj.slice(3,-1)    // 切片
obj.split(" ")
obj.split(" ",4) // 空格分割限制返回的个数，4个 

3.布尔类型

布尔类型仅包含真假，与Python不同的是其首字母小写。

  • ==      比较值相等
  • !=       不等于
  • ===   比较值和类型相等
  • !==    不等于
  • ||        或
  • &&    且

4.数组

JavaScript中的数组类似于Python中的列表。

var aa=[123,"aa"]
console.log(aa[1])  // 输出123

常见功能：

.length          数组的大小
.push(ele)       尾部追加元素
.pop()           尾部获取一个元素
.unshift(ele)    头部插入元素
.shift()         头部移除元素
.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    .splice(n,0,val) 指定位置插入元素
                    .splice(n,1,val) 指定位置替换元素
                    .splice(n,1)     指定位置删除元素
.slice(start, end)    切片
.reverse( )      反转
.join(sep)       将数组元素连接起来以构建一个字符串
.concat(val,..)  连接数组
.sort( )         对数组元素进行排序
.forEach()    将数组的每个元素传递给回调函数
.map()    返回一个数组元素调用函数处理后的值的新数组

5. 对象

JavaScript中的对象类似于Python中的字典。

var aa={
    name:"jack",
    age:18,
    sexy:true
}

取值：
aa.name
aa["age"]

null和undefined

  • null表示变量的值是空。
  • undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。

类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

四、运算符

1. 算术运算符

+ - * / % ++ --

2. 比较运算符

> >= < <= != == === !==

注意：

1 == “1”  // true      // 弱等于
1 === "1"  // false    // 强等于，即判断值又判断类型

3. 逻辑运算符

&& || !

4. 赋值运算符

= += -= *= /=

五、流程控制

1.if判断

但条件判断

var a = 10;
if (a > 5){
  console.log("大于5");
}else {
  console.log("小于5");
}

多条件判断

var a = 10;
if (a < 5){
  console.log("a < 5");
}else if (a < 10) {
  console.log("a < 10");
}else {
  console.log("a：",a);
}

2.switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

3.for循环

循环时，循环的元素是索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var names = ["cc", "tony", "rain"];
        for(var i=0;i<names.length;i++){
            console.log(i);
            console.log(names[i]);
        }
    </script>
</body>
</html>

执行结果：

 4.while循环

var i =0;
while (i<10) {
    console.log(i);
    i++;

5.三元运算

var a=1;
var b=2;
var c = a > b ? a : b

 六.函数

// 普通函数定义
function f1() {
  console.log("Hello world!");
}
f1();  // 调用函数

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}


// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  
函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数
(function(a, b){
  return a + b;
})(1, 2);

ES6中允许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;
}

arguments参数

arguments参数相当于python中的*args

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2)

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

几个例子：

1.

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？

2.

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？

3.闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

词法分析

JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找。

看两个例子：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 问：执行foo()之后的结果是？

第二题

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 执行后的结果是？
词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};

最终，AO上的属性只有一个age，并且值为一个函数声明

执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找

1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());

//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());

//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法：

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

 

web前端基础知识-javascript基本操作

JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后，可由所有的现代浏览器执行。JavaScript很容易学习。一、如何编写？1.JavaScript代码存在形式<!--方式一--><scripttype="text/javascript"... 查看详情

web前端基础知识-javascript基本操作

JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后，可由所有的现代浏览器执行。JavaScript很容易学习。一、如何编写？1.JavaScript代码存在形式<!--方式一--><scripttype="text/javascript"... 查看详情

javascript基本操作

1.什么是DOM DOM是文档对象模型的简称，它的基本思想是把结构化的文档解析成一系列的节点，再由这些节点组成一个树状的结构。所有节点的最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的，所以，... 查看详情

javascript数组基本操作

...言中都是很常见、经常会用到的，现在我把JavaScript数组基本操作整理一下，供大家参考学习。里边包含我自己的见解以及案例，希望能够帮助大家，使用的是ECMAScript5。字符串与数组转换有时候我们需要把字符串进行转换为数组... 查看详情

javascript基本javascript模块(代码片段)

查看详情

javascript初探系列之数组的基本操作

在程序语言中数组的重要性不言而喻，JavaScript中数组也是最常使用的对象之一，数组是值的有序集合，由于弱类型的原因，JavaScript中数组十分灵活、强大，不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素，Jav... 查看详情

javascript的基本语法

Javascript的基本语法　　Javascript的基本语法要求有哪些呢？下面我为大家一一进行介绍：1.javascript的执行顺序　　按照在HTML文件中的顺序来依次执行。2.区分大小写　　javascript区分字符大小写，两个字符串相同大小写不同，会被... 查看详情

javascript练习javascript基本变量(代码片段)

查看详情

javascript常见的javascript操作(代码片段)

查看详情

javascript使用javascript确认操作(代码片段)

查看详情

javascript的基本语法

 【JavaScript的基本语法】1.javascript输出JavaScript语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。<script>   document.write("helloworld!");</script>插入，输出。document.getElementById("pid").innerHTML=" 查看详情

javascript初步+基本函数

JavaScript基本写法<scripttype="text/javascript">functionrec(){　　　　//函数定义varmymessage=confirm("你是女人嘛");if(mymessage==true){document.write("你是女士!");}else{document.write("你是男士!");}} </script> 查看详情

javascript基本语法

JavaScript基本介绍及发展趋势ECMAScript通过ECMA-262标准化的脚本程序语言，JavaScript是其实现和扩展。1999年ES3发布，成为JavaScript的通行标准。2009年ES5发布，在所有现代浏览器中得到了相当完全的实现2015年ES6发布，被部分实现于大部... 查看详情

javascript基本知识

如何把JavaScript放入HTML页面　　　　如果需要把一段JavaScript插入HTML页面，我们需要使用<script>标签（同时使用type属性来定义脚本语言）。　　　　例：　　　　<scripttype="text/javascript">　　　　　　　　　　document.write("H... 查看详情

第十五篇：javascript之dom操作

一、后台管理页面布局二、JavaScript函数三、eval以及时间操作四、JavaScript作用域五、JavaScript面向对象模型六、DOM选择器七、DOM事件操作八、DOM绑定事件的分离绑定方法  查看详情

javascript中的操作符详解1

　　好久没有写点什么了，根据博主的技术，仍然写一点javascript新手入门文章，接下来我们一起来探讨javascript的操作符。一、前言javascript中有许多操作符，但是许多初学者并不理解或曲解他们的用途，本章将会带领初学者们一... 查看详情

javascript创建一个基本的javascript对象(代码片段)

查看详情

javascript7个基本javascript函数(代码片段)

查看详情