JavaScript基础语法

最新推荐文章于 2019-12-05 11:04:46 发布
最新推荐文章于 2019-12-05 11:04:46 发布
阅读量475 收藏 5
点赞数 2
分类专栏： 前端 文章标签： JavaScript js入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dream_ya/article/details/85316982
版权

一、JavaScript简介

独立的语言，浏览器具有jJavaScript解释器；JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

二、基础常识

1、代码存在形式

代码注释：（1）单行：// （2）多行：/* */

（1）HTML的Head中

<1> 直接写内容

<!--这个type可写可不写-->
<script type="text/javascript">
   alert("dream");
</script>

<2> 指定文件路径

<script src="js文件路径"></script>
（2）放在body中

PS：JS代码需要放置在body的最下面，且可以在浏览器的终端console中调试运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--内容-->
<script src="js文件路径"></script>
</body>
</html>

2、变量

name = 'dream'        ###全局变量
var name = 'dream'    ###局部变量（函数）

三、基本数据类型

1、布尔类型（小写）

==                 ###比较值相等
!=                 ###不等于
===                ###比较值和类型相等
!===               ###不等于
||                 ###或
&&                 ###且

在这里插入图片描述

2、数字

<script>
    MyAge = 23;
    MyHeight = "128";
    // 转换成float类型
    TransformFloat = parseFloat(MyHeight);
    // 转换成数字类型
    TransformInt = parseInt(MyHeight);
</script>

3、字符串(在浏览器console调试)

str1 = "dream";
str1.charAt(索引);
str1.substring(起始位置,结束位置);
str1.length   获取字符串长度

在这里插入图片描述

str1 = " dre am ";
str1.trim(str1);                ###移除两边空白
str1.trimLeft(str1);            ###移除左边空白
str1.trimRight(str1);           ###移除右边空白

在这里插入图片描述

str1 = "dream";
str1.concat(value,...);              ###拼接
str1.indexOf(string,number);         ###子序列位置
str1.lastIndexOf(string,number);     ###子序列位置
str1.slice(start,end);               ###切片
str1.toLowerCase();                  ###转换为小写
str1.toUpperCase();                  ###转换为大写
str1.split(分隔符,显示个数);         ###分割

在这里插入图片描述

4、数组

li = [1,2,3,4]            ###定义数组
li.length                 ###数组长度
li.push(元素)             ###尾部追加元素
li.pop()                  ###弹出最后一个元素
li.unshift(元素)          ###头部插入元素
li.shift()                ###移除头部元素

在这里插入图片描述

li.splice(开始,删除数量,value,...)       ###插入、删除或替换元素
	li.splice(n,0,value)               ###指定位置插入元素
	li.splice(n,1,value)               ###指定位置替换元素
	li.splice(n,1)                     ###指定位置删除元素

在这里插入图片描述

li.slice(start,end)        ###切片
li.reverse()               ###反转
li.join()                  ###将元素连接成一个字符串
li.concat(value,...)       ###连接数组
li.sort()                  ###排序

在这里插入图片描述

5、字典

d = {key:value,...}             ###定义字典

在这里插入图片描述

四、for循环

我们不难可以看出，循环时的元素是索引！！！

1、第一种方法

（1）for循环数组
li = [10,20,30,40]
for(var i in li){
	  console.log(i,li[i]);
}

在这里插入图片描述

（2）for循环字典
d = {a:1,b:2,c:3}
for(var i in d){
	  console.log(i,d[i]);
}

在这里插入图片描述

2、第二种方法

注意：此方法不支持字典的循环，字典是无序的，key也无法表示！！！

li = [10,20,30,40]
for(var i=0;i<li.length;i=i+1){
	  console.log(i,li[i])
}

在这里插入图片描述
五、条件语句

1、if条件语句

符号说明：
	==：值相等
	===：值和类型都相等
	&&：等于python中的and
	||：等于python中的or

if(条件){

}else if(条件){

}else{

}

2、switch条件语句

id='3';
switch(id){
    case '1':
        console.log(1);
        break;
    case '2':
        console.log(2);
        break;
    default:
        console.log('other');
        break;
}

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="1" onclick="Fun('1')">
<input type="button" value="2" onclick="Fun('2')">
<input type="button" value="3" onclick="Fun('3')">
<script>
    function Fun(aa) {
        switch (aa) {
            case '1':
                console.log(1);
                break;
            case '2':
                console.log(2);
                break;
            default:
                console.log(other);
                break;
        }
    }
</script>
</body>
</html>

六、函数

1、普通函数

function 函数名(x){

}

函数名(value)

2、匿名函数

### 平常写法
function 函数名(x) {
    return x+1
}
setInterval("dunc()",500);
---------------------------
### 匿名函数
setInterval(function(){
    console.log(1);
},500)

3、自执行函数

创建函数并且自动执行！！！

(function(x){
    console.log(x);
})(1)

七、定时器


var t1 = setInterval(function(){},5000);      ###5s执行一次
clearInterval(t1);                            ###清除Interval定时任务
var t2 = setInterval(function(){},5000);      ###执行到时，等待5s在执行且执行一次
clearTimeout(t2);                             ###清除Timeout定时任务

1、定时生成一个弹框

<script>
	setInterval("执行代码",间隔时间)
	 // 创建一个定时器，3S
	 setInterval("alert('dream');",3000);
</script>

2、Timeout删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="1"></div>
<input type="button" value="按钮" onclick="Fun();"/>
<script>
    function Fun() {
        document.getElementById('1').innerText = '已删除';
        //3s后自动清空
        setTimeout(function (){
            document.getElementById('1').innerText = '';
        },3000);
    }
</script>
</body>
</html>

3、生成console.log

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function fun(){
        console.log(1);
    }
    // 创建一个定时器，3S
    setInterval("fun()",3000);
</script>
</body>
</html>

在这里插入图片描述

4、实现字符循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="1">你好，JavaScript</div>
<script>
    function fun(){
        //根据ID获取标签内容
        var tag = document.getElementById('1')
        //获取标签内部内容
        var content = tag.innerText;
        
        var first = content.charAt(0)
        var other = content.substring(1,content.length)
        var newstr = other + first
        tag.innerText = newstr
    }
    // 创建一个定时器
    setInterval("fun()",300);
</script>
</body>
</html>

八、Dom选择器

1、查找标签

（1）直接查找
document.getElementById()            ###根据id回去标签
document.getElementsByName()         ###根据name属性获取标签集合
document.getElementsByClassName()    ###根据class属性获取标签集合
document.getElementsByTagName()      ###根据标签名获取标签集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="1">id:1</div>
    <input name="dream" />
    <div name="dream">name</div>
    <div class="c1">class:c1</div>
    <a>a</a>
</body>
</html>

在这里插入图片描述

（2）间接查找
parentElement              ###父节点标签元素
children                   ###索引子标签
firstElementChild          ###第一个子标签元素
lastElementChild           ###最后一个子标签元素
nextElementSibling         ###下一个兄弟标签元素
previousElementSibling     ###上一个兄弟标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div>
        <div></div>
        <div>1</div>
    </div>
</div>
<div>
    <div>
        <div></div>
        <div id="2">2</div>
    </div>
</div>
<div>
    <div>
        <div></div>
        <div>3</div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

2、操作标签

（1）文本内容操作

<1> innerText（文本）和innerHTML（全部内容）

### 获取标签的文本
标签.innerText
标签.innerHTML

### 重新赋值
标签.innerText = ""
标签.innerHTML = ""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="1">
        dream
        <a>
            <span>ya</span>
        </a>
    </div>
</body>
</html>

在这里插入图片描述

<2> value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="1">
        dream
        <a>
            <span>ya</span>
        </a>
    </div>
    <input id="2" type="text"/>
    <select id="3">
        <option value="11">四川</option>
        <option value="12">重庆</option>
        <option value="13">浙江</option>
    </select>
    <textarea id="4"></textarea>
</body>
</html>

input：

value获取当前标签中的值！！！

在这里插入图片描述
select：

获取选中的value值，selectedIndex获取index！！！

在这里插入图片描述

textarea：

value获取当前标签内的值！！！

在这里插入图片描述

<3> 搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" />

    <!--新版本的浏览器，不兼容之前的浏览器-->
    <input type="text" placeholder="请输入关键字" />
</body>
<script>
    //光标在输入框内
    function Focus() {
        var tag = document.getElementById('1');
        var val = tag.value;
        if (val == '请输入关键字'){
            tag.value = "";
        }
    }
    //光标移出输入框
    function Blur() {
        var tag = document.getElementById('1');
        var val = tag.value;
        if (val.length == 0){
            tag.value = '请输入关键字';
        }
    }
</script>
</html>
（2）样式操作

<1> className和classList

对整体操作！！！

tag.className                    ###整体操作
tag.classList.add('样式名')       ###添加指定样式
tag.classList.remove('样式名')    ###删除指定样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="1">dream</div>
</body>
</html>

在这里插入图片描述

用法：

<div onclick='fun();'>按钮</div>
<script>
    function fun(){
    
    }
</script>

eg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            top: 0;
            background-color: #b3d271;
            opacity: 0.8;
            z-index: 8;
        }
        .c2{
            position: fixed;
            width: 400px;
            height: 200px;
            background-color: bisque;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 9;
        }
    </style>
</head>
<body>
    <input type="button" value="添加" onclick="ShowHide()">
    <div id="1" class="c1 hide"></div>
    <div id="2" class="c2 hide">
        <input type="button" value="取消" onclick="InHide()"/>
    </div>
    <script>
        function ShowHide() {
            document.getElementById('1').classList.remove('hide');
            document.getElementById('2').classList.remove('hide');
        }
        function InHide() {
            document.getElementById('1').classList.add('hide');
            document.getElementById('2').classList.add('hide');
        }
    </script>
</body>
</html>

<2> .style

更加细腻的操作！！！

tag.style.方法 = ''；
eg.
    .style.color = 'blue';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="1">dream</div>
</body>
</html>

在这里插入图片描述

（3）属性操作
attributes                  ###所有属性
setAttribute(key,value)     ###设置属性
removeAttribute(key)        ###删除属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="1" style="background-color: #0f9e60;" >dream</div>
</body>
</html>

在这里插入图片描述

（4）创建标签，并添加到HTML

二种方法：1、字符串形式 2、对象方式（document.createElement）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="Add1();" value="添加1" />
    <input type="button" onclick="Add2();" value="添加2" />
    <div id="1">
        <p><input type="text" /></p>
    </div>
    <script>
        function Add1() {
            //创建标签
            var tag = "<p><input type='text' /></p>";
            //四个参数：'beforeBegin'、'afterBegin'、'beforeEnd'、'afterEnd'
            document.getElementById('1').insertAdjacentHTML('beforeEnd',tag);
        }
        function Add2() {
            //创建标签
            var tag = document.createElement('input');
            tag.setAttribute('type','text');
            tag.style.fontSize = '20px';

            //创建p标签并把input放入
            var tagP = document.createElement('p');
            tagP.appendChild(tag);
            document.getElementById('1').appendChild(tagP);
        }
    </script>
</body>
</html>
（5）提交表单

任何标签通过DOM都可以提交表单！！！

document.getElementById(表单id).submit();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="1" action="http://www.baidu.com">
        <input type="text" />
        <!--input提交方式-->
        <input type="submit" value="提交" />
        <!--其他标签通过js提交-->
        <a onclick="submitForm();">submit</a>
    </form>
    <script>
        function submitForm() {
            document.getElementById('1').submit();
        }
    </script>
</body>
</html>
（6）checkbox
### 获取值
checkbox对象.checked

### 设置值
checkbox对象.checked = true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            top: 0;
            background-color: #b3d271;
            opacity: 0.8;
            z-index: 8;
        }
        .c2{
            position: fixed;
            width: 400px;
            height: 200px;
            background-color: bisque;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 9;
        }
    </style>
</head>
<body>
<input type="button" value="添加" onclick="ShowHide()">
<input type="button" value="全选" onclick="CheckAll()">
<input type="button" value="取消" onclick="Cancel()">
<input type="button" value="反选" onclick="Reverse()">
<table border="1">
    <!--表头-->
    <thead>
        <tr>
            <th>勾选</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>

    <!--内容-->
    <tbody id="tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>dream</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>dreamya</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>DM</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

    <div id="1" class="c1 hide"></div>
    <div id="2" class="c2 hide">
        <input type="button" value="取消" onclick="InHide()"/>
    </div>
    <script>
        function ShowHide() {
            document.getElementById('1').classList.remove('hide');
            document.getElementById('2').classList.remove('hide');
        }
        function InHide() {
            document.getElementById('1').classList.add('hide');
            document.getElementById('2').classList.add('hide');
        }
        function CheckAll() {
            var tr_list = document.getElementById('tb').children;
            for(var i=0;i<tr_list.length;i++){
                var list_value = tr_list[i];
                var checkbox = list_value.children[0].children[0];
                checkbox.checked = true;
            }
        }
        function Cancel() {
            var tr_list = document.getElementById('tb').children;
            for(var i=0;i<tr_list.length;i++){
                var list_value = tr_list[i];
                var checkbox = list_value.children[0].children[0];
                checkbox.checked = false;
            }
        }
        function Reverse() {
            var tr_list = document.getElementById('tb').children;
            for(var i=0;i<tr_list.length;i++){
                var list_value = tr_list[i];
                var checkbox = list_value.children[0].children[0];
                if (checkbox.checked == true){
                    checkbox.checked = false;
                }else {
                    checkbox.checked = true;
                }
            }
        }
    </script>
</body>
</html>

目录切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            width:60px;
            background:green;
            color: antiquewhite;
        }
    </style>
</head>
<body>
<div class="item">
    <div id="1" class="header" onclick="ChangeMenu(id);">目录一</div>
    <div class="content">
        <div>内容一</div>
        <div>内容一</div>
        <div>内容一</div>
    </div>
</div>
<div class="item">
    <div id="2" class="header" onclick="ChangeMenu(id);">目录二</div>
    <div class="content hide">
        <div>内容二</div>
        <div>内容二</div>
        <div>内容二</div>
    </div>
</div>
<div class="item">
    <div id="3" class="header" onclick="ChangeMenu(id);">目录三</div>
    <div class="content hide">
        <div>内容三</div>
        <div>内容三</div>
        <div>内容三</div>
    </div>
</div>
<script>
    function ChangeMenu(id) {
        var tag = document.getElementsByClassName('item')
        for(var i=0;i<tag.length;i++){
            document.getElementsByClassName('item')[i].children[1].classList.add('hide');
        }
        var current_menu = document.getElementById(id)
        current_menu.nextElementSibling.classList.remove('hide');
    }
</script>
</body>
</html>

九、其他

1、序列化

JSON.stringify(li)        ###序列化
JSON.parse(str)           ###反序列化

在这里插入图片描述

2、转义

encodeURI()                 ###转义URI中的字符
decodeURI()                 ###解码URI中的字符
encodeURIComponent()        ###转义URI组件中的字符
decodeURIComponent()        ###解码一个URI组件中的字符
escape()                    ###转义字符串
unescape()                  ###解码字符串

在这里插入图片描述

3、eval

函数计算JavaScript字符串，并把它作为脚本代码来执行。

eval("1+2")    ###结果为3

4、时间

var d = new Date()
d.getXXX                    ###获取
d.setXXX                    ###设置

在这里插入图片描述

5、作用域

  1. 以函数为作用域（除let），和python类似
  2. 函数的作用域在函数未调用之前已经创建
  3. 函数的作用域存在作用域链，并且也是在被调用之前创建
  4. 函数内函数变量声明提前
（1）验证第一条：
function func() {
    if (1==1){
        var name = 'dream';
    }
    console.log(name);
}
func()

在这里插入图片描述

（2）验证第二条：
x = "1"
function func() {
    var x = '2';
    function func1(){
        console.log(x);
    }
    return func1;
}
var res = func()
res()

在这里插入图片描述

（3）验证第三条：
x = "1"                   //最后调用
function func() {
    var x = '2';          //在调用
    function func1(){
        var x = '3';      //最先先调用
        console.log(x);
    }
    func1()
}
func()

在这里插入图片描述

（4）验证第四条：
function func() {
    console.log(x);
    var x = '1';
}
func()

在这里插入图片描述

6、面向对象

1、this代指对象(python self)
2、创建对象时，new 函数()

function F(name) {
    this.name = name;
}
var obj = new F('dream');
obj.name

在这里插入图片描述

原型：

function F(name) {
    this.name = name;
}
F.prototype = {
        'sayName': function () {
            console.log(this.name)
        }
}
var obj = new F('dream');
obj.name
obj.sayName()

在这里插入图片描述

7、输出框和URL

（1）输出框
console.log               ###控制台输出
alert                     ###弹出框
confirm(提示信息)          ###确定框，返回值true和false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="Console" onclick="Fun();"/>
<input type="button" value="Alert" onclick="Fun1();"/>
<input type="button" value="Confirm" onclick="Fun2();"/>
<script>
    function Fun() {
        //console中能看到输出1
        console.log(1);
    }
    function Fun1() {
        alert('dream');
    }
    function Fun2() {
        //确定返回true，取消返回false
        var a = confirm('确定要删除嘛？');
        console.log(a);
    }
</script>
</body>
</html>
（2）刷新跳转URL
location.href               ###获取URL
location.href = "url"       ###重定向
location.reload()           ###重新加载

8、事件

onclick
onblur
onfocus
绑定事件二种方式：
    1、直接标签绑定 onclick=’xx()‘
    2、先获取Dom对象，然后再绑定
        document.getElementById('x').onclick
        document.getElementById('x').onfocus

1、第一种绑定方式
<input id='1' type='button' onclick='fun(this)'>
function fun(self){
    //self 当前点击的标签
}

2、第二种绑定方式
<input id='1' type='button'>
document.getElementById('1').onclick = function(){
    //this 代指当前点击的标签
}

3、第三种绑定方式
<input id="1" type="button" value="按钮" />
var tag = document.getElementById('1');
tag.addEventListener('click',function () {console.log('111');},false);
（1）Dom0写法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" width="200px">
    <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr>
    <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr>
    <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
    function t1(n) {
        var value = document.getElementsByTagName('tr')[n];
        value.style.background = 'red';
    }
    function t2(n) {
        var value = document.getElementsByTagName('tr')[n];
        value.style.background = '';
    }
</script>
</body>
</html>
（2）Dom1写法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" width="200px">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
    var value = document.getElementsByTagName('tr');
    var lenValue = value.length;
    for(var i=0;i<lenValue;i++){
        value[i].onmouseover = function() {
            //谁调用此函数等于此this，因为作用域因此要用this
            this.style.backgroundColor = 'red';
        }
        value[i].onmouseout = function() {
            //谁调用此函数等于此this
            this.style.backgroundColor = '';
        }
    }
</script>
</body>
</html>
（3）第三种写法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="1" type="button" value="按钮" />
    <script>
        var tag = document.getElementById('1');
        tag.addEventListener('click',function () {
            console.log('111');
        },false);
        tag.addEventListener('click',function () {
            console.log('222');
        },false);
    </script>
</body>
</html>
（4）事件之捕捉和冒泡
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main {
            background-color: red;
            width: 200px;
            height: 400px;
        }
        #content {
            background-color: blue;
            width: 100px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var myMain = document.getElementById('main');
        var myContent = document.getElementById('content');
        
        //点击蓝色区域：false（冒泡）:content、main   true（捕捉）：main、content
        myMain.addEventListener('click',function () {
            console.log('main');
        },true);
        myContent.addEventListener('click',function () {
            console.log('content');
        },true);
    </script>
</body>
</html>

9、词法分析

active object ===》 AO
1、形式参数
2、局部变量
3、函数声明表达式

eg.
1、形式参数：
AO.age = undefined;
AO.age = 3;
2、局部变量：
AO.age = undefined;
3、函数声明表达式：
AO.age = function()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function t1(age) {
            console.log(age);
            var age = 24;
            console.log(age);
            function age(){};
            console.log(age);
        }
        t1(3)
    </script>
</body>
</html>

结果：
ƒ age(){}
24
24
Wielun
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Javascript：基础语法。
阿甘正传
09-11 851
前言 在学习Web开发中，我们从前期的Html标签学会了如何在网页上画图，使用Css给网页标签进行布局排版之后，我们接下来就需要给网页标签设置点击事件等，来实现网页标签和用户之间的交互。 1）JavaScript语法详解：JS简介&变量。 字面量：数字和字符串 “字面量”即常量，是固定值，不可改变。看见什么，它就是什么。 简单的字面量有2种：数字、字符串。 在JS中一共有六种数据类型： ...
JavaScript的基础语法
m0_72161237的博客
05-09 2842
对于 JavaScript 认知： 1️⃣是世界上最流行的编程语言之一 2️⃣是一个脚本，通过解释器运行 3️⃣主要在客户端（浏览器）上运行，现在也可以基于 node.js 在服务器端运行 那么JavaScript 能做哪些事情呢？ 网页开发(更复杂的特效和用户交互) 网页游戏开发 服务器开发(node.js) 桌面程序开发(Electron, VSCode 就是这么来的) 手机 app 开发
javascript基础语法
难不难的博客
12-02 418
1.javascript引言 a)什么是javascript？ Javascript是一种动态网页（网页结构的变化）效果处理的技术，应用在html上 注意： I.javascript与java没有任何的关系 Ii.javascript client端技术 运行在html网页中 Iii.java是一
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
JavaScript基础语法（ppt）
05-31
JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）JavaScript基础语法（ppt）...
JavaScript基础语法 自学笔记
10-20
在JavaScript基础语法中，以下几个关键概念是学习者必须掌握的： 1. **变量（Variables）**：在JavaScript中，变量用于存储数据。声明变量使用`var`、`let`或`const`关键字。`var`是老式用法，而`let`和`const`是...
JavaScript基础语法【001】
weixin_42336546的博客
12-05 8378
JavaScript基础语法 HTML ：标记语言 JavaScript ：编程语言 序言 JavaScript发展历史（JS） 1. 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入...
javascript 基础语法
最新发布
08-29
JavaScript基础语法包括数据类型、运算符、选择结构和循环结构。在JavaScript中，所有的类型都是用var关键字来修饰，但实际中还是有类型区分的。常见的数据类型包括字符串、数字、布尔值、对象和数组等。 运算符用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wielun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值