JavaScript黑马教程

什么是JavaScript?

JavaScript(简称JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的,它能使网页可交互。

JavaScrpt和Java是完全不同的语言,不论是概念还是设计。但是基础语法类似。

1、JavaScrpt的引入方式

方式一:内部脚本(将JS代码定义在HTML页面中)

  • JavaScript代码必须位于标签之间
  • 在HTML文档中,可以在任意地方,放置任意数量的
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页制作title>     
head>
<body>
body>

   
    <script>
        alert("Hello JS");<!-- 写入警告框输出 -->
    script>

html>

方式二:外部脚本(将JS代码定义在外部JS文件中,然后引入到HTML页面中)

  • 外部JS文件中,只包含JS代码,不包含
<script src="js/demo.js">script>

demo.js文件中的代码:

alert("Hello JS");

2、JS基础语法

书写语法

  • 区分大小写:与Java一样,变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

  • 注释:

    单行注释://注释内容
    多行注释:/*注释内容*/
    
  • 大括号表示代码块

    //判断
    if(count==3){
       alert(count);
    }
    

输出语句

  • 使用window.alert()写入警告框

  • document.write()使用写入HTML输出

  • 使用console.log()写入浏览器控制台

    <script>
    window.alert("Hello JavaScript");//浏览器弹出警告框
        
    document.write("Hello JavaScript");//写入HTML,在浏览器展示
        
    console.log("Hello JavaScript");//写入浏览器控制台
    script>
    

变量

  • Javascript中用var关键字(variable的缩写)来声明变量。
  • JavaScript是一门弱类型语言,变量可以存放不同类型的值
  • 变量名需要遵循如下规则:
    • 组成字符可以是任何字母、数字、下划线或美元符号
    • 数字不能开头
    • 建议使用驼峰命名
//var定义变量
var a=20;
a="张三";

//特点1:作用域比较大,全局变量

//特点2:可以重复定义的
注意事项
  • ECMAScript6新增了let关键字来定义变量。它的用法类似于var,但是所声明的变量,只在let关键字所在的代码块内有效,且不允许重复声明。
  • ECMAScript6新增了const关键字,用来声明一个只读的常量。一旦声明,常量的值就不能改变。

数据类型(JavaScript中分为原始类型和引用类型)

原始类型:
  • number:数字(整数、小数、NaN(Not a Number))
  • string:字符串,单双引号皆可
  • boolean:布尔。true,false
  • null:对象为空
  • undefined:当声明的变量未初始化时,该变量的默认值是undefined

对变量或值调用typeof运算符将返回下列值之一:(使用typeof运算符可以获取数据类型)

  • undefined-如果变量是undefined类型的

  • booleann-如果变量是Boolean类型的

  • number-如果变量是number类型的

  • string-如果变量是string类型的

  • object-如果变量是一种引用类型或Null类型的

**注释:**为什么typeof运算符对于那null值会返回"object"。这实际上是JavaScript最初实现中的一个错误,然后被ECMAscript沿用了。现在,null被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

引用类型:

引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。

运算符

  • 算数运算符:+,-,*,/,%,++,- -
  • 赋值运算符:=,+=,-=,*=,/=,%=
  • 比较运算符:>,<,>=,<=,!=,,=
  • 逻辑运算符:&&,||,!
  • 三元运算符:条件表达式?true_value:false_value

注:==会进行类型转换,===不会进行类型转换

var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true

类型转换

  • 字符串类型转为数字:

    • 将字符串字面值转为数字。如果字面值不是数字,则转为NaN。
  • 其他类型转为boolean:

    • Number:0和NaN为false,其他均转为true。
    • String:空字符串为false,其他均转为true。
    • Null和undefined:均转为false。

流程控制语句

  • if…else if…else…
  • switch
  • for
  • while
  • do…while

函数

  • 介绍:函数(方法)是被设计为执行特定任务的代码块。

  • 定义:JavaScript函数通过function关键字进行定义,语法为:

    function functionName(参数一,参数二…){
    //要执行的代码
    }
    
    //例如:(定义)
    function add(a,b){
        return a+b;
    }
    
  • 注意:

    • 形式参数不需要类型。因为JavaScript是弱类型语言
    • 返回值也不需要定义类型,可以在函数内部直接使用return返回即可
  • 调用:函数名称(实际参数列表)

    //调用
    var result=add(10,20);
    alert(result);
    
  • 函数定义方式二:

    var functionNamee=function(参数一,参数二…){
    //要执行的代码
    }
    
    //例如:(定义)
    var add=function(a,b){
        return a+b;
    }
    
    //调用
    var result=add(10,20);
    alert(result);
    

JS对象

  • Array

    • JavaScript中Array对象用于定义数组

    • 定义

      var 变量名=new Array{元素列表};//方式一     var arr = new Array(1,2,3,4);
      var 变量名=[元素列表];//方式二              var arr = [1,2,3,4];
      
    • 访问

      arr[索引]=;   arr[10]="hello";//特点:长度可变,类型可变
      

    注意事项:JavaScript中的数组相当于Java中的集合,数组的长度是可变的,而JavaScript是弱类型,所以可以存储任意类型的数据。

    属性 描述
    length 设置或返回数组中的元素
    方法 描述
    forEach() 遍历数组中的每个有值的元素,并调用一次传入的函数
    push() 将新元素添加到数组的末尾,并返回新的长度
    splice() 从数组中删除元素
  • String

    • String字符串对象的创建方式有两种:

      var 变量名=new String("…");  var str=new String("Hello String");//方式一 
      var 变量名="…";  var str="Hello String";  var str='Hello String'//方式二
      
      属性 描述
      length 字符串的长度
      方法 描述
      charAt() 返回在指定位置的字符
      indexof() 检索字符串
      trim() 去除字符串两边的空格
      substring() 提取字符串中两个指定的索引号之间的字符
  • JSON

    介绍JSON之前先来了解一下JavaScript中的自定义对象

    • 定义格式:

      var 对象名 = {                 var user = {                              var user = {
      属性名1:属性值1,                    name:"Tom",                               name:"Tom",
      属性名2:属性值2,                    age:20,                                   age:20, 
      属性名3:属性值3,                    gender:"male",                            gender:"male",
      函数名称:function(形参列表){}        eat:function(){ alert("用膳~"); }          eat(){ alert("用膳~"); }
      };                                };                                        }; //方法可简化             
      
    • 调用格式:

      对象名.属性名;                       console.log(user.name);
      对象名.函数名();                     user.eat();
      
    • JSON-介绍

    • 概念:JavaScript Object Notation,JavaScript对象标记法。

    • JSON是通过JavaScrip对象标记法书写的文本

    • 由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输。

      • {                           {
             name:"Tom",                "name":"Tom", 
             age:20,                    "age":20,
             gender:"male",             "gender":"male",
        }//JS对象                     }//JSON字符串
        
    • JSON-基础语法

    • 定义

      var 变量名 = '{"key1":value1,"key2":value2}';
      var userStr = '{"name":"Jerry","age":"18","addr":["北京","上海","西安"]}'
      
    • JSON字符串转为JS对象

      var jsobject = JSON.parsee(userStr);
      
    • JS对象转为JSON字符串

      var jsonStr = JSON.stringify(jsobject);
      
  • BOM

    • 概念:Browser Object Model 浏览器对象模型,允许JavaScript与浏览器对话,JavaScript将浏览器的各个组成部分封装为对象。

    • 组成:

      • window:浏览器窗口对象

        • 获取:直接使用window,其中window.可以省略。

          window.alert("Hello Window");      alert("Hello Window");
          
        • 属性:

          • history:对history对象的只读引用。请参阅History对象(按下Ctrl点击)
          • location:用于窗口或框架的Location对象。请参阅Location对象
          • navigator:对Navigator对象的只读引用。请参阅Navigator对象
        • 方法:

          • alert():显示带有一段消息和一个确认按钮的警告框。
          • confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
          • setIntrval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
          • stTimeout():在指定的毫秒数后调用函数或计算表达式。
      • Navigator:浏览器对象

      • Screen:屏幕对象

      • History:历史记录对象

      • Location:地址栏对象

        • 获取:使用window.location获取,其中window.可以省略。

          window.location.属性;     location.属性;
          
        • 属性:href:设置或返回完整的URL。

          location.href = "https://www.itcast.cn"; 
          
  • DOM(DOM是W3C(万维网联盟)的标准,定义了访问HTML和XML文档的标准,分为3个不同的部分)

    • 概念:Documeeent Obbjeect Model,文档对象模型。

    • 将标记语言的各个组成部分封装为对应的对象。

      1. Core DOM-所有文档类型的标准模型
        • Documnt:整个文档对象
        • Element:元素对象
        • Attribute:属性对象
        • Text:文本对象
        • Comment:注释对象
      2. XML DOM-XML 文档的标准模型
      3. HTML DOM-HTML 文档的标准模型
        • Image:
        • Button:
    • JavaScript通过DOM,就能对HTML进行操作:

      • 改变HTML元素的内容

      • 改变HTML元素的样式(CSS)

      • 对HTML DOM事件作出反应

      • 添加和删除HTML元素

  • 在DOM操作当中,如何获取元素对象:

  • HTML中的Element对象可以通过document对象获取,而Document对象是通过window对象获取的。

  • Document对象中提供了以下获取Element元素对象的函数:

    1. 根据id属性值获取,返回单个Element对象

      var h1 = document.getElementByID('h1');
      
    2. 根据标签名称获取,返回Element对象数组

      var divs = document.getElementsByTagName('div');
      
    3. 根据name属性值获取,返回Element对象数组

      var hobbys = documeent.getElementsByName('hobby');
      
    4. 根据class属性值获取,返回Element对象数组

      var class = document.getElementsByClassName('cls');
      

事件监听

  • 事件:HTML事件是发生在HTML元素上的“事情”。比如:
    • 按钮被点击
    • 鼠标移动到元素上
    • 按下键盘按键
  • 事件监听:JavaScript可以在事件被侦测到时执行代码
事件绑定

方式一:通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">

<scrpt>
    function on(){
       alert('我被点击了!');
    }
scrpt>

方式二:通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">

<scrpt>
    document.getElmentByID('btn').οnclick=function(){
       alert('我被点击了!');
    }
scrpt>
常见事件
事件名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开

你可能感兴趣的:(javascript,开发语言,ecmascript,前端)