JavaScript 第一章 基本语法 1~3节
1 、为什么学习 JavaScript ?
通常在表单验证与处理页面动态效果方面使用 JavaScript
应用场景 1 (注册页面的输入验证):
应用场景 2 (图片无缝滚动效果):
应用场景 3 (内容切换效果):
2 、 JavaScript 是什么?
2.1 )先看看 JavaScript 代码的 基本结构(初次体会),如下:
<html>
<head>
<title> 脚本的基本结构 </title>
<!-- JavaScript 代码写在 head 标签下的 script 标签内 -->
<script language= " javascript " >
var number = 3; // 定义一个变量 number
// 输出内容到页面
document.write( " 这是使用 JavaScritp 输出的内容! " );
// 循环输出内容到页面
for(var i = 0; i < number; i++){
document.write( " <strong> 欢迎使用 JavaScript</strong> " );
}
</script>
</head>
<body>
……
</body>
</html>
请打开记事本(强烈推荐初学者在最初的学习过程中使用记事本等纯文本编辑工具编写代码,这是训练基本功的一种非常好的方法哦)编写以上代码并保存为 html 文件执行
从以上代码我们可以总结出 JavaScript 脚本的基本结构:
<script language= “ javascript ” >
<!-- 这里加 html 注释,不支持 JavaScript 的浏览器会忽略注释中的代码
这里写 JavaScript 代码
-->
</script>
2.2 )再讲讲 JS 执行原理:
当浏览器打开 html 页面时,页面中的 HTML 标签和 JavaScript 代码将由浏览器来解析(理解)并执行,执行顺序是从上到下顺序执行
3 、掌握 JavaScript 的基本语法 :
3.1 )想想上面的那段代码,是不是与 Java 语言有很多类似的地方,比如:
变量、输出语句、 for 循环、代码注释等等,我们将从以下 5 个方面学习 JS 的基本语法:
3.3 ) JavaScript 提供了 4 种基本数据类型
数值型 ( 整数、小数 ) 、
字符串 ( 用 ' 字符串 ' 或 ” 字符串 ” 表示 ) 、
布尔型 (true 或 false) 、
空值 (null)
3.4 )变量的声明
JavaScript 采用弱类型 ,变量定义不区分类型,统一用 var 声明 或者不声明直接使用,如下:
声明变量的语法: var 合法变量名 ;
情况 1 ,使用 var 声明变量:
var count = 100;// 整数变量
var name = “ 张三 ” ;// 字符串变量
var flag = true;// 布尔型变量
var obj = null;// 对象
情况 2 ,不使用 var 直接声明变量 ( 这种方式容易出错不推荐使用 ) :
count = 100;
name = " 张三 ";
JavaScript 的变量命名规范:
第一个字符只能是英文字母、美元符号 "$" 、下划线 "_"
其余字符可以是英文字母、美元符号 "$" 、下划线 "_" 、数字
不能使用 JavaScript 中已定义的关键字,比如: new 、 for 、 var 、 true 等
注意:尽量使用骆驼命名法与 Java 编码风格保持一致
3.5 ) JavaScript 中的运算符
1. 算术运算符
=======================================
运算符 运算符说明 示例 示例说明
+ 加法 x + y 如果 x 为整数 2,y 为整数 5, x+y 等于 7
如果 x 为字符串 ”text1”, y 为字符串 ”fun”,
x + y 则等于 ”text1fun”
- 减法 x - y
* 乘法 x * y
/ 除法 x / y
% 相除求余数 x % y 如果 x 等于 10, y 等于 3, x%y 结果等于 1
++ 递增 x++ 如果 x 等于 10, x++ 等于 11
-- 递减 y-- 如果 y 等于 10, y-- 等于 9
=======================================
2.关系运算符
=======================================
运算符 运算符说明 示例 示例说明
== 等于 x == y 如果 x 等于 2, y 等于 2, 则 x==y
=== 全等于 , x===y 如果 x 等于整数 2, y 为字符串 ”2”,
值相等 , 则 x===y 不成立
数据类型也相等
> 大于 x > y
>= 大于等于 x >= y
< 小于 x < y
<= 小于等于 x <= y
!= 不等于 x != y
!== 不全等于 x !== y
=======================================
3.逻辑运算符
=======================================
运算符 运算符说明 示例 示例说明
&& 与 (and) x < 10 && y > 1
! 非 (not) !(x==y)
|| 或 (or) x==8 || y==8
=======================================
4.赋值运算符
=======================================
运算符 运算符说明 示例 示例说明
= 赋值 x = 5 将整数 5 这个值赋给变量 x
=======================================
注意:请注意赋值 (=) 和等于 (==) 的区别
5.运算符优先级
下表按从最高到最低的优先级列出 JavaScript 运算符,
具有相同优先级的运算符按从左至右的顺序求值
=======================================
运算符 描述
. [] () 字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= instanceof 小于、小于等于、大于、大于等于、 instanceof
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= oP= 赋值、运算赋值
, 多重求值
=======================================
3.6 )逻辑控制语句,与 Java 等语言的语法基本一致
条件语句 语法:
if( 表达式 ){
JavaScript 语句 ;
}else{
JavaScript 语句 ;
}
swith( 表达式 ){
case 常量值 1:
JavaScript 语句 ;
case 常量值 2:
JavaScript 语句 ;
......
default:
JavaScript 语句 ;
}
for 循环语句 语法:
for( 初始化 ; 条件 ; 增量或减量 ){
JavaScript 语句 ;
}
while 循环语句 语法:
while( 条件表达式 ){
JavaScript 语句 ;
}
3.7 )注释
单行注释,以 ”//” 开头,如: // 这里写注释
多行注释,以 ”/*” 开头,以 ”*/” 结尾,如:
/*
这里写注释
*/
3.8 )类型转换:
情况 1 ,将字符串转换为整数:
parseInt("69"); // 将字符串 "69" 转换为整数 69
情况 2 ,将字符串转换为浮点数:
parseFloat("18.68"); // 将字符串 "18.68" 转换为浮点数 18.68
情况 3 ,转换数字与其他字符的混合字符串:
parseFloat("69.96abcd"); // 转换后为浮点数 69.96
情况 4 ,转换非数字字符串 :
parseInt("abcd69"); // 返回 "NaN" , 表示非数字
情况 5 , 验证字符串是否是数字 , 使用系统函数 isNaN(" 数字字符串 ") :
isNaN("abcd"); // 返回 true , 表示不是数字
isNaN("200"); // 返回 false , 表示是数字
相关推荐
第一章 JavaScript基础语法 第一章 JavaScript基础语法 第一章 JavaScript基础语法
第3章JavaScript基本语法 第4章windows(窗体)对象 第5章document对象 第6章 文本对象 第7章按钮对象 第8章 选择和隐藏对象 第9章location对象 第10章history对象 第11章layer对象 第12章字符串对象 第13章日期对象...
第一章 概述 4 1.1 JavaScript的由来 4 1.2 什么是JavaScript 4 1.3 JavaScript的特点 4 1.3.1 javascript的优点 5 1.3.2 javascript的局限性 5 1.4 Java 与 JavaScript 有什么不同 5 第二章 语法...
JavaScript 语言基础知识点总结(思维导图)
第一章 CSS样式表 1 1.1 什么是CSS 1 1.2 CSS的几种设置方式 1 1.2.1 内联样式表 1 1.2.2 嵌入样式表 2 1.2.3 外部样式表 2 1.2.4 输入样式表 3 1.3 样式规则的选择器 3 1.3.1 Html selector 3 1.3.2 class selector...
第一部分 第1章 HTML 5简介 第2章 HTML 5的常用元素与属性 第3章 HTML 5表单相关元素和属性 第4章 HTML 5的绘图支持 第5章 HTML 5的多媒体支持 第二部分 第6章 级联样式单与CSS选择器 第7章 字体与文本相关...
第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 1.2.1 客户端应用 5 1.2.2 服务器端应用 5 1.3 在Web页面...
第 1 章 JAVASCRIPT的语法 1 1.1 什么是脚本程序和JAVASCRIPT 1 1.1.1 什么是脚本程序 1 1.1.2 Javascrpit的简介 1 1.2 脚本代码的位置 2 1.2.1 也可将javascript放入到单独的一个文件js文件,在需要使用的时候引入:...
第1章 JavaScript简史 1.1 JavaScript的起源 1.2 浏览器之争 1.3 制定标准 1.4 小结 第2章 JavaScript语法 2.1 准备工作 2.2 语法 2.3 语句 2.4 变量 2.5 操作 2.6 条件...
为什么学习JSP之前必须掌握JavaScript和Java语言?因为JSP是基于Java语言的,JSP是Java的网络应用,所以理所当然要熟悉Java语言,而JavaScript是一种...本章先介绍JavaScript的基本语法,然后介绍Java语言的具体特性。
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求,详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理,由浅入深、循序渐进地引导读者快速...
《Head first javascript 》 是一部优秀的、注重实践的JavaScript教程。作者首先概览了JavaScript,包括它的语法...最后单独设计一章来讲述第三方示例,演示了YUI 和 jQuery JavaScript库的使用。此处为该书配套的源码.
本书是一部优秀的、注重实践的...最后单独设计一章来讲述第三方示例,演示了YUI 和 jQuery javascript库的使用。 本书适合初级和中级水平的javascript开发人员阅读,可作为高等院校计算机专业的javascript课程教材。
本课程主要是介绍JavaScript语言的语法,如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入,可...第一章: JavaScript简介 第二章: JavaScript基本语法 第三掌 JavaScript对象 第四章 在浏览器中使用
Head First JavaScript(中文版)本书是一部优秀的、注重实践的JavaScript教程。作者首先概览了JavaScript,包括它的语法、良好的编码...最后单独设计一章来讲述第三方示例,演示了YUI 和 jQuery JavaScript库的使用。.
第一章 PHP简介 6 第一节 PHP简介 6 1.Web程序工作原理 6 2.PHP简介 9 第二节 PHP的开发环境的搭建 9 1.程序编写,软件开发工具软件的选用 9 2.服务器软件的安装和配置 10 第三节 实验一 PHP开发环境的搭建 11 0....
第一章 PHP简介 6 第一节 PHP简介 6 1.Web程序工作原理 6 2.PHP简介 9 第二节 PHP的开发环境的搭建 9 1.程序编写,软件开发工具软件的选用 9 2.服务器软件的安装和配置 10 第三节 实验一 PHP开发环境的搭建 11 0....
全书一共12章:第1~3章介绍了JavaScript的基本语法,旨在帮助读者编写出正确的JavaScript程序,包含数字、算术、字符串、变量、程序结构、控制流程、类型、函数、对象和数组等最基础和最核心的内容;第4~7章讲解了...
第一篇完整地讲解了javascript的基础知识,主要内容包括javascript概述、数据类型、常量与变量、表达式与运算符、程序语句、函数和数组等。第二篇专门介绍javascript中内置对象的应用,内容包括javascript对象基础、...