JavaScript基础语法

JavaScript基础语法,第1张

目录

前言

一.概述

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发布,现每年都会发布一个新版本。
2.JavaScript组成
  • ECMAScript:描述了JavaScript的基本语法规则,包括数据类型,变量,运算符等。
  • BOM浏览器对象模型,通过BOM可以 *** 作浏览器窗口,例如控制浏览器跳转,获取分辨率等。
  • DOM文档对象模型,通过DOM可以 *** 作HTML文档结构,样式或者内容,例如可以单击按钮修改文字颜色等。
3.第一个JavaScript程序


  
    
    
    
    Document
  
  
    
    
    
  

上述代码的页面效果
 注意:
  • 区分大小写
  • 建议每一条语句都以分号结束
  • 在JavaScript中一个固定值被称为字面量,例如 Hello World 。
  • 单行注释以 // 开头(快捷键 Ctrl+/ ),多行注释/*   */。
  • 补充:HTML注释 ,CSS注释/* */
 4.JavaScript添加方式(类比CSS添加方式) (1)行内方式
(2)内嵌样式

  通过script标签添加到HTML的或部分。

  注意:如添加到前,则此时所有元素已经加载完,执行JavaScript代码就不会拖慢网页显示过程。

(3)外部方式

      通过script标签引入.js文件,这种方式分离HTML和JavaScript代码,使代码容易阅读和维护,而且已经缓存的JavaScript文件可加速页面加载。

注意:引用外部文件的script标签内不可以写JavaScript代码,否则js文件中的代码会被覆盖,不会得到执行。

5.在Chrome 浏览器中执行 JavaScript

Chrome 浏览器中执行 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.布尔型Boolean

   true  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.
1.if语句
 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还用不顺手,头大,加油加油。如果大家有什么建议的话,欢迎评论~

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/743341.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-29
下一篇 2022-04-29

发表评论

登录后才能评论

评论列表(0条)

保存