01 JavaScript基础教程-阿里云开发者社区

开发者社区> 降龙十八腿> 正文

01 JavaScript基础教程

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hxdeng/article/details/52228498 1. JavaScript基础 1.1 JavaScript介绍 JavaScript 是互联网上最流行额脚本语言;JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hxdeng/article/details/52228498

1. JavaScript基础

1.1 JavaScript介绍

    JavaScript 是互联网上最流行额脚本语言;JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能
    在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
    为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。

1.2 JavaScript 用法

HTML中脚本必须位于<script type="text/script"></script>标签之间,脚本可被放置在body中

范例

1.3 JavaScript输出

document.write("Hell Word!");    
document.write("<h1>沁园春·雪</h1>");  
document.getElementById();

1.4 JavaScript语法

1. JavaScript语句向浏览器发出的命名。语句的作用是告诉浏览器该做什么。
2. JavaScript按照编写的顺序执行
3. 标识符   
    JavaScript的标识符必须以字母,下划线或美元符号开始。
4. JavaScript对大小写敏感
5. 空格
    空格对JavaScript没影响,他的代码结束通过行结束
6. 关键字
    ![这里写图片描述](https://img-blog.csdn.net/20160816002930699)
7. 注释
    单行注释   //   
    多行注释   /*  */

1.5 变量数据类型

1. 变量通过var声明[JS是一门弱语言,所有的变量都是通过var声明]
2. 数据类型   
    2.1 字符串(String2.2 数字(Number2.3 布尔(boolean)
    2.4 数组(Array)
    2.5 对象(Object2.6 空(null2.7 未定义
注意:可以通过赋值null来清除变量

2. JS语法详解

1. 运算符
    1.1 算数运算符
        +,-,*,/,%,++,--

    1.2 赋值运算符
        =

    1.3 拼接运算符
        +

    1.4 关系运算符
        > , < , == , != , >= , <= , ===

    注意:关系运算符返回的是一个boolean类型的值;===个等号也是比较是否相等,只有数据类型相同的时候才返回true

    1.5 逻辑运算符
        && , || , !

    1.6 条件运算符 
        ? :
2. 条件语句
    2.1 if

    2.2 if...else

    2.3 switch

3. 循环语句
    3.1 for

    3.2 while

    3.2 do...while

4. 跳转语句
    4.1 break
    4.2 continut
    4.3 return

3. JavaScript函数

    alert();函数

    1. 函数语法
        function 方法名称(参数列表){
            //代码块
        }
    注意:JavaScript对大小十分敏感,所以在这里的function必须全部小写。在函数调用的时候,也必须按照函数的相同名称来调用函数。
    2. 函数的调用
        2.1 在JavaScript中调用
        直接通过调用函数名称调用

        2.2 在HTML标签中调用
        通过HTML的事件调用
    3. 带参数的函数
        function demo(a,b){
            var sum = a + b;
            alert(sum);
        }
        注意:JS中的参数没有数据类型这一说法。调用的时候也需要按照参数的顺序赋值;
    4. 全局变量和局部变量
        在函数中申明的变量是局部变量,在函数外申明的变量就是全局变量

4. JavaScript异常处理和事件处理,事件介绍

    1. 异常处理
        try{

        }catch(err){

        }
    2. Throw语句
        可以通过Throw语句创建自定义的错误
        <form>
            <input type="text" id="txt" />
            <input type="button" onoclick="demo();" />
        </form>
        function demo(){
           try{
                var e = document.getElementById("txt").value;
                if(e == ""){
                    throw "请输入数据";
                }
           }catch(err){
                alert(err);
           }
        }
    3. 事件
事件 描述
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移除事件
onChange 文本内容修改事件
onSelect 文本框选中事件
onFocus 光标聚集事件、获得焦点事件
onBlur 移开光标事件、失去焦点事件
onLoad 网页加载事件
onUnload 关闭网页事件

5. JavaScript DOM对象

1. HTML DOM 
    当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)
                            Document
                                |
                            Root ELement/html
            Elelent/head                                Element/body
            Element/title    Attribut:href<---Element/a           Element/h1
            Text-MyNewHtml                      Text:MyLink         Text/MyHeader
2. DOM操作HTML
    2.1 改变HTML输出流(document.write())
    注意:绝对不要在文档紧挨在完成之后使用document.write()。这会覆盖该文档
    2.2 寻找元素
        通过ID找到HTML元素
        通过标签名找到HTML元素
    2.3. 改变HTML内容
        使用innerHTML
3. DOM 操作CSS
    3.1 通过DOM 对象改变CSS
    语法:document.getElementById(id).style.property=new style;

    范例:document.getElementById("div1").style.color="red";
4.  添加句柄和移除句柄
    document.getElementById().addEventListener("click",function(){

    });
    document.getElementById().removeEventListener("click",方法名);
5. 带返回值的函数
    1. 返回值:有的时候需要将函数的值返回给调用他的地方;可以通过return语句实现
    注意:在使用return语句的时候,执行了return语句函数就会停止,后续的代码就不在执行,同时返回值; 

6. JavaScript内置对象


7. JavaScript DOM对象控制HTML元素


8. JavaScript 浏览器对象


9. JavaScript 瀑布流


10. JavaScript面向对象详解


11. JavaScript正则表达式


12. JavaScript面向对象

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9765 0
JavaScript基础知识
一、JavaScript属性操作 1、鼠标事件有如下这些: onclick 鼠标点击;onmouseover 鼠标移入;onmouseout 鼠标移开;onmousedown 鼠标按下 ;onmouseup 鼠标抬起;onmousemove 鼠标移动。
837 0
JavaScript基础之六——内置对象(一)
JavaScript基础之六——内置对象
9 0
全栈必备 JavaScript基础
版权声明:本文为半吊子子全栈工匠(wireless_com,同公众号)原创文章,未经允许不得转载。 https://blog.csdn.net/wireless_com/article/details/69055330 JavaScript 来了 喔家ArchiSelf 1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业。
963 0
JavaScript基础之六——内置对象(二)
JavaScript基础之六——内置对象
9 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13489 0
JavaScript基础(二)变量
变量 变量的声明和初始化 var number; // 变量的声明,没有赋值 var name = "Daotin"; // 变量的初始化 命名规则(驼峰命名) 变量命名必须以字母或是**下标符号”_”或者”$”**为开头。
1026 0
JavaScript基础(三)流程控制
流程控制 switch switch底层用的是 === 比较。 参考链接:http://www.cnblogs.com/codetker/p/4680996.html switch ("111"){ case 111: alert(111); break;...
668 0
22
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载