JavaScript学习笔记（一）

最新推荐文章于 2024-06-21 16:41:46 发布

文阿花

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量315

点赞数 3

分类专栏： JavaScript 文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/wz_1992/article/details/139472046

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、什么是`JavaScript`?

所有的例子及学习逻辑均来自W3School，以下只是我自己学习的笔记，具体内容可直接参考JS教程
JavaScript 是属于 HTML 和 Web 的编程语言,是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
在 HTML 中，JavaScript 代码必须位于 < script> 与 < /script> 标签之间。
旧的 JavaScript 例子也许会使用 type 属性：< script type="text/javascript">。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

2、`JavaScript` 简介

getElementById("id")
根据id来获取元素
JavaScript 同时接受双引号和单引号
用法示例：

document.getElementById("demo").innerHTML = "Hello JavaScript";

作用：获取id为demo的元素，并将其内容修改为Hello JavaScript。
提示：JavaScript 同时接受双引号和单引号。

第一个javascript:

<! DOCTYPE html>
<html>
<body>
<h2>这是第一个javaScript</h2>

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
点击这里显示日期</button>

<p id="demo"></p>

</body>
</html>

运行效果：
在这里插入图片描述

3、以示例方式理解`JavaScript`的使用：

3.1、使用`javascript`改变HTML属性

document.getElementById('myImage').src='open1.png' 改变图片

<!--使用javascript改变HTML属性 -->
<html>
<body>
<h4>2、使用javascript改变HTML属性</h4>
<button onclick="document.getElementById('myImage').src='open1.png'">打开</button>
<img id="myImage" border="0" src="closebutton.png" style="text-align:center;"></img>
<button onclick="document.getElementById('myImage').src='closebutton.png'">关闭</button>
</body>
</html>

运行效果；
在这里插入图片描述

3.2、使用`javascript`改变`HTML`样式

document.getElementById('textsizeDemo').style.fontSize='35px' 改变字体大小

<!--使用javascript改变HTML样式 -->
<html>
<body>
<p id="textsizeDemo">点击按钮改变字体大小</p>
<button type="button" onclick="document.getElementById('textsizeDemo').style.fontSize='35px'">点击我</button>
</body>
</html>

运行效果：
在这里插入图片描述

3.3、使用`javascript`隐藏或者显示`HTML`元素

document.getElementById('textHide').style.display='none' 设置隐藏
document.getElementById('textHide').style.display='block' 设置显示

<!--使用javascript隐藏或者显示HTML元素 -->
<html>
<body>
<p id="textHide">点击按钮隐藏或者显示我</p>
<button type="button" onclick="document.getElementById('textHide').style.display='none'">隐藏</button>
<button type="button" onclick="document.getElementById('textHide').style.display='block'">显示</button>
</body>
</html>

运行效果：
在这里插入图片描述

代码附件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button {
      background-color: plum;
      padding: 10px;
      color: white;
      border-radius: 5px;
      outline: none;
      border: 0px;
      font-size: 17px;
    }
  </style>
</head>

<body>

  <!-- JS改变内容-点击改变文字 -->
  <p id="demep">js能改变Html的内容</p>
  <button type="button" onclick='document.getElementById("demep").innerHTML="Hello China"'>点击我</button>

  <!-- JS改变内容-直接赋值 -->

  <p>时间：年</p>
  <p id="demo4"> </p>
  <script>
    var d = new Date("2024");
    document.getElementById("demo4").innerHTML = d;
  </script>

  <p>时间：年月</p>
  <p id="demo3"> </p>
  <script>
    var d = new Date("2024-06");
    document.getElementById("demo3").innerHTML = d;
  </script>

  <p>时间：年月日</p>
  <p id="demo2"> </p>
  <script>
    var d = new Date("2024-06-02");
    document.getElementById("demo2").innerHTML = d;
  </script>

  <p>时间：年月日 时分秒</p>
  <p id="demo5"> </p>
  <script>
    var d = new Date("2024-06-02T12:00:00");
    document.getElementById("demo5").innerHTML = d;
  </script>



  <!--JS改变内容-点击更换图片  -->
  <img id="img01" src="imgs/flower.png" style="text-align:center;">
  <button onclick="document.getElementById('img01').src='imgs/flower02.png'">更换图片</button>
  <button type="button" onclick='document.getElementById("img01").src="imgs/flower.png"'>恢复图片</button>


  <!-- JS改变Html样式 -->
  <p id="demo06">JS改变Html样式 </p>
  <button onclick="document.getElementById('demo06').style.fontSize='30px'">改变文字大小</button>

  <br>
  <!-- JavaScript 能够隐藏 HTML 元素 -->
  <p id="demo07">JavaScript 能够隐藏 HTML 元素</p>
  <button onclick="document.getElementById('demo07').style.display='none'">隐藏文字</button>
  <button onclick="document.getElementById('demo07').style.display='block'">显示文字</button>
</body>

</html>

4、`JavaScript`的使用

4.1、`head`中的`JavaScript`

记得调用方法的时候要加上括号

<! DOCTYPE html>
<html>
<head>
<script>
function myFuncation(){
  document.getElementById('clickinHead').innerHTML = "段落被修改。"
}
</script>
</head>

<body>
<!-- head中的javascript -->
<h4>Head中的javascript</h4>
<p id="clickinHead">一段文字</p>
<button type="button" onclick="myFuncation()">点击我修改文字</button>
</body>
</html>

运行效果：
在这里插入图片描述

4.2、`body`中的`JavaScript`

<!--body中的javascript -->
<html>
<body>
<script>
function mybodyFunction(){
 document.getElementById('clickinBody').innerHTML="文字已被修改。"
}
</script>
<p id="clickinBody">这是一段文字</p>
<button type="button" onclick="mybodyFunction()" >点击我修改文字</button>
</body>
</html>

运行效果同上

4.3、外部脚本

优势：
1、分离了 HTML 和代码
2、使 HTML 和 JavaScript 更易于阅读和维护
3、已缓存的 JavaScript 文件可加速页面加载
使用：
创建outjs.js文件：

function myFunctionout(){
	document.getElementById("textoutof").innerHTML="文字已被外部脚本修改。"
}

创建js_1.html文件：

<!--外部脚本 -->
<html>
<body>
<p id="textoutof">一个段落</p>
<button type="button" onclick="myFunctionout()">点击我</button>
<script src="outjs.js"></script>
</body>
</html>

运行效果同上

5、`JavaScript` 输出

JavaScript 不提供任何内建的打印或显示函数。
JavaScript 能够以不同方式“显示”数据：
1、使用 window.alert() 写入警告框
2、使用 document.write() 写入 HTML 输出
3、使用 innerHTML 写入 HTML 元素
4、使用 console.log() 写入浏览器控制台

5.1、 `document.write()`的使用

（1）

<!-- document.write()用法 -->
<html>
<body>
<h4>white的用法</h4>
<p>1+1=</p>
<script>
document.write(1+1);
</script>
</body>
</html>

运行效果：
在这里插入图片描述
（2）在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

<!--在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ： -->
<html>
<body>
<h4>在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：</h4>
<button type="button" onclick="document.write(1+1)">试一试</button>
</body>
</html>

运行效果：
在这里插入图片描述

5.2、 `window.alert()`警告框的使用

<!-- window.alert() 警告框的使用 -->
<html>
<body>
<h4>警告框的使用</h4>
<script>
window.alert("警告内容")
</script>
</body>
</html>

运行效果：

在这里插入图片描述

5.3、`console.log()`：写入浏览器控制台

<!--console.log() -->
<html>
<body>
<h4>在浏览器中，您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。</h4>
<script>
console.log("内容111")
</script>
</body>
</html>

运行效果：
在这里插入图片描述

6、`JavaScript` 语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。
JavaScript 中不能使用连字符。它是为减法预留的。例如不能使用：master-card
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：firstName

<!--JavaScript语句 -->
<html>
<body>
<h4>JavaScript语句</h4>
<p id="yuju"></p>
<script>
var x,y,z;  //语句1
x=22;
y=11;
z=x+y;
document.getElementById("yuju").innerHTML="z的值为："+z+"。"
</script>
</body>
</html>

运行效果：
在这里插入图片描述

7、`JavaScript Let`

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。

7.1 全局作用域

全局（在函数之外）声明的变量拥有全局作用域。
全局变量可以在 JavaScript 程序中的任何位置访问。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="demo"></p>
  <script>
    var carName = 'porsche';
    // 此处的代码可以使用 carName
    myFunction();
    function myFunction() {
    // 此处的代码可以使用 carName
      document.getElementById('demo').innerHTML = 'I can display ' + carName;
    }
  </script>
</body>

</html>

7.2 函数作用域

局部（函数内）声明的变量拥有函数作用域。
局部变量只能在它们被声明的函数内访问。

// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

7.3 `JavaScript` 块作用域

通过 var 关键词声明的变量没有块作用域。在块 {} 内声明的变量可以从块之外进行访问。

{ 
  var x = 10; 
}
// 此处可以使用 x

在 ES2015 之前，JavaScript 是没有块作用域的。

可以使用 let 关键词声明拥有块作用域的变量。

在块 {} 内声明的变量无法从块外访问：

{ 
  let x = 10;
}
// 此处不可以使用 x

7.4 重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题。

在块中重新声明变量不会重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

7.5 循环作用域

7.5.1 在循环中使用 `var`：

在循环中使用的变量使用 var 重新声明了循环之外的变量。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="demo"></p>
  <script>
    var i=5;
    for(var i=0;i<10;i++){

    }
    document.getElementById('demo').innerHTML=i;
   
  </script>
</body>

</html>

运行结果：i=10;

7.5.2 在循环中使用 `let`：

在循环中使用的变量使用 let 并没有重新声明循环外的变量。

  <script>
    let i=5;
    for(let i=0;i<10;i++){

    }
    document.getElementById('demo').innerHTML=i;
   
  </script>

运行效果：i=5;

更多的let和var 区别请参考JavaScript Let

8、`JavaScript Const`

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

通过 const 定义的变量与 let 变量类似，但不能重新赋值

8.1 块作用域

在块作用域内使用 const 声明的变量与 let 变量相似。

在本例中，x 在块中声明，不同于在块之外声明的 x：

var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

8.2 在声明时赋值

正确：

const PI = 3.14159265359;

错误：

const PI;
PI = 3.14159265359;

8.3 不是真正的常数

关键字 const 有一定的误导性。
它没有定义常量值。它定义了对值的常量引用。
因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

8.4 原始值和常量

如果我们将一个原始值赋给常量，我们就不能改变原始值：

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

您可以更改常量对象的属性：

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

8.5 var、let、const 重新声明

在程序中的任何位置都允许重新声明 JavaScript var 变量

var x = 2;    //  允许
var x = 3;    //  允许
x = 4;        //  允许

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：

var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的：

const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

{
  const x = 2;   // 允许
  const x = 3;   // 不允许
  x = 3;         // 不允许
  var x = 3;     // 不允许
  let x = 3;     // 不允许
}

在另外的作用域或块中重新声明 const 是允许的：

const x = 2;       // 允许

{
  const x = 3;   // 允许
}

{
  const x = 4;   // 允许
}

9、JavaScript 运算符、JavaScript 算数、JavaScript 赋值、JavaScript 数据类型、JavaScript 函数等

JavaScript 运算符

在这里插入图片描述
JavaScript 算数

JavaScript 赋值
 JavaScript 数据类型
 JavaScript 函数
 JavaScript 对象

10、JavaScript 事件

常见的 HTML 事件
在这里插入图片描述

11、字符串的方法

11.1、特殊字符的使用

单引号 \'
双引号\"
反斜杠\ \ (由于中间不加空格文本直接显示了一个反斜杠，所以此处加了个空格，真正使用的时候是没有空格的)
当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。
当使用 == 相等运算符时，相等字符串是相等的

<!--特殊字符 -->
<html>
<body>
<h4>单引号的使用</h4>
<p id="specialtext"></p>
<script>
document.getElementById("specialtext").innerHTML="It\'s a good day !"
</script>

<h4>双引号的使用</h4>
<p id="specialtext1"></p>
<script>
document.getElementById("specialtext1").innerHTML="因此中国也可以称为\"China\""
</script>

<h4>反斜杠的使用</h4>
<p id="specialtext2"></p>
<script>
document.getElementById("specialtext2").innerHTML="字符\\被称为反斜杠"
</script>
</body>
</html>

运行效果：
在这里插入图片描述

11.2、字符串的方法

11.2.1. `.length`:字符串的长度

11.2.2. `.indexOf（str，index）`

查找字符串中的字符串首次出现位置，index为查找起始位置（从前往后查找），可是设置可不设置。

11.2.3. `.lastIndexOf（str，index）`

查找字符串中的字符串末次出现位置，index为查找起始位置（从后往前查找），可是设置可不设置。
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

11.2.4. `.search(str)`

搜索字符串中指定文本第一次出现位置

注意：
indexOf() 与 search()这两种方法区别在于：
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。

11.2.5. 提取部分字符串

slice(start, end)
substring(start, end)
substr(start, length)

（1）slice() 方法

①、slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

这个例子裁剪字符串中位置 1 到位置 4 的片段：

  <script>
    var str='Apple Orange';
    document.getElementById('demo').innerHTML=str.slice(1,4);
  </script>

运行效果：ppl

②、如果某个参数为负，则从字符串的结尾开始计数。

这个例子裁剪字符串中位置 -4 到位置 -1 的片段：

  <script>
    var str='Apple Orange';
    document.getElementById('demo').innerHTML=str.slice(-4,-1);
  </script>

运行结果：ang
③、如果省略第二个参数，则该方法将裁剪字符串的剩余部分：

  <script>
    var str='Apple Orange';
    document.getElementById('demo').innerHTML=str.slice(3);
  </script>

运行结果：le Orange
④、或者从结尾计数：

  <script>
    var str='Apple Orange';
    document.getElementById('demo').innerHTML=str.slice(-3);
  </script>

运行结果：nge
（2）substring() 方法
两个索引位置：

var res = str.substring(7,13);

一个索引位置：截取7以后所有的字符串

var res = str.substring(7);

（3）substr() 方法
第一个参数是索引开始位置，第二个参数是提取长度

var res = str.substr(7,6);

只有一个索引开始位置，则是从该位置开始提取之后所有的字符串

var res = str.substr(7);

如果首个参数为负，则从字符串的结尾计算位置。（第二个参数索引长度不能为负数）

var res = str.substr(-7);

11.2.6. 替换字符串内容`replace()`

replace() 方法用另一个值替换在字符串中指定的值；
replace() 方法不会改变调用它的字符串。它返回的是新字符串;
默认地，replace() 只替换首个匹配;
replace() 对大小写敏感;
如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

第一个参数是：需要被替换的值，第二个参数是替换成新的值

 <script>
    var str='Apple Orange';
    document.getElementById('demo').innerHTML=str.replace('A','B');
  </script>

11.2.7.转换为大写和小写

toUpperCase() :把字符串转换为大写
toLowerCase()：把字符串转换为小写

11.2.8.字符串拼接：`concat()`

<script>
    var str01='Apple Orange';
    var str02='Apple Orange';
    var str03='Apple Orange';
    document.getElementById('demo').innerHTML=str01.concat(str02,str03);
  </script>

运行结果：Apple OrangeApple OrangeApple Orange

11.2.9.删除两端空白符:`trim()`

Internet Explorer 8 或更低版本不支持 trim() 方法。

  <script>
    var str01='  Apple Orange  ';
    document.getElementById('demo').innerHTML=str01.trim();
  </script>

如需支持 IE 8，您可搭配正则表达式使用 replace() 方法代替：

var str = "       Hello World!        ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

11.2.10.提取字符串字符

这是两个提取字符串字符的安全方法：

charAt(position)
charCodeAt(position)
（1）charAt() 方法
charAt() 方法返回字符串中指定下标（位置）的字符串：

 <script>
    var str01='Apple Orange';
    document.getElementById('demo').innerHTML=str01.charAt(3);
  </script>

运行结果：p
（2）charCodeAt() 方法

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

 <script>
    var str01='Apple Orange';
    document.getElementById('demo').innerHTML=str01.charCodeAt(3);
  </script>

运行结果：108

11.2.11.把字符串转换为数组:`split()`

<script>
function myFunction() {
  var str = "a,b,c,d,e,f";
  var arr = str.split(",");
  document.getElementById("demo").innerHTML = arr[0];
}
</script>

或者：

<script>
var str = "Hello";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
  text += arr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>

附件：相关代码

<! DOCTYPE html>
<html>
<head>
<script>
function myFuncation(){
  document.getElementById('clickinHead').innerHTML = "段落被修改。"
}

</script>

</head>
<body>
<h2>这是第一个javaScript</h2>

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
点击这里显示日期</button>

<p id="demo"></p>


<!--使用javascript改变HTML属性 -->
<h4>2、使用javascript改变HTML属性</h4>
<button onclick="document.getElementById('myImage').src='open1.png'">打开</button>
<img id="myImage" border="0" src="closebutton.png" style="text-align:center;"></img>
<button onclick="document.getElementById('myImage').src='closebutton.png'">关闭</button>

<!--使用javascript改变HTML样式 -->
<p id="textsizeDemo">点击按钮改变字体大小</p>
<button type="button" onclick="document.getElementById('textsizeDemo').style.fontSize='35px'">点击我</button>

<br >
<br >
<!--使用javascript隐藏或者显示HTML元素 -->
<p id="textHide">点击按钮隐藏或者显示我</p>
<button type="button" onclick="document.getElementById('textHide').style.display='none'">隐藏</button>
<button type="button" onclick="document.getElementById('textHide').style.display='block'">显示</button>

<!-- head中的javascript -->
<h4>Head中的javascript</h4>
<p id="clickinHead">一段文字</p>
<button type="button" onclick="myFuncation()">点击我修改文字</button>

<!--body中的javascript -->
<script>
function mybodyFunction(){
 document.getElementById('clickinBody').innerHTML="文字已被修改。"
}
</script>
<p id="clickinBody">这是一段文字</p>
<button type="button" onclick="mybodyFunction()" >点击我修改文字</button>

<!--外部脚本 -->
<p id="textoutof">一个段落</p>
<button type="button" onclick="myFunctionout()">点击我</button>
<script src="outjs.js"></script>

<!-- document.write()用法 -->
<h4>white的用法</h4>
<p>1+1=</p>
<script>
document.write(1+1);
</script>

<!--在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ： -->
<h4>在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：</h4>
<button type="button" onclick="document.write(1+1)">试一试</button>

<!-- window.alert() 警告框的使用 -->
<h4>警告框的使用</h4>
<script>
window.alert("警告内容")
</script>

<!--console.log() -->
<h4>在浏览器中，您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。</h4>
<script>
console.log("内容111")
</script>

<!--JavaScript语句 -->
<h4>JavaScript语句</h4>
<p id="yuju"></p>
<script>
var x,y,z;  //语句1
x=22;
y=11;
z=x+y;

document.getElementById("yuju").innerHTML="z的值为："+z+"。"
</script>

<!--特殊数据类型 -->
<h4>特殊数据类型</h4>
<p id="dataType"></p>
<p id="dataType1"></p>
<p id="dataType2"></p>
<p id="dataType3"></p>
<p id="dataType4"></p>
<p id="dataType5"></p>
<p id="dataType6"></p>
<p id="dataType7"></p>
<p id="dataType8"></p>
<p id="dataType9"></p>
<p id="dataType10"></p>
<script>
var x=911+1+"Porsche"
var y="Porsche"+911+1
var list=["1","2","3"]
var person={
 firstName:"文阿花",
 age:"18",
 sex:"女",
 fullName:function(){
   return this.firstName+" "+this.sex;
 }
}
var name =undefined
var seconedName=null
document.getElementById('dataType').innerHTML='911+1+"Porsche"='+x
document.getElementById('dataType1').innerHTML='"Porsche"+911+1='+y
document.getElementById('dataType2').innerHTML="单双引号共存：He is called 'Bill'"
document.getElementById('dataType3').innerHTML="数组："+list
document.getElementById('dataType4').innerHTML="姓名："+person.firstName+"年纪："+person.age+"性别："+person['sex']
<!--typeof 运算符 -->
document.getElementById('dataType5').innerHTML=typeof "Bill"+typeof 3
<!--Undefined -->
document.getElementById('dataType6').innerHTML=name
<!--null -->
document.getElementById('dataType7').innerHTML=typeof seconedName
document.getElementById('dataType8').innerHTML=typeof undefined+"<br>"+typeof null+'<br>'+
                                               (null===undefined)+"<br>"+(null==undefined)+
											    '<br>'+typeof function myFuncation(){};									   
document.getElementById('dataType9').innerHTML='person.fullName='+person.fullName
document.getElementById('dataType10').innerHTML="person.fullName()="+person.fullName()

</script>

<!--函数 -->
<h4>函数的使用</h4>
<p id="functiondata"></p>
<p id="functiondata1"></p>
<script>
function myFuncationdata(p1,p2){
return p1*p2;
}
document.getElementById('functiondata').innerHTML=myFuncationdata(7,8)

document.getElementById('functiondata1').innerHTML=myFuncationdata
</script>

<!--事件 -->
<h4>事件的写法1</h4>
<p id="event"></p>
<button type="button" onclick="document.getElementById('event').innerHTML=Date()">时间是？</button>
<h4>事件的写法2</h4>
<button onclick="this.innerHTML=Date()">时间是？</button>
<h4>事件的写法3</h4>
<p id="event2"></p>
<script>
function myFuncationevent(){
  document.getElementById('event2').innerHTML=Date();
}
</script>
<button type="button" onclick="myFuncationevent()">时间是？</button>

<!--特殊字符 -->
<h4>单引号的使用</h4>
<p id="specialtext"></p>
<script>
document.getElementById("specialtext").innerHTML="It\'s a good day !"
</script>

<h4>双引号的使用</h4>
<p id="specialtext1"></p>
<script>
document.getElementById("specialtext1").innerHTML="因此中国也可以称为\"China\""
</script>

<h4>反斜杠的使用</h4>
<p id="specialtext2"></p>
<script>
document.getElementById("specialtext2").innerHTML="字符\\被称为反斜杠"
</script>

<!--字符串方法 -->
<h4>字符串的长度</h4>
<p id="stringlength"></p>
<script>
var text="1234123123123213"
document.getElementById("stringlength").innerHTML="字符串长度为："+text.length;
</script>

<h4>查找字符串中的字符串首次出现位置</h4>
<p id="stringindex"></p>
<script>
var str= "The full name of China is the People's Republic of China.";
var poi=str.indexOf("China",10);//第二个参数为搜索起始位置，可传可不传
document.getElementById("stringindex").innerHTML="返回指定文本首次出现的位置："+poi;
</script>
<p>(如果未找到对应的数据则返回-1)</p>


<h4>查找字符串中的字符串最后一次出现位置</h4>
<p id="stringindexlast"></p>
<script>
var str= "The full name of China is the People's Republic of China.";
var poi=str.lastIndexOf("China",10);//第二个参数为搜索起始位置，可传可不传 此时为从10位置开始往首部查找
document.getElementById("stringindexlast").innerHTML="返回指定文本末次出现的位置："+poi
</script>
<p>(如果未找到对应的数据则返回-1)  lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。</p>

<h4>搜索字符串中指定文本第一次出现位置</h4>
<p id="searchindex"></p>
<script>
var str = "The full name of China is the People's Republic of China.";
var pos=str.search("China");
document.getElementById("searchindex").innerHTML="指定文本第一次出现位置："+pos
</script>

<!--提取部分字符串 -->
<h4>slice()方法提取字符串</h4>
<p id="stringget"></p>
<script>
var str = "Apple, Banana, Mango";
var getstr1=str.slice(7);
var getstr=str.slice(7,13);
var backstr=str.slice(-13,-7)//如果某个参数为负，则从字符串的结尾开始计数。
document.getElementById("stringget").innerHTML="getstr1="+getstr1+"\n"+"getstr="+getstr+"\n"+"backstr="+backstr;
</script>

<h4>substring()方法(无法接受负的索引)</h4>
<p id="stringsub"></p>
<p id="stringsub1"></p>
<script>
var str = "Apple, Banana, Mango";
var getstr1=str.substring(7);
var getstr2=str.substring(7,10);
document.getElementById("stringsub").innerHTML="\"Apple, Banana, Mango\".substring(7)="+getstr1
document.getElementById("stringsub1").innerHTML="\"Apple, Banana, Mango\".substring(7,10)="+getstr2
</script>


<h4>substr()方法和slice()类似，不同之处在于第二个参数指的是截取部分的长度</h4>
<p id="stringsubstr"></p>
<p id="stringsubstr1"></p>
<script>
var str = "Apple, Banana, Mango";
var poi=str.substr(3);
var poi2=str.substr(3,2);//截取长度为2
document.getElementById("stringsubstr").innerHTML="\"Apple, Banana, Mango\".substr(3)="+poi
document.getElementById("stringsubstr1").innerHTML="\"Apple, Banana, Mango\".substr(3,2)="+poi2
</script>

<h4>replace()替换</h4>
<h4>toUpperCase()大小写替换</h4>
<h4>String.trim()()删除字符串两端的空白符</h4>

<h4>concat()连接多个字符串</h4>
<p id="concatstring"></p>
<script>
var text1="Hello";
var text2="World";
var text3="!";
document.getElementById("concatstring").innerHTML=text1.concat(" ",text2," ",text3)
</script>

</body>
</html>

运行效果请复制粘贴代码至.html文件，并拖至浏览器中

文阿花

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（一）

1、什么是JavaScript?所有的例子及学习逻辑均来自W3School，以下只是我自己学习的笔记，具体内容可直接参考JS教程JavaScript 是属于 HTML 和 Web 的编程语言,是 web 开发者必学的三种语言之一：HTML 定义网页的内容CSS 规定网页的布局JavaScript 对网页行为进行编程在 HTML 中，JavaScript 代码必须位于 < script> 与 < /script> 标签之间。旧的 JavaScript 例子也许会使用
复制链接

扫一扫