JS基础篇之简介与数据类型_function greet() { document.write ('hello everybod-优快云博客

本文档详细介绍了JavaScript的基本语法，包括HTML与JS的结合方式、变量声明与使用、字符串操作、条件判断与循环，以及对象和函数的定义与调用。通过实际代码示例，展示了如何在网页中嵌入JavaScript代码，实现页面元素的动态交互，如按钮点击事件的响应等。

之前做实验已经用过js，以下是我根据自身情况记录的学习网课的笔记。

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="index.js">
    <script>
        function f1() {
            alert("hello");
        }
    </script>
    <script src="index.js"></script>
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <button type="button" name="button" onclick="f1()">Click Me!</button>
        <button type="button" name="button" onclick="f2()">Click Me!</button>
        <button type="button" name="button" onclick="f3()">Click Me!</button>
        <div id="nav"></div>
        <!-- Unicode统一编码双字节16位 大小写敏感 -->
        <script>
        var name="Mandy";
        var 姓名="陈家凤";
        document.write("</br>"+name+"</br>"+姓名);
        var to=name+姓名;
        document.write("</br>"+to+"</br>");
        console.log("sas");
        // 字面量/直接量 就是给变量赋值的值
        var a=1;
        var b=0.2;
        var pi=3.14;
        var x=true;
        var arr=[1,2,3,4];
        var point={a1:1,a2:2};
        point.a1;
        point["a2"];
        //分号可省略
        //字符串字面量 转义字符
        var str1="Hello World";
        var str2='Hello World';
        var str3="Hello 'World'";
        var str4='Hello "World"';
        var str5="\'Hello\"World\nchenjiafeng\t!";
        document.write("<br>"+str1+"<br>"+str2+"<br>"+str3+"<br>"+str4+"<br>"+str5);
        //字符串的使用
        var len=str1.length;
        var msg=str1+","+str2;
        //charAt()查看哪个位置的索引
        document.write("<br>"+len+"<br>"+str1.charAt(0));
        for(i=0;i<str1.length;i++){
            document.write("<br>"+str1[i]);
        }
        //substring(2,5)子字符串，包含前边，不包含后边 slice()一样
        document.write("<br>"+str1.substring(2,5));
        document.write("<br>"+str1.slice(2,5));
        //indexOf()输出索引的位置
        document.write("<br>"+str1.indexOf("e"));
        // LastIndexOf()最后出现的位置
        document.write("<br>"+str1.lastIndexOf("l"));
        // split(",")以逗号分隔开
        var str6="name,age,phone";
        document.write("<br>"+str6.split(","));
        // null和undefined  null：不存在 undefined：存在但是没有初始化
        if(document.getElementById("na")==null){
            document.write("<br>"+"div不存在");
        }else{
            document.write("<br>"+"div存在");
        }
        var q;//没有初始化
        console.log(q);
        //对象
        var per={
            name:"tom",
            age:"2",
            msg:function(username){
                return "hello"+username;
            }
        }
        document.write(per.age);
        document.write(per.msg("cjf"));
        //对象的引用
        var per2=per;
        per.age=20;
        document.write("<br>"+per.age);
        document.write("<br>"+per2.age);//注意：两个结果是一样的
        </script>
    </body>
    
</html>

index.js

function f2(){
    alert("chenjiafeng");
}
function f3(){
    document.write("happyhappy!");
}