文档章节

javascript能做什么 和其简单的内容

o
 osc_g8254g7s
发布于 2019/08/19 22:13
字数 1991
阅读 10
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

javascript能做什么

网页三大结构:

 html------>结构 搭建网页结构

css------->样式 美化页面

javascript-->行为 网页面向用户 用户跟网页有交互,可以让网页动起来

 1. 常见的网页效果【表单验证,轮播图。。。】

2. 与H5配合实现游戏【水果忍者: http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现统计效果【http://echarts.baidu.com/examples/】
5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
6. 在线学编程【https://codecombat.163.com/play/】
7. js可以实现人工智能【面部识别】
8. 。。。

js组成

  • EcmaScript 基础语法 第一周学习 前期主要学习es5 后续学习es6

  • BOM 浏览器对象模型 浏览器相关

  • DOM 文档对象模型 操作html/css

js能如何在html中使用

1,新增script标签,在script标签内容中写js(内部引入 类比css内部样式表)

<script type="text/javascript">
alert("hello 第一天学习javascript");
</script>
//type属性可以不写 type定义引入脚本的是js
//script最好写在body内容最后,代码从上往下运行,先运行html/css

2,新增script标签,通过script标签src属性引入外部的.js结尾的文件(引入外部 类比css外部样式表)

<script type="text/javascript" src="outer.js"></script>
/*
1,type属性可以不写
2,script引入外部js,此时script标签不要有内容 无效的
*/

 

js注释

//  单行注释
/*
我是多行注释
可以注释多行
*/

 

js语法

语句是js最小组成单位:语句可以理解为一个命令,告诉计算机要干什么,程序就是由若干语句组成的

eg:

alert("hello 第一天学习javascript");

语法规范:

1,每一个语句结尾,都要由英文的 ;结尾,告诉计算机这行语句结束了

2,js是严格区分大小写、中英文的 (初期学习要注意)

三个输出语句

 

alert()  弹出窗口

document.write()  在内容打印到html上

console.log();  打印到控制台

其他两种使用js方式 了解一下

a标签 href中写js

<a href ="#"></a>  空链接 回到顶部

<a href="javascript:;"></a>

1,样式上还是a标签样式

2,阻止超链接跳转

a标签中可以写js

<a href="javascript:alert(1);"></a>

元素标签的事件中写js

事件 是绑定在元素上的,用户可以通过某个行为触发这个事件 比如 点击事件 click

<button onclick="js"></button>

 

js变量(重点)

什么是变量

字面上理解:变化的量 (可以变化的量)

生活中:年纪、心情、

程序:可以理解为一个容器 放一些信息

x =2;

y=3;

z=x+y;

 

用字母保存了数字 用于运算

 

为什么要使用变量:利于统一管理程序 可能变化的值,在需要的位置可以直接使用 提高了代码的可重用性和可维护性

变量如何使用(声明、赋值、使用)

变量声明:

1,使用var 关键字声明变量

var js关键字

var 变量名;

声明一个变量(容器),此时变量未赋值,容器是没有值

2,声明的时候并赋值

var a=10;

3,可以同时声明多个变量,多个变量之间使用 英文的,分割

var a,b;

同时声明了两个变量 a和b 此时都是未赋值

4,可以声明多个变量并赋值以 英文,分割

var a=10,b=20,c;

5,undefined

未定义,当一个变量已经声明,但未赋值 使用这个变量,结果就是undefined

变量命名规范(怎么命名)

  • 由字母数字_$组成 数字不能开头

  • 尽量使用英文 见名知意 (有道词典)

  • 不能使用js关键字以及保留关键字

关键字:EcmaScript5 es5 es6

break、else、new、var、 case、 finally 、 return、 void 、 catch 、for 、switch 、 while 、 continue、 function 、this 、 with 、default 、 if 、 throw 、 delete 、 in 、 try 、do 、 instranceof、 typeof

保留关键字

abstract 、 enum 、int 、 short 、 boolean 、export 、interface、 static、 byte 、extends 、 long 、 super 、 char 、 final 、native 、synchronized 、 class 、float 、 package 、throws 、 const 、goto 、private 、transient 、 debugger 、 implements 、protected 、 volatile 、 double 、import 、public

变量命名方法

为了避免与关键字以及保留关键字冲突 变量命名可以使用 不同的方法

  • 下划线命名法

    当一个变量由两个或者两个以上单词组成的时候,中间使用_连接

    var user_name; var user_gender; var _username;

  • 驼峰命名法***

    1,大驼峰 很少用

    当一个变量由两个或者两个以上单词组成时,所有的单词首字母大写

    var UserName;

    2,小驼峰 推荐写法(最长用的是小驼峰)

    当一个变量由两个或者两个以上单词组成,从第二个单词开始,首字母大写

    var userName; var userAge;

 

变量数据类型

由于不同的值可以实现特定的功能:如数字可以算数运算、真假可以做条件判断,所有变量按照存储值的不同功能划分出不同的类型,叫做数据类型

typeof 返回变量数据类型

位  bit
字节 byte 8位
千字节 kb

基本数据类型:**

number数字 (整数、浮点数)

int 整数 32位 4字节

浮点数 小数 float 64位 8字节

string字符串(需加引号)

功能:用于输出 非数字

注意:

一定要加上 "" ''

boolean布尔(两个值 true/false)

undefined

未定义(1,使用一个已经声明但未赋值变量2,访问一个对象不存在的属性)

null 空 复合数据类型的空

复合类型(引用类型):后续学习

object function 对象 (数组、日期、正则、、)

运算符和表达式

表达式和语句区别:

语句 是由 关键字、运算符、表达式组成

var a=10;

var b=20;

var c=a+b;

表达式:是一个式子 a+b 10 a/10

语句:是一个完整功能

表达式:一般只得出一个值,可以直接使用或者直接赋值给一个变量

赋值运算符:

 

=  赋值运算
var a=10;
注意:从右往左

 

算数运算符:

+ - * / %(模 取余数)
+
1,加法两边 都是number数据类型 执行的是加法操作
2,如果两边 只要有一个是字符串 执行的是 连接
- 减法  
*   乘法
/   除法
%   取余数
作用:
1,判断奇偶数
2,判断是 几 的倍数
3,限制最大值
注意:
先乘除后加减,()可以提升优先级

 

练习:

  • 为抵抗洪水,战士连续作战89小时,编程计算共多少天零多少小时?

  • 小明要到美国旅游,可是那里的温度是以华氏度为单位记录的。

  • 它需要一个程序将华氏温度(80度)转换为摄氏度,并以华氏度和摄氏度为单位分别显示该温度。

  • 提示:摄氏度与芈氏度的转换公式为:摄氏度 = 5/9.0*(华氏度-32)保留3位小数

.toFixed(3)

关系运算符(比较运算符):

逻辑运算符:

数据类型转换

隐式转换:不同数据类型在运算过程中自动发生的数据类型转换

自动转换:程序员调用一些方法,手动转换数据类型

其他的运算符

赋值运算符

+=

-+

*=

/+

%=

算数运算

++ --

注意:前++ 前-- 和 后++ 后--区别

八进制和十六进制的介绍

  • 什么是进制:进制也就是进位计数制,是人为定义的带进位的计数方法(如统计 用 正)

    • 那么什么是二进制那? 如何用二进制表示数字3?

    • 什么是八进制那? 如何用八进制表示数字10?

    • 什么是16进制那? 如何用16进制表示25?

<script>
//二进制0b开头
//八进制0开头
//十六进制0x开头
var a = 0b10;
var b = 070;
var c = 0x36;
//输出自动转换成十进制数
document.write(a);
document.write(b);
document.write(c);
</script>
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
JavaScript-前言

[TOC] 前言 这是针对纯小白的Javascript教程。 有人问我,网页中流行的脚本语言是什么?这个时候我会简单粗暴的说:只有Javascript!对,只有Javascript。Javascript是世界上最流行的脚本语言...

osc_tehy8vur
2019/08/05
0
0
JavaScript 进阶(一): 系好安全带,准备启航

1-1、让你认识 JS Web前端开发师需要掌握什么技术? 也许你已经了解 HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已。...

Agnes2017
2018/05/14
0
0
html,css和JavaScript是什么关系

我们说,Web前端三剑客:HTML、CSS、JavaScript,它们看上去是三种不同的技术,但在实际中却是相互搭配使用的。 HTML是用来标记内容的(重在内容组织上) HTML是超文本标记语言的简称,它是一...

习惯丶l
2019/10/12
13
0
禁用JavaScript之后,你的网站表现如何?

一 最近要做一个新官网,需求评审完之后,考虑到官网都是纯静态页面,功能简单,操起vue-cli3几秒内创建好了项目脚手架,开发前,我打开了首页模板文件,看到下面这行字,有了一些思考…… ...

osc_lit0zkpv
2019/03/18
4
0
八个任务助你学好JavaScript

学习新的东西是件可怕的事。对我来说,掌握一项新技能最大的问题是,我不知道自己懂什么。鉴于此,定个计划,学习你感兴趣的东西应该会有用。这篇文章的主旨就是:你为学习JavaScript 制定的...

铂金小猪
2011/10/19
269
0

没有更多内容

加载失败,请刷新页面

加载更多

【运维探讨】如何实现更加简单、高效、安全的灾备切换管理?

建设了容灾系统,然后呢? 出于业务连续性与数据保护等目的,最早是银行等金融机构完成了业务的容灾系统的建设,随后电力等关键能源行业、海关等政务单位、大型互联网公司都着手建设了完备的...

嘉为科技
20分钟前
13
0
Linux系统内核升级

导读:Linux内核隔段时间会整合一些新特性进行更新,并且生产系统中的内核由于版本过低,会出现各种漏洞,需要安全加固,所以linux环境经常会遇到内核升级的情况,下面我们来看看如何升级lin...

追风若水
05/12
0
0
当你开始学C语言的时候。。。

2020 年上半年高阅读量文章精选 本文分享自微信公众号 - 前端先锋(jingchengyideng)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一...

前端先锋
07/07
0
0
没想到还能在这看到云开发...

为了让更多开发者及时掌握云开发的最新动态,欢迎您在下列技术社区、论坛中选择你常用的平台,关注云开发官方账号,来快速了解云开发更新的产品能力与实战项目等内容(扫码即可进入各平台云开...

小程序云开发
07/09
0
0
💐💐课程通俗易懂让你顺利上手JenkinsPipeline的编写。内容涵盖:pipeline基础语法、声明式脚本式、Sharelibrary共享库、Groovy基础语法、常用Pieplin...

本文分享自微信公众号 - DevOps云学堂(idevopsvip)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

泽阳DevOps
2019/12/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部