javaweb入门4之javascript入门一

简介: javascript入门一简介用法输出语法变量和数据类型 数据类型var和let的区别循环和条件语句

javascript入门一


简介


JavaScript 是一种轻量级的编程语言。


JavaScript 是可插入 HTML 页面的编程代码。


JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。


JavaScript 很容易学习。


js是弱类型语言。


这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。


用法


1.HTML 中的脚本必须位于 <script> 与 </script>标签之间。脚本可被放置在 HTML 页面的 和 部分中。


2.<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签


<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。


实列


<script type="text/javascript">
alert("Hello World!")
</script>


ffbf2c0e4ec64604a88c8e94ce9fb2d4.png


输出


JavaScript 可以通过不同的方式来输出数据:

使用 window.alert() 弹出警告框。其中windows可以省略.

acb0bf56e2d4488293a29e4c85b6cd02.png


使用 document.write() 方法将内容写到 HTML 文档中


使用 innerHTML 写入到 HTML 元素


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">//设置编码。防止乱码
    <title></title>
  </head>
<body>
  <h1>我的第一个 Web 页面</h1>
  <p id="d1">你好,世界</p>
  <script>//这个标签可以写在body也可以写在head
  //document.getElementById("d1").innerHTML = "我是笑霸final。";
  //这里是一个注释
  </script>
</body>
</html>


6d91fd526a854936b277d38fa2803647.png


我们打开注释后:


74c673d8f78544ac8859641a8177e555.png



使用 console.log() 写入到浏览器的控制台


c78a2a30ad854dcb9b9b2488d560986b.png

语法


JavaScript 字母大小写


JavaScript 对大小写是敏感的。


当编写 JavaScript 语句时,请留意是否关闭大小写切换键。


函数 getElementById 与 getElementbyID 是不同的。


同样,变量 myVariable 与 MyVariable 也是不同的。


浅识关键字

09564bf6611d4d25bd15fc62cb72c63e.png


1.数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。


2.字符串(String)字面量 可以使用单引号或双引号:


3.数组(Array)字面量 定义一个数组:


函数:用function来定义


function myFunction(a, b) {
    return a + b;                      
}


注意:JavaScript 中,常见的是驼峰法的命名规则,如myFunction (而不是lmyfunction)。


变量和数据类型 数据类型


1.大小写敏感


2.变量必须以字母开头


3.变量也能以 $ 和 _ 符号开头(不推荐)


3.JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型



值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。


引用数据类型:对象(Object)、数组(Array)、函数(Function)。


声明变量使用var和let


var me = '笑霸final';//这里me就是字符串型
var me = 1;//这里me就是number

var和let的区别


1.全局作用域:但是,被let声明的变量不会作为全局对象window的属性,而被var声明的变量却可以。


2.函数作用域


var 和 let 在函数作用域中声明一个变量,两个变量的意义是相同的。


3.块作用域:在块作用域中两者的区别较为明显, let只在for()循环中可用,而 var是对于包围for循环的整个函数可用


function  aFun1(){
    // i 对于for循环外的范围是不可见的(i is not defined)
    for(let i = 1; i<5; i++){
        //  i只有在这里是可见的
    }
    // i 对于for循环外的范围是不可见的(i is not defined)
}
function aFun2(){
    // i 对于for循环外的范围是可见的
    for(var i = 1;i<5; i++){
        // i 在for 在整个函数体内都是可见的
    }
    // i 对于for循环外的范围是可见的
}


4.let 和var 重新声明:var允许在同一作用域中声明同名的变量,而let不可以


循环和条件语句


条件语句:用法和java c一样!!!!!


if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码


if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码


if…else if…else 语句- 使用该语句来选择多个代码块之一来执行


switch 语句 - 使用该语句来选择多个代码块之一来执行


循环:


类型


1.for - 循环代码块一定的次数


2.for/in - 循环遍历对象的属性


3.while - 当指定的条件为 true 时循环指定的代码块


4.do/while - 同样当指定的条件为 true 时循环指定的代码块


var person={属性1:"笑霸fianl",属性2:"hahaha",属性3:100}; 
    for (x in person)  // x 为属性名
    {
       alert(x+person[x]);
    }


浏览器就会循环弹出属性

aab23a9ef2bd4281bd0330531cc34ae3.png3f08853935b94551a5c1a16bcca94a65.png0874f358f29948809c04bb42903e1913.png

目录
相关文章
|
1月前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
24 1
|
3月前
|
JSON JavaScript 前端开发
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
47 0
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)(上)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
29 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
3月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
35 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(上)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
42 0
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)(下)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
26 0
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
65 1