简单版js-CSDN博客

本文链接：https://blog.csdn.net/weixin_57552069/article/details/139155886

js的作用：

html是内容
css是修饰页面
js是行为动作

js的写法：

<!DOCTYPE html>
<html>
<body>
标签
<script>
js语句
</script>
</body>
</html>

js的输出

JavaScript 没有任何打印或者输出的函数得靠以下执行

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台

语法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction(){
	document.getElementById("myPar").innerHTML="你好世界！";
	document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时，两个元素会改变。</p>

</body>
</html>

Alt text

JavaScript 注释

// 这是一个单行注释

/*
这是一个多行注释
*/

变量

var a=10;
let a =10;定义一个变量
const a =10;定义一个常量

数据类型

number  ：数字型
string    ：字符型
boolean  ：布尔型
undefined ：未定义
null      ：空值
object    ：对象
symbol    ：符号

typeof 检测数据类型的

typeof "Hello" // 返回"string"
typeof 123 // 返回"number"
typeof true // 返回"boolean"
typeof x // 返回"undefined"
typeof { x: 1, y: 2 } // 返回"object"
typeof function() { ... } // 返回"function"
typeof Symbol("foo") // 返回"symbol"

数据类型转换

Number()  ：数字型
String()  ：字符型
Boolean() ：布尔型
parseInt() ：整型
parseFloat() ：浮点型

条件语句

            alert("1小于2");
        }
        else {
            alert("1大于2");
        }`

Alt text

循环语句

for循环

 for (var i = 0; i < 10; i++) {
        document.write(i);
    }

Alt text

while循环


  while (c < 5) {
            
            document.write(c);
            c++;
        }
 do...while
   var x = "", a = 0;
        do {
            x = x + "该数字为 " + a + "<br>";
            a++;
            document.write(x);
        }
        while (a < 5)

Alt text

数组

var arr = [1,2,3,4,5];
var arr = new Array(1,2,3,4,5);
var arr = new Array(5);  // 5个空元素
var arr = new Array(1,2,3,4,5);  // 5个元素

对象

对象的构成：
1.属性名（键）：属性名又称为对象的属性名，它只能是字符串类型。
2.属性值（值）：属性值就是对象的状态，它可以是任何类型的数据。
3.每个属性之间用逗号隔开。
4.属性名和属性值之间用冒号（:）连接。
5.属性必须用引号(单双都可以)引起来。
6.属性名和属性值之间用冒号（:）隔开。

    var person = {
        firstName:"John",
        lastName:"Doe",
        id:556,
    };

函数

function functionname(参数){
    // 执行代码
}

局部作用域：

只能在函数内部访问
// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

全局作用域：

在函数外定义的变量
// 此处可调用 carName 变量
var carName = "Volvo";
function myFunction() {
    // 函数内可调用 carName 变量
}
--------------------------------------------------------------------
// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

运算符

算术运算符: 加、减、乘、除、取模、递增、递减
赋值运算符 :赋值、加法赋值、减法赋值、乘法赋值、除法赋值、递增赋值、递减赋值
比较运算符:等于、不等于、大于、小于、大于或等于、小于或等于
逻辑运算符: 逻辑非、逻辑与、逻辑或

常见监听事件

onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 鼠标指针移动到指定的元素上时发生
onmouseout 用户从一个 HTML 元素上移开鼠标时发生
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onunload ：页面关闭事件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction(){
	document.getElementById("myPar").innerHTML="你好世界！";
	document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时，两个元素会改变。</p>

</body>
</html>

结果：第一代码

事件可以用于

处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性

字符串

定义一个值取2的索引的值：，输出到demo标签里面的内容
const name = “RUNOOB”;
let letter = name[2];

document.getElementById(“demo”).innerHTML = letter;

特殊字符：

’ 单引号
" 双引号
\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

字符串的属性：

constructor 返回创建字符串属性的函数
length 返回字符串的长度（最常用的属性）
prototype 允许您向对象添加属性和方法

字符串的方法：

charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

break 和 continue区别

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

undefined 和 null 的区别

共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值，例如：
var a; // a 自动被赋值为 undefined
（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用，例如：
var emps = [‘ss’,‘nn’];
emps = null; // 释放指向数组的引用