JS(JavaScript)-基础

1. 介绍：

　　JavaScript 语言主要是 完成页面的数据验证，因此运行在客户端，需运用浏览器来解析执行JavaScript代码。

• • 　　ECMAScript是JS的一个标准。
  • 　　一个完整的JS是由ECMAScript，DOM(文档对象模型)，Bom(浏览器对象模型)组成的。
  • 　　JS是弱类型（类型可变）Java是强类型。

 

2. 特点：

1.  JS是脚本语言。
2.  JS是解释型语言，根据代码顺序逐一解释，其中某一行有报错，JS就会卡在此处无法进行下一步。
3.  JS是一种安全性语言，具有web安全特性不允许访问本地硬盘，也不允许对网络文件进行修改，只能通过浏览器进行浏览或者同动态交互。
4.  跨平台性，

　　

3. 注释： 

• •  单行注释  // 
  •  多行注释  /* */ 

4. 嵌入 JS 代码三种方式：

 

　　1. 内部引入：<script type=" text / javascript " > alert() </script>

　　2. 外部：<script  type=" text / javascript " src="./ 。。。.js"></script>

 

　　 代码：  <script src="../JS.css/js.css"></script> 

　　3. HTML行内样式：<a href="Javascript：alert('输出语句')"></a>

5. 输出工具：

　　　　①输出弹窗：弹出一条带有指定消息和一个确定按钮的警告框。

　　　　语法：alert();

　　　　　　三个作用：

• • • 　弹出框效果。
    • 　提示作用。
    • 　排错的作用。

代码： <script> alert("你好！"); </script> 

视图：

 

页面、文档输出一段内容，可识别标签。

　　　　　② 输出到页面。

　　　　　　语法：document.write("参数...");

　　　　　　document.write() 方法将内容写到HTML文档中。此功能可用于写入文本和HTML

代码： <script> document.write("<h2>页面：你好！</h2>"); </script> 

视图：

　　　　

 

 

　　　　　③ 控制台输出
　　　　　　　　console：向控制台输出内容（排错用）、提示-报错(网页内)　　　　

　　　　　　　　　　　　js可以引入文档中的任何区域，js都可以正确执行。

　　　　　　　　　　　　js通常写在head区域或者body区域。

代码： <script> console.log("日志信息："); </script> 

视图：(页面 F12)

　　　　

• js可以引入文档中的任何区域，js都可以正确执行。
• js通常写在head区域或者body区域。

 

6. Dom(树的)阻塞：

　　　　JS对DOM树的阻塞。　

　　　　 　　DOM:js操作网页的接口，全称为“文档对象模型”(Document ObjectModel)。可以简单理解成页面中的元素。

　　　　　　DOM树:元素和元素之间的关系,可以简单理解成页面中的元素。　　

 

　　　　js的执行会阻塞页面结构的加载,此时DOM树是不完整的，这样在调用一些js代码时就可能报错.

　　　　　　问题：JS执行会阻塞页面结构的加载。
　　　　　　解决：所有JS代码放于body区域最后。

代码： <p id="p-p">可以随便换color哦！</p> <script> document.getElementById("p-p").style.color = "green"; </script> 

视图：

　　　　

 

 

7. 变量：

　　　　　　变量：从字面上看，变量是可变的的量；从编程角度讲，变量是用于存储数据的容器。

 

　　　　　注：JS拥有动态类型。意味着相同的变量可用作不同类型。可多次赋值，后的赋值会覆盖前面的值。

 

　　　　　　注：变量不仅可存放具体值，还可以存放运算结果。

代码：

 <script>
        var a = 1;  // 值
        var b = 10;
        var c = a + b;  // 运算
        alert(c);  // 此时，输出 a+b 与 c 是一样的。
    </script>

视图：

　　

 

8. JS基本语法：

• 　 严格区分大小写。
•     以分号结尾。
•     命名规范：建议--驼峰命名（不可为系统关键字、最好有意义、不可数字开头）

 

9. JS数据类型：

• Number-数值类型
• String-字符串
• Boolean-布尔
• array-数组 
• Object-对象类型。
• Null-空。
• Undefined-未定义。

• 面：Undefined-空变量：没有值。例：var a;为空。
• 试：空对象指针。 例：var b = null;有值但为空。

代码：

<script>
        var a = 10;  // number:数值类型

        var b = "你好，JS！"    // String:字符串
        var b1 = "10";    // String:字符串

        var c = 1<2<3;    // Boolean:布尔 false&true

        var d;  // Undefined-未定义——没有值

        var e = null;  // 空对象指针

        var array = [1, 2, 3]    // 数组。可以用下标输出。
        alert(array[1]);         // 下标从 0 开始

        var object = {name:"我真帅！", age:'18'};   // Object 
        alert(object.name + object.age);   // 想都输出，用 + 连接


        alert(typeof(c));  // 查询 变量c 类型 --> Boolean布尔
    </script>

 

视图：　　　　　　　　　　Object　　　　　　　　　　　　　　　　　　　　　　　　查询变量 c 的数据类型　　　　

　　　　

 

10. 获取变量数据类型

　　typeof: 可使用typeof(变量名) 查询数据类型。如上:

 

 

---