前言
一.概述
1.JavaScript历史
2.JavaScript组成
3.第一个JavaScript程序
注意
4.JavaScript添加方式(类比CSS添加方式)
(1)行内方式
(2)内嵌样式
(3)外部方式
5.在Chrome 浏览器中执行 JavaScript
二.数据输出
1.警告框输出
2.HTML文档输出
3.HTML元素内容输出
4.控制台输出
三.数据类型
1.数值型Number
2.字符串型String
3.布尔型Boolean
4.未定义型undefined
5.数组Array
6.对象object
7.空值null
四.常量和变量
1.变量声明与赋值
2.常量
3.标识符
4.数据类型判断
5.严格模式
五.运算符和表达式
六.选择语句
1.if语句
2.switch语句
七.循环语句
不同类型的循环
八.跳转语句
九.总结
前言:
JavaScript是轻量级,解释型的Web页面的动态脚本语言,支持面向对象,函数式编程。JavaScript主要用于添加页面交互功能。
JavaScript是一种可以嵌入在HTML中的脚本语言,由浏览器一边解释一边执行。JavaScript可以跨平台,跨浏览器驱动网页,与用户交互。
一.概述 1.JavaScript历史- 1995年,网景公司的Brendan Eich设计了JavaScript,使其可以实现静态HTML页面上的一些动态效果。
- 1997年,ECMA制定了ECMAScript标准,而JavaScript是这个标准的一种实现。
- 2016年ECMAScript发布,现每年都会发布一个新版本。
- ECMAScript:描述了JavaScript的基本语法规则,包括数据类型,变量,运算符等。
- BOM:浏览器对象模型,通过BOM可以 *** 作浏览器窗口,例如控制浏览器跳转,获取分辨率等。
- DOM:文档对象模型,通过DOM可以 *** 作HTML文档结构,样式或者内容,例如可以单击按钮修改文字颜色等。
Document
注意:
- 区分大小写
- 建议每一条语句都以分号结束
- 在JavaScript中一个固定值被称为字面量,例如 Hello World 。
- 单行注释以 // 开头(快捷键 Ctrl+/ ),多行注释/* */。
- 补充:HTML注释 ,CSS注释/* */
(2)内嵌样式
通过script标签添加到HTML的
或部分。注意:如添加到前,则此时所有元素已经加载完,执行JavaScript代码就不会拖慢网页显示过程。
(3)外部方式通过script标签引入.js文件,这种方式分离HTML和JavaScript代码,使代码容易阅读和维护,而且已经缓存的JavaScript文件可加速页面加载。
注意:引用外部文件的script标签内不可以写JavaScript代码,否则js文件中的代码会被覆盖,不会得到执行。
5.在Chrome 浏览器中执行 JavaScriptChrome 浏览器中执行 JavaScript步骤
二.数据输出JavaScript可以将数据保存在变量中,数据被划分为不同类型并且可以用运算符进行处理,处理结果可以输出在页面或者浏览器的控制台中。
1.警告框输出可使用windows.alert()将输出内容写入警告框提示文本部分。如第一个程序所示。
2.HTML文档输出可使用document.write()将内容写入HTML文档。
注意:在HTML文档完全加载后使用此方法会覆盖已有的文档内容。
Document
安豆豆是什么动物
效果是点击显示页面上会显示猪宝宝。
3.HTML元素内容输出使用innerHTML属性将结果写入HTML元素。
Document
人间四月芳菲尽
4.控制台输出
使用console.log()将结果写入浏览器的控制台,这种后台输出的方式不会影响页面显示,可用于调试代码。
三.数据类型 1.数值型Number有个特殊的值NaN,表示不是一个数字的值。
2.字符串型String字符串类型的字面量用单引号或双引号括起来。
3.布尔型Booleantrue false
4.未定义型undefined变量声明后未赋值,默认为undefined。
5.数组Array本质是对象,用于定义一组数据集合,每个数据都被称为数组元素。第一个元素下标为0.
6.对象object任何事物都可以看作对象,对象是属性与方法的集合,即 数据与数据的 *** 作的集合。
7.空值null本质是对象,用于将变量置空等 *** 作。
四.常量和变量 1.变量声明与赋值JavaScript变量是弱类型的,即变量无特定的类型。声明变量时不需要说明类型,变量保存的数据的类型决定变量类型。
注意:按编程规范使用前应该声明变量。
声明变量可以使用let或者var,推荐使用let。
let声明变量的作用域是当前块或全局,var声明变量的作用域是当前函数或全局。
let stuName,totalNumber;
stuName="Li Ming";
totalNumber=1;
let isShow=true;
var stuName;
stuName="Li Ming";
2.常量
程序运行期间值保持不变的量,可以使用const关键字声明常量。
const PI = 3.14159;
3.标识符
标识符用于命名变量,函数等。
注意:JavaScript将一些标识符预留出来,其具有固定含义,称为保留字,用户自己定义的标识符不可以使用保留字。
4.数据类型判断可以使用typeof运算符判断变量类型,其返回值为number,string,boolean等。
let stuName="Li Ming";
console.log(typeof stuName);
注意:如果变量被赋值为null,则typeof返回object.
5.严格模式增加“ "use strict"; ”语句,开启严格模式,这种模式会让语法检查等过程更加严格。
五.运算符和表达式简单的不做介绍,只对自己陌生的介绍一下。
运算符 说明 举例
- ** 幂 3**2=9
- === 严格相等,值相等并且类型相同(常用)
- !== 严格不相等,值不相等或者类型不相同
- 条件?结果表达式1:结果表达式2 当条件为true,表达式取值为结果1,否则为结果2.
选择语句的条件部分可以是变量或者表达式,其他类型按照如下规律转换为Boolean类型。
- String:空字符串为false,所有非空字符串为true.
- Number: 0为false,一切非0数字为true.
- null / Undefined /NaN: 全为false.
- Object: 全为true.
if(score<60){ alert("不及格"); }
//if else格式
if(score<60){
alert("不及格"); }
else{
alert("及格"); }
//if else if格式
if(score<60){
alert("不及格"); }
else if(score<70){
alert("及格"); }
else if(score<90){
alert("良"); }
else if(score<60){
alert("优秀"); }
2.switch语句
适用于需要判断的条件取值是有限可数的情况。通过计算条件表达式的值,依次去匹配每个case子句,如果匹配成功,则执行后面的语句块。
此代码摘自菜鸟教程:
菜鸟教程(runoob.com)
点击下面的按钮来显示今天是周几:
七.循环语句
像C语言中有while,do...while,for语句,不必多做介绍。
不同类型的循环JavaScript 支持不同类型的循环:
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
补充一下for/in:
菜鸟教程(runoob.com)
点击下面的按钮,循环遍历对象 "person" 的属性。
八.跳转语句
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
这个在C语言中也已经熟悉。
九.总结本博客也是为明天网页课做出预习。预习完只觉得自己略懂一二,知识很多,只有多多实践才能熟练的掌握,变成自己的知识。JavaScript的学习一定是在我们HTML和CSS基础上锦上添花的,我们可以做出美观的网页后并增添他的实用性,做到交互。可是目前CSS还用不顺手,头大,加油加油。如果大家有什么建议的话,欢迎评论~
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)