【web学习之Js】 JavaScript基础 - 基础语法

最新推荐文章于 2023-02-08 13:21:13 发布
最新推荐文章于 2023-02-08 13:21:13 发布
阅读量461 收藏 4
点赞数
分类专栏： web学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljb568838953/article/details/83141010
版权

█ 【web学习之Js】 JavaScript基础 - 基础语法

█ 相关文章：

-　
　●　【web学习之html】 HTML基础 - 常见语法总结
　●　【web学习之html】 HTML基础 - 表单学习
　●　【web学习之Js】 JavaScript基础 - 基础语法
　●　【web学习之demo】 一个Demo的解析
　●　【web学习之eclipse】 用eclipse从git(码云)上下载maven项目

█ 读前说明：

-　
　●　本文通过学习别人写demo,学习一些课件,参考一些博客,’学习相关知识，如果涉及侵权请告知
　●　本文只简单罗列相关的代码实现过程
　●　涉及到的逻辑以及说明也只是简单介绍，主要当做笔记，了解过程而已

█ JavaScript：

-　
　●　JavaScript是一种描述语言，基于对象和事件驱动的脚本语言
　●　脚本语言（一种轻量级的编程语言）
　●　一种解释型语言（无需预编译）

  1. 像C、C++、Delphi、Pascal、Fortran 等都是编译型语言，需要编译后生成可执行文件exe才可以使用。只需要第一次编译成操作系统了解的类型，运行时不需要重新翻译，就可以直接运行。程序执行速度快、效率高，依赖编译器，跨平台性差些。
  2. Python/JavaScript / Perl /Shell等都是解释型语言,不需要编译，直接在=在运行时先解释再运行，每执行一次都要翻译一次。程序执行速度慢、效率低，依靠解释器，跨平台性好。
  3. Java代码都是要编译的，但是编译后不能直接运行，需要解释运行在JVM上，因此即是编译型语言，又是解释型语言。总体更偏向解释型的语言。

    ●　被设计为向HTML页面添加交互行为

可以大大缩短和服务器之间的交互频率

    ●　运行于客户端

直接在浏览器运行

    ●　JavaScript和JAVA的关系

JavaScript与JAVA没有关系，不同公司的，不同语言，不同用法，只是名字恰好有点像

█ JavaScript特点：

-　
    ●　可以使网页增加互动性，能及时响应用户的操作。
    ●　可以操作页面的DOM元素 (获取页面的各个节点Node元素)

浏览器会将HTML构建成一个DOM树
document.getElementById(“ul”).innerHTML = html;
document.write(“Hello World!”);

    ●　可以操作浏览器的BOM元素(browser object model)

1.可以操作浏览器窗口(打开、关闭、移动、定位和调节尺寸)
2.主要是Window对象的操作
3.举例:window.location=“http://www.baidu.com”;

    ●　可以动态渲染html页面 (动态刷新数据表格)

js 循环渲染html页面

    ●　可以对提交表单做即时验证 (检查输入的数据是否合法)

█ JavaScript的3种引入方式：

-　
　●　1.行内引入(html标签)：

< body οnlοad=“alert(123)” >
< button οnclick=“alert(123)”>行内引入</ button>

    ●　2.内部引入(script标签):// 标准写法

< script type= " text/javascript" > 这是js的内部引入< /script>

    ●　3.外部引入(引用文件):// 推荐写法

< script type=“text/javascript” src="…/test.js">< /script>

PS1: script标签一般定义在head或body中　
PS2: 行内引入方式必须结合事件来使用　
PS3: 外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点

█ 基础语法-变量

-　
    ●　JavaScript的变量:用于保存值、保存表达式

1.变量名区分大小写，代码也区分大小写
2.以字母或下划线或美元符$开始
3.不能使用关键字
4.先声明后使用，声明都统一var
5. 变量可以重复赋不同类型的值，不同于c、c++、Java　
6.变量名称最好有意义(建议用英文，太长可以缩写)，最好使用驼峰格式
7.用var声明变量，可以保存任何数据类型的值
8.用const定义常量，常量无法改变
9.举例:
var $delay5S = 5;// 延迟5，秒
var _isGirl = true; // 是否是女孩
const userName=“大狮子”;// 用户名

PS1: 句尾的分号要不要省略？答案是：工具来帮我们自动完成，因此可以不用写！　
PS2: 从ES6开始支持关键字const来定义常量　
PS3: 在Kolin中，用var声明变量，用val定义常量

    ●　数据类型:

String：var test = “123”
Boolean：var test = true
Number：var test = 123
Object：var test = {name:“张三丰”,age:218，sex:function(){ return “男”;}}
Undefined：未赋值
Null：未存在的对象Object

    ●　typeof检测变量的类型，返回值为字符串类型

undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
function：函数方法
object：对象 或 数组 或 Null 类型

    ●　变量的作用域

1.全局变量:任何地方都可被调用，公共的(public )
2.局部变量:只能在函数内部调用，私有的( private)

PS: 应尽量避免使用全局变量，以免团队开发变量冲突

█ 基础语法 - 条件结构和循环结构

-　
    ●　判断语句

1.if(条件语句){}
2.if(条件语句){}else{}
3.if(条件语句){}else if(条件语句){}else{}
4. … …　
5.result = ( 条件语句 ) ? value1 : value2 ;

    ●　switch多分支语句(等价于if…else 语句)

switch (条件语句){
    case 条件1:
        break;
    case 条件2:
        break;
    default: // 默认,找不到执行该语句　
        break;
}

    ●　四种循环方式

1.while ( 条件语句 ){} // 先判断再执行　
2.do{}while ( 条件语句 )// 先执行再判断,至少执行一次　
3.for ( int i=0; i<=10; i++ ){} // 循环10次　
4.for ( String a in String[] ){} // 主要针对数组和对象，遍历对象成员

    ●　四种结束方式

1.continue: 终止当前的循环，下一个循环继续　
2.break: 终止小个循环，小循环结束　
3.break+标签名: 终止标签命名的循环　
4.return: 结束方法、函数，大终止

PS: 不知道循环次数，通常选择while{}或do{}while;知道循环次数,通常选择for(){}循环！

    ●　异常捕获语句

try{ }
catch(e) // e.message包含错误信息
{ }

    ●　Window对象

1.Window对象表示浏览器中打开的窗口
2.Window对象是全局对象，可直接调用其方法和属性
3.所有的Window的方法，也可以说是系统函数
4.可以在html中通过window.调用其方法和属性，其中window.可以省掉
5.举例：
     window.a = 55;
     window.alert(“123”);

PS: 通常js程序都是写在window.onload函数体中，目的是在窗口加载完成时，再执行js代码：window.onload = function () {}

█ 基础语法 - 函数(有些地方叫做方法)

-　
    ●　系统函数 - 弹窗

alert(“这是一个alert对话框”); // 警告弹窗，只有内容和确定按钮


prompt(“这是一个prompt带输入的对话框1”); // 用户输入窗口，有提示，输入框，确定和取消按钮
prompt(“这是一个prompt带输入的对话框2”, “”);
prompt(“这是一个prompt带输入的对话框3”,“请输入留言”);


confirm(“这是一个confirm确认信息？”); // 提示窗口，有内容，确定和取消按钮

在这里插入图片描述
PS: 确定则返回true，取消则返回false

    ●　系统函数 - 调试函数

console.log(“Hello World!”);
document.write(“Hello World!”)
document.location.href = ‘login.jsp’;
window.location=“http://www.baidu.com”;

    ●　系统函数 - 类型转换

系统函数描述
parseInt()字符串转换为整数
parseFloat()字符串转换为浮点数
toString()返回字符串
Boolean()转化为逻辑值
Number()对象转化为数字
String()对象转化为字符串
isNaN() 检查某个值是否是数字,返回true|false(不能直接用== 判断,都为false)　
eval()计算JavaScript字符串，并把它作为脚本代码来执行)(如eval("alert("这是一个alert对话框")")

    ●　自定义函数

自定义函数/th> 描述(传参和返回值是可选的)
带名函数1function 函数名 ( 参数1,参数2,…. ){}
(可以在任意地方进行函数变量的调用)
带名函数2var 函数名 = function ( 参数1,参数2,…. ){}
(需在定义后方可函数变量的调用，如触摸事件、鼠标事件、window.load())
匿名函数 (function ( 参数1,参数2,…. ){} )();
(一般用于框架的封装)

PS: 在初始化时，系统会自动进行代码优化，将定义的自定义函数【带名函数1】优化提前加载，因此可以在定义之前进行函数变量的调用，不过有时候提前加载会导致部分参数未初始化造成无效！

    ●　事件:JavaScript侦测到的行为

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
表单提交
键盘按键

事件名称描述
onload当用户进入页面时触发该事件
onunload当用户离开页面时触发该事件
(现在不支持了，防止页面离开时打开新的页面，造成一堆广告页面)
onfocus,onblur和onchange主要与form表单里的文本域或下拉框配合使用
onsubmit form表单提交时发生
onmouseover和onmouseout鼠标移至对象上和离开时发生
onclick和ondblclick对象被点击/双击时发生

PS: 事件通常与函数配合使用，当事件发生时去调用函数

    ●　系统函数 - Window属性(浏览器窗口属性)

Window描述
history属性History对象的引用(访问过的URL)
back() 后退,forward()前进，go(n)跳转第n个记录
location属性用于窗口或框架的Location对象
host 主机名和端口号,hostname 主机名，href完整的url,hash #开始的url,search ?开始的url
reload() 刷新页面，replace() 替换文档
screen属性对Screen对象的只读引用
status属性设置窗口状态栏的文本
document属性对Document对象的只读引用
title 标题，write() 向文档写内容，
getElementById()通过id获取某个控件/节点/对象，
getElementsByTagName() 通过标签获取控件/节点/对象 集合，
getElementsByName() 通过名称获取控件/节点/对象 集合
prompt() 弹出一个输入提示框
alert() 弹出一个警告框
confirm() 弹出一个确认框
close() 关闭当前浏览器窗口。 有些浏览器对此方法有限制。
open(uri, [name], [features]) 打开一个浏览器窗口，显示指定的网页。name属性值可以是“_blank”、“_self”、“_parent”、“_top”、任意指定的一个窗口名。
setTimeout()定时执行一次，指定毫秒数后调用函数
setInterval()定时循环执行，指定的周期(以毫秒计)来调用函数
clearTimeout()取消由 setTimeout() 方法设置的 timeout
clearInterval()取消由 setInterval() 设置的 timeout
blur( )指定当前窗口失去焦点
focus( )指定当前窗口获得焦点

myWindow=window.open(‘https://www.baidu.com’,‘百度首页’,‘width=400,height=400’)
myWindow.close();
window.setInterval(“fn()”,1000);
window.setInterval( fn , 1000 );
window.setInterval( function(){fn()}, 1000);

PS: 每个载入浏览器的 HTML 文档都会成为 Document 对象,利用它可对 HTML页面中的所有元素进行访问

█ 节点

-　
    ●　HTML 文档中的每个成分都是一个节点（Node）

DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

    ●　使用getElement系列方法来访问指定的节点

getElementById()通过id获取某个控件/节点/对象
getElementsByTagName() 通过标签获取控件/节点/对象 集合
getElementsByName() 通过名称获取控件/节点/对象 集合

PS:注意不是所有标签都有name属性

█ 相关资料：

-　
　●　1.2016-10-24 JavaScript和Java之间的关系 - 枫叶漫天 - 博客园
　●　2.2018-04-02 javascript的三种引入方式 - 喜你已久丶不弃的博客 - CSDN博客
　●　3.2016-10-17 写javascript时要不要省略分号？ - 对角另一面 - CSDN博客
　●　3.2016-06-21 window对象的常用属性,常用方法 - cold_coffee - 博客园

转载请注明出处：

https://blog.csdn.net/ljb568838953/article/details/83141010

笔夏
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript(基础语法)
Amber_Young的博客
12-04 5887
JavaScript简介：JavaScript 是互联网上最受欢迎的编程语言之一，用于为网页添加交互性，处理数据，以及创建各种应用程序（移动应用程序，桌面应用程序，游戏等）,这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。1.javascript的用法： 在html中，必须在<script> </script> 中插入javascript代码。
JavaWEB学习demo
04-20
JavaWEB项目demos 包含各种框架的demo 可供入门学习，参考
javascript基础语法学习（一）
hmd3394969的博客
02-21 1150
1.JavaScript的输出方式 1.1 弹框输出 <script> window.alert(5 + 6); </script> 1.2 改变html中的值进行输出 <pid="demo">test段落</p> <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script...
JavaScript基础语法
m0_67683346的博客
11-02 5715
javascript中的一些基础语法
JavaScript学习笔记之基础语法
10-24
JavaScript是广泛使用在网页开发中的编程语言，主要负责网页的动态内容与用户交互，本文档聚焦于JavaScript的基础语法及其与...在Web开发中，JavaScript是实现页面交互的核心，掌握其基础语法是进行高级开发的基础。
javascript基础语法学习笔记
10-23
JavaScript是Web开发中不可...掌握这些基础语法是学习JavaScript的第一步，通过不断地实践和学习，你可以进一步探索更高级的主题，如作用域、闭包、面向对象编程以及更现代的特性，如ES6模块、Promise和async/await等。
JavaScript基础语法笔记
04-12
此“JavaScript基础语法笔记”涵盖了学习JS所必需的关键概念，包括循环结构、对象以及基本语法。 一、for循环 在JavaScript中，`for`循环是一种常用的迭代结构，用于重复执行一段代码直到特定条件满足。基本语法...
javascript基础----Typora.rar
08-31
`JS基础语法.md` 文件很可能包含了JavaScript的基础概念和语法结构，这是学习任何编程语言的第一步。JavaScript语法深受C和Java的影响，但又具有自己独特的特性。以下是一些可能包含在该文件中的关键知识点： 1. **...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册六：JS条件语句
最新发布
01-20
JavaScript是Web前端开发的核心语言之一，它为网页和应用程序提供了动态交互的能力。在JavaScript中，条件语句是控制程序流程的重要工具，它们允许我们根据不同的条件执行不同的代码块，从而实现逻辑判断和决策。本...
JS的一些入门代码demo
04-13
JS的一些入门代码demo
react.js学习文档+demo
11-26
react.js学习文档+demo.里面附带入门学习链接,基础demo开发步骤
web开发使用demo
04-10
web开发使用demoweb开发使用demoweb开发使用demoweb开发使用demoweb开发使用demo
node.js入门学习demo练习（基于菜鸟教程）
03-27
通过菜鸟教程，学习Node.js的入门，菜鸟教程上提到了很多基础的用法，这里都分别写了对应的demo,保存在一个压缩包里，学习时，可运行demo查看效果
web开发Demo
08-28
CSS+Div JavaScript jQuery jQuery UI jqGrid
JavaScript基础——基本语法
SilentLand的博客
07-16 794
JS基础、简介、基本语法、数据类型、运算符、循环语句
小白的零基础JavaScript全栈教程（1）-简介和基本语法
hxqneuq2012的专栏
09-03 1630
这是小白的零基础JavaScript全栈教程。 JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。 简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。 那么问题来了，为什么我们要学JavaScript？尤其是当你已经掌握了某些其他编程语言如Ja
js练习小demo
weixin_60634477的博客
02-08 502
js小demo
vuejs学习系列-第一个小demo
弼码温
04-17 4178
现在上节中安装的项目的src目录中建立pages文件用来装demo源码 我们现在的目录结构是这样的 首先在pages里新建demo01文件夹，顺便在demo01下，建立index.vue文件，然后在router里添加{ path: '/demo01', name: 'DEMO01', component: demo01 }index.vue里将会放置我们所有的demo
JavaScript语法基础学习指南
莫振杰所著的《JavaScript基础教程》是另一本针对Web前端新手的教材，它结合了作者的实际开发经验，以通俗易懂的语言讲解JavaScript，强调编程思维的培养，并通过实例帮助学习者建立流畅的学习路径。全书分为基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值