JavaScript

最新推荐文章于 2024-10-22 17:37:15 发布

原创最新推荐文章于 2024-10-22 17:37:15 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了JavaScript的基础语法、面向对象、DOM与BOM等核心概念，并通过实例展示了如何运用JavaScript实现网页动态行为。从变量、数据类型到函数、流程控制，全方位揭示JavaScript的编程魅力。

JavaScript

 语法基础

 面向对象

 DOM、BOM

什么是JavaScript

HTML：制作网页，数据和结构
CSS：控制网页的表现形式和效果
JavaScript：提供网页的动态行为

JavaScript完整定义：由事件驱动的基于对象的客户端脚本语言
脚本语言：具备编程语言的特点，不能独立运行，必须嵌入到其他语言环境中进行运行
客户端：JavaScript由浏览器解析执行
基于对象：不完全面向对象的语言，基于对象的语言
事件驱动：

Hello World

welcome.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题</title>
    <script>
        window.alert("Welcome1");
    </script>
    <script src="welcome.js"></script>
</head>
<body onload="window.alert('Welcome2')">
    <h1>Js Hello World</h1>
</body>
</html>

welcome.js

    window.alert("Welcome3");

JavaScript语法

变量和数据类型

变量：弱类型语言

[var] 变量名

数据类型：

数值型
var num = 100
var sal = 500
字符串
var str = “abc”
var str = ‘abc’
布尔类型
var flag = true
undefine类型
访问未定义属性
变量定义未赋值
```
PS：访问未定义变量，出现语法错误
```

JavaScript中的函数

function fun1(){
    var a = 10;
    var b = 20;
    return a+b;
}

函数的参数问题

function fun1(a,b,c){
    alter(a);
}
function fun2(){
    fun1(10);
}
function fun3(){
    fun1(10,10,10,10,10);
}

函数的调用

function fun4(){
    var obj1 = func2;       //获取函数本身（引用）
    alert(obj1);

    var obj2 = func2();     //调用函数
    alert(obj2);
}

流程控制

if语句

if() {}
if() … else

if() … else if() …else {}

JS中，if判断0，null，undefined，false都表示false

Switch语句

switch(){
    case 条件1： ... break;
    case 条件2： ... break;
}

function fun(val){
    switch(val){
    case true:       alert(val); break;
    case "str":      alert(val); break;
    case 10:         alert(val); break;
    case undefined:  alert(val); break;
    }
}