JavaScript基础语法及快速实现

小库抢板12

已于 2022-10-14 20:10:47 修改

阅读量217

点赞数

文章标签： javascript 前端开发语言

于 2022-08-11 16:32:35 首次发布

本文链接：https://blog.csdn.net/m0_51663233/article/details/126288182

版权

JavaScript基础语法及快速实现

文章目录

JavaScript基础语法及快速实现

1. 输出

JavaScript 可以通过不同的方式来输出数据：

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

四种案例同时实现

<!DOCTYPE html>
<html>
<body>

<h1>标题</h1>
<p>段落。</p>
<p id="demo">我的第一个段落</p>
<button onclick="myFunction()">点我</button>

<script>
    window.alert("alert：5+6=" + 5 + 6);//警告
    document.getElementById("demo").innerHTML = "段落已修改。";
    document.write(Date());
    function myFunction() {
        document.write("点击之后");
    }
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);	//输出到console控制台
</script>

</body>
</html>

2. 语法

2.1 字面量

整数、小数、科学技术

3.14
1001
123e5

单引号或双引号字符串

"Stephen Curry"
'Stephen Curry'

计算：

5 + 6
5 * 10

数组：

[40, 100, 1, 5, 25, 10]

对象：

{firstName:"Stephen", lastName:"Curry", age:34, eyeColor:"blue"}

函数：

function myFunction(a, b) {
	return a * b;
    }

变量赋值：

var x, length
x = 5
length = 6

3. 注释

// 或 /* */

4. 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

数据转换

int转string

var a=2;
a.toString();

Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值（略)

5. 对象

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>
<script>
    var person ={
        firstName:"Stephen", lastName:"Curry", age:34, eyeColor:"blue"
    }
    document.getElementById("demo").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁.";
</script>

</body>
</html>

访问对象属性

person.lastName 或 person[“firstName”]

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>
<script>
    var person ={
        firstName:"Stephen", lastName:"Curry", age:34, eyeColor:"blue"
    }
    document.getElementById("demo").innerHTML =
	person.lastName + "  " + person["firstName"];
</script>

</body>
</html>

访问对象方法

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

该实例访问了 person 对象的 fullName() 方法:

<!DOCTYPE html>
<html>
<body>
    <p id="demo"></p>
<script>
    var person ={
        firstName:"Stephen", lastName:"Curry", age:34, eyeColor:"blue",
        fullName : function() 
        {
        return this.firstName + " " + this.lastName;
        }
    }
    document.getElementById("demo").innerHTML =
    person.fullName();
</script>

</body>
</html>

6. 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function *functionname*()
{
  *// 执行代码*
}

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

7. 循环

7.1 switch

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="txt"/>
    <button onclick="myFunction()">获取~</button>
    <p id="demo" ></p>
<script>
function myFunction() {
    var str = document.getElementById("txt").value;
    var x="s";

    console.log(str);
    switch (str) {
        case "0":
            x = "今天是星期日";
            break;
        case "1":
            x = "今天是星期一";
            break;
        case "2":
            x = "今天是星期二";
            break;
        case "3":
            x = "今天是星期三";
            break;
        case "4":
            x = "今天是星期四";
            break;
        case "5":
            x = "今天是星期五";
            break;
        case "6":
            x = "今天是星期六";
            break;
    }
    console.log(x);
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

7.2 for

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="txt"/>
    <button onclick="myFunction()">~get</button>
    <p id="demo" ></p>
<script>
function myFunction() {
    var a="";
    a.toString();
    for (var i=0;i<7;i++){
       a=a+i.toString();
    }
    document.getElementById("demo").innerHTML = a;
}
</script>

</body>
</html>

7.3 whilie

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="txt"/>
    <button onclick="myFunction()">~get</button>
    <p id="demo" ></p>
<script>
function myFunction() {
    var a="a";
    console.log(a);

    var i =0;
    while(i<9){
       a=a+" "+i.toString();
       i++;
    }
    document.getElementById("demo").innerHTML = a;
}
</script>

</body>
</html>

8. 正则表达式

使用单个字符串来描述
匹配一系列符合某个句法规则的字符串搜索模式。

语法

/正则表达式主体/修饰符(可选)

修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

8.1 search() 方法使用正则表达式

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="txt" placeholder="Input your word"/>
    <button onclick="myFunction()">~get</button>
    <p id="demo" ></p>
<script>
function myFunction() {
    var S="";
    var txt= document.getElementById("txt").value;
    console.log(txt);
    var ca= txt.search("my");//    var ca= txt.search(/my/i);
    document.getElementById("demo").innerHTML="\"my\" is in "+ca;
}
</script>

</body>
</html>

8.2 replace() 方法

<!DOCTYPE html>
<html>
<body>
<input type="text" id="txt" placeholder="Input your word"/>
<button onclick="myFunction()">~get</button>
<p id="demo" ></p>
<script>
    function myFunction() {
        var S="";
        var txt= document.getElementById("txt").value;
        console.log(txt);
        var ca= txt.replace(/my/i,"yout");//    var ca= txt.replace("my","yout");
        document.getElementById("demo").innerHTML=ca;
    }
</script>

</body>
</html>