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面向对象

相关文章
|
2月前
|
JavaScript 前端开发 网络协议
​Node.js 教程(一) 基本概念与基本使用
​Node.js 教程(一) 基本概念与基本使用
|
3月前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
92 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
3月前
|
JavaScript 前端开发
手把手教你学会js的原型与原型链,猴子都能看懂的教程
手把手教你学会js的原型与原型链,猴子都能看懂的教程
|
4月前
|
开发框架 JSON JavaScript
Node.js教程-express框架
Node.js教程-express框架
39 1
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript的数组教程(最详细,更新至es6新语法)
JavaScript的数组教程(最详细,更新至es6新语法)
|
2月前
|
域名解析 JavaScript 关系型数据库
使用宝塔面板安装wiki.js详细教程
使用宝塔面板安装wiki.js详细教程
|
3月前
|
前端开发 JavaScript 容器
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
42 1
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
|
3月前
|
JavaScript Ubuntu 前端开发
百度搜索:蓝易云【ubuntu安装开发javascript ubuntu script教程】
现在,你已经在Ubuntu上成功安装了JavaScript开发环境,可以开始编写和运行JavaScript代码了。注意,在编写代码之前,建议先创建一个项目文件夹,并在其中初始化npm,这样你可以管理项目的依赖项和配置。
33 5
|
3月前
|
JavaScript 关系型数据库 MySQL
百度搜索:蓝易云【Node.js写接口连接MySQL数据库教程】
现在,你的Node.js应用已经启动,可以通过访问 `http://localhost:3000/users`来获取所有用户的信息。注意替换上述代码中的数据库连接信息为你自己的实际数据。
47 0
|
3月前
|
JavaScript 前端开发
【JavaScript保姆级教程】switch分支与while循环
【JavaScript保姆级教程】switch分支与while循环
【JavaScript保姆级教程】switch分支与while循环