JavaWeb-JS

JavaWeb-JS

码农世界 2024-05-27 前端 69 次浏览 0个评论

目录

学习重点

什么是 JavaScript?

Web标准

JS的引入方式

JS的基本语法

JS的函数

JS的对象

JS事件监听

学习重点

js 引入方式 js 基础语法 js 函数 js 对象 js 事件监听

什么是 JavaScript?

Web标准

        

Web 标准也称为网页标准 ，由一系列的标准组成，大部分由 W3C （ W orld W ide W eb C onsortium ， 万维网联盟 ）负责制定。 三个组成部分： HTML ：负责网页的基本结构（页面元素和内容）。 CSS ：负责网页的表现效果（页面元素的外观、位置等页面样式，如：颜色、大小等）。 JavaScript ：负责网页的行为（交互效果）。

 JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。

ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。 

脚本语言指的是:将来JavaScript编写出来的代码,不需要经过编译,直接经过浏览器解释就可以运行

JS的引入方式

内部脚本：将 JS 代码定义在 HTML 页面中 JavaScript 代码必须位于 标签之间 在 HTML 文档中，可以在任意地方，放置任意数量的

效果:

  JS-引入方式

这个效果就是出现三次上图的画面

想外部引入可以这样:




  
  
  JS-引入方式

JS的基本语法

主要内容:

  • 书写语法
  • 变量
  • 数据类型,运算符,流程控制语句

书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的 每行结尾的分号可有可无 注释： 单行注释： // 注释内容 多行注释： /* 注释内容 */ 大括号表示代码块

输出语句

使用  window.alert ()  写入警告框 使用  document.write ()  写入 HTML 输出 使用  console.log()  写入浏览器控制台

变量

JavaScript 中用 var 关键字（ variable 的缩写）来声明变量 。 特点一:作用域比较大,全局变量 特点二:可以重复定义 JavaScript 是一门弱类型语言，变量 可以存放不同类型的值 。 变量名需要遵循如下规则： 组成字符可以是任何字母、数字、下划线（ _ ）或美元符号（ $ ） 数字不能开头

建议使用驼峰命名

注意事项:

l ECMAScript 6 新增了 let 关键字来定义变量。 它的用法类似于 var，但是所声明的变量，只在 let 关键字 所在的代码块内有 效，且不允许重复声明 。 l ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变 。

总结:

1. 变量 特点： JS 是弱类型语言，变量可以存放不同类型的值 声明： •   var ：声明变量，全局作用域 / 函数作用域，允许重复声明 •   let ：声明变量，块级作用域，不允许重复声明 •   const ：声明常量，一旦声明，常量的值不能改变

数据类型

JavaScript中分为：原始类型 和 引用类型。

原始类型:

number ：数字（整数、小数、 NaN (Not a Number) ） string ：字符串，单双引皆可 boolean ：布尔。 true ， false null ：对象为空 undefined ：当声明的变量未初始化时，该变量的默认值是 undefined 使用 typeof 运算符可以获取数据类型： alert(typeof null); object 这个bug被沿用至今

运算符

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

      

== 与 ===:== 会进行类型转换，=== 不会进行类型转换

var a = 10;

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

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

alert(a === 10); //true

类型转换:

字符串类型转为数字：parseInt 将字符串字面值转为数字。 如果字面值不是数字，则转为 NaN 。 alert(parseInt("12"));//12 alert(parseInt("12A45");//12  遇到不是数字的字符就停止转换 alert(parseInt("A45"));//NaN 其他类型转为 boolean ： Number ： 0 和 NaN 为 false ，其他均转为 true 。 String ：空字符串为 false ，其他均转为 true 。(" ")这样不是空字符串 Null 和 undefined ：均转为 false 。

流程控制语句

if…else if …else…  switch  for  while

       do … while

参考官方文档：JavaScript 语句参考手册

JS的函数

介绍 ： 函数（方法）是被设计为执行特定任务的代码块 。 定义： JavaScript 函数通过 function 关键字进行定义，语法为：

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

var functionName = function (参数1,参数2..){

    //要执行的代码
}

var add = function(a , b){

    return a + b;

}

var result = add(10,20);

alert(result)

注意事项:

JS 中，函数调用可以传递任意个数的参数。 但是具体接收多少还是要看函数

JS的对象

• Array • String • JSON • BOM • DOM

Array

JavaScript 中 Array 对象用于定义数组。 定义 访问 注意事项: JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
属性:

属性

描述

length

设置或返回数组中元素的数量。

方法:

方法

描述

forEach()

遍历数组中的每个有值的元素，并调用一次传入的函数

push()

将新元素添加到数组的末尾，并返回新的长度。

splice()

从数组中删除元素。

箭头函数(ES6)：是用来简化函数定义语法的。具体形式为:  (…) => { … } ，如果需要给箭头函数起名字： var  xxx = (…) => { … }

String

String 字符串对象创建方式有两种： 属性：

属性

描述

length

字符串的长度。

方法：

方法

描述

charAt()

返回在指定位置的字符。

indexOf()

检索字符串。

trim()

去除字符串两边的空格

substring()

提取字符串中两个指定的索引号之间的字符。

JavaScript 自定义对象
定义格式：

var 对象名 = {

属性名1: 属性值1,

属性名2: 属性值2,

属性名3: 属性值3,

函数名称: function(形参列表){}

};

var user = {

    name:"Tom",

    age:20,

    gender:"male",

    eat: function(){

        alert("用膳~");

    }

};

简化:

var user = {

    name:"Tom",

    age:20,

    gender:"male",

    eat(){

        alert("用膳~");

    }

};

调用格式：

JSON-介绍

概念： J ava S cript O bject N otation ， JavaScript 对象标记法。 JSON 是通过 JavaScript 对象标记法书写的 文本 。

跟自定义函数有点像,但是键要用双引号引起来 

JSON-基础语法

定义

key必须用双引号

value 的数据类型为：

数字（整数或浮点数） 字符串（在双引号中） 逻辑值（ true 或 false ） 数组（在方括号中） 对象（在花括号中） null

var 变量名 = '{"key1": value1, "key2": value2}';

var userStr = '{"name":"Jerry","age":18, "addr":["北京","上海","西安"]}';

JSON字符串转为JS对象

var jsObject = JSON.parse(userStr);

alert(jsObejct.name);

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsObject);

BOM

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

组成： Window ：浏览器窗口对象 Navigator ：浏览器对象 Screen ：屏幕对象 History ：历史记录对象 Location ：地址栏对象

 

Window

介绍：浏览器窗口对象。 获取：直接使用 window ，其中 window. 可以省略。 属性   history ： 对 History 对象的只读引用。请参阅  History  对象 。   location ： 用于窗口或框架的 Location 对象。请参阅  Location  对象 。   navigator ： 对 Navigator 对象的只读引用。请参阅  Navigator  对象 。 方法 alert() ： 显示带有一段消息和一个确认按钮的警告框。 confirm() ： 显示带有一段消息以及确认按钮和取消按钮的对话框。 setInterval() ： 按照指定的周期（以毫秒计）来调用函数或计算表达式。

        setTimeout()：在指定的毫秒数后调用函数或计算表达式

Location

介绍：地址栏对象。 获取：使用 window.location 获取，其中 window. 可以省略。 属性： href ：设置或返回完整的 URL

DOM

概念： D ocument O bject M odel ，文档对象模型。 将标记语言的各个组成部分封装为对应的对象： Document ：整个文档对象 Element ：元素对象 Attribute ：属性对象 Text ：文本对象 Comment ：注释对象 

    
        DOM
    
    
        
DOM对象标题

        传智教育
   

Html被浏览器加载并解析之后机就会就会封装成这五种对象,同时在浏览器的内存当中也会形成DOM结构,也叫DOM树

那么在JS中通过DOM操作主要解决什么问题呢?我们为什么要学习这个DOM呢?JS是用来控制网页行为的,那到底是如何控制的呢?其实就是靠DOM和后面讲的事件监听机制来控制网页行为




    
    
    
    JS-对象-DOM演示


    课程表
    

        

            学号
            姓名
            分数
            评语
        

        

            001
            张三
            90
            很优秀
        

        

            002
            李四
            92
            优秀
        

        

            003
            王五
            83
            很努力,不错
        

        

            004
            赵六
            98
            666

效果:

这三个按钮就是通过DOM来完成的

DOM 是 W3C （万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，分为 3 个不同的部分： 1. Core DOM - 所有文档类型的标准模型 Document ：整个文档对象 Element ：元素对象 Attribute ：属性对象 Text ：文本对象 Comment ：注释对象 2. XML DOM - XML 文档的标准模型  3. HTML DOM - HTML 文档的标准模型 Image ： < img > Button ：

   

        DOM

   

   

       

DOM对象标题

        href="https://itcast.cn">传智教育

   

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 = document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组

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




    
    
    
    JS-对象-DOM


      


    传智教育   

    黑马程序员  

     电影
     旅游
     游戏

JS事件监听

• 事件绑定 • 常见事件 • 案例

事件监听

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

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

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




  
  
  JS-引入方式

常见事件

事件名

说明

onclick

鼠标单击事件

onblur

元素失去焦点

onfocus

元素获得焦点

onload

某个页面或图像被完成加载

onsubmit

当表单提交时触发该事件

onkeydown

某个键盘的键被按下

onmouseover

鼠标被移到某元素之上

onmouseout

鼠标从某元素移开




    
    
    
    JS-事件-常见事件


    

        
        
        
        
    
  
    



    

        

            学号
            姓名
            分数
            评语
        

        

            001
            张三
            90
            很优秀
        

        

            002
            李四
            92
            优秀

案例




    
    
    
    JS-事件-案例


     

     
    
    
 

    
    
 

     电影
     旅游
     游戏

转载请注明来自码农世界，本文标题：《JavaWeb-JS》

百度分享代码，如果开启HTTPS请参考李洋个人博客
37815篇文章 站点 微博
每一天，每一秒，你所做的决定都会改变你的人生！

发表评论

快捷回复：

评论列表 （暂无评论，69人围观）参与讨论

还没有评论，来说两句吧...

Top