当前位置: 首页 > 编程日记 > 正文

JavaScript学习笔记 - 入门篇(1)- 准备

为什么学习JavaScript

一、你知道,为什么JavaScript非常值得我们学习吗?

  1. 所有主流浏览器都支持JavaScript。

  2. 目前,全世界大部分网页都使用JavaScript。

  3. 它可以让网页呈现各种动态效果。

  4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。

二、易学性

1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序。

2.我们可以用简单命令,完成一些基本操作。

三、从哪开始学习呢?

学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作。

如何插入JS

我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码。注意, <script>标签要成对出现,并把JavaScript代码写在<script></script>之间。

52e31ea8000149f406440218.jpg

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

引用JS外部文件

通过前面知识学习,我们知道使用<script>标签在HTML文件中添加JavaScript代码,如图:

52898b120001c44705120334.jpg

JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中。

52898b400001d04005500266.jpg

注意:在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。

JS文件不能直接运行,需嵌入到HTML文件中执行,我们需在HTML中添加如下代码,就可将JS文件嵌入HTML文件中。

<script src="script.js"></script>

52898b6900018aeb05540284.jpg

JS在页面中的位置

我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分。
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。
放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。

52a6ad240001086506440600.jpg

注意: javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。

认识语句和符号

JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。

每一句JavaScript代码格式: 语句;

先来看看下面代码

<script type="text/javascript">alert("hello!");
</script>

例子中的alert("hello!");就是一个JavaScript语句。

一行的结束就被认定为语句的结束,通常在结尾加上一个分号";"来表示语句的结束。

看看下面这段代码,有三条语句,每句结束后都有";",按顺序执行语句。

<script type="text/javascript">document.write("I");document.write("love");document.write("JavaScript");
</script>

注意:

  1. “;”分号要在英文状态下输入,同样,JS中的代码和符号都要在英文状态下输入。

  2. 虽然分号“;”也可以不写,但我们要养成编程的好习惯,记得在语句末尾写上分号。

注释很重要

注释的作用是提高代码的可读性,帮助自己和别人阅读和理解你所编写的JavaScript代码,注释的内容不会在网页中显示。注释可分为单行注释与多行注释两种。

我们为了方便阅读,注释内容一般放到需要解释语句的结尾处或周围。

单行注释,在注释内容前加符号 “//”

<script type="text/javascript">document.write("单行注释使用'//'");  // 我是注释,该语句功能在网页中输出内容
</script>

多行注释以"/*"开始,以"*/"结束。

<script type="text/javascript">document.write("多行注释使用/*注释内容*/");/*多行注释养成书写注释的良好习惯*/
</script>

什么是变量

什么是变量? 从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,为了区分盒子,可以用BOX1,BOX2等名称代表不同盒子,BOX1就是盒子的名字(也就是变量的名字)。

52e32dc90001140c04120228.jpg

定义变量使用关键字var,语法如下:

var 变量名

变量名可以任意取名,但要遵循命名规则:

1.变量必须使用字母、下划线(_)或者美元符($)开始。

2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。

3.不能使用JavaScript关键词与JavaScript保留字。

变量要先声明再赋值,如下:

var mychar;
mychar="javascript";
var mynum = 6;

变量可以重复赋值,如下:

var mychar;
mychar="javascript";
mychar="hello";

注意:

  1. 在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量。

  2. 变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。

判断语句(if...else)

if...else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。

语法:

if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

假设我们通过年龄来判断是否为成年人,如年龄大于等于18岁,是成年人,否则不是成年人。代码表示如下:

<script type="text/javascript">var myage = 18;if(myage>=18)  //myage>=18是判断条件{ document.write("你是成年人。");}else  //否则年龄小于18{ document.write("未满18岁,你不是成年人。");}
</script>

什么是函数

函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。

如何定义一个函数呢?基本语法如下:

function 函数名()
{函数代码;
}

说明:

  1. function定义函数的关键字。

  2. "函数名"你为函数取的名字。

  3. "函数代码"替换为完成特定功能的代码。

我们来编写一个实现两数相加的简单函数,并给函数起个有意义的名字:“add2”,代码如下:

function add2(){var sum = 3 + 2;alert(sum);
}

函数调用:

函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了,代码如下:
5419430400012de808370459.jpg

转载于:https://www.cnblogs.com/wanglongshuai/p/5242330.html

相关文章:

iOS关于像素的适配

项目中很多地方会用到分割线, 一般设置为1.0, 但是在不同的机型上这个1.0显示的效果是不同的,1x的机型上正常, 2x和3x的机型上显示的就会很粗, 影响适配, 困扰很久后得到了以下解决办法, 在此记录一下: 1.0/UIScreen.mainScreen.scale

非对称加密中公钥

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 数字签名是公钥密码体系中签名验证功能的一个应用。其目的是保证信息传输的完整性、发送者的身份认证、防止交易中的抵赖发生。其中数字签名是个加密…

bzoj 4813: [Cqoi2017]小Q的棋盘【树形dp】

这么简单的dp我怎么没想到x2 f为从这个点出发后回到这个点最多能走过的点&#xff0c;g为从这个点出发后不回到这个点最多能走过的点&#xff0c;注意g有两种转移&#xff1a;g[u][k]max(g[u][k],f[u][k-j-1]g[e[i].to][j])是在e[i].to这个子树前走了一棵子树再回来&#xff0c…

spring WebServiceTemplate 调用 axis1.4 发布的webservice

前言&#xff1a; 最近在开发中需要调用对方的 webservice服务&#xff0c;按照现有的技术&#xff0c;本应该是一件很简单的事情&#xff0c;只需要拿到wsdl文件&#xff0c;生成客户端代码即可&#xff0c;但是&#xff0c;对方的webservice服务是06年用axis1.4生成发布的&am…

iOS 获取Assets中的启动页

app启动时先进入一个广告页, 若无广告图则用启动页占位, 一直为这个占位图的适配烦恼, 最近查资料终于找到了结果, 现记录一下: - (UIImage *)getLaunchImage { CGSize viewSize [UIScreen mainScreen].bounds.size; NSString *viewOrientation "Portrait";//方向…

SunlightChain 区块链宣言

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 SunlightChain 区块链宣言 区块链技术的应用必将颠覆现在过度依赖于中心的经济模式&#xff0c;它与生俱来的开放、共享、去中心化等特点极大地提高…

Ajax跨域:Jsonp原理解析

推荐先看下这篇文章&#xff1a;JS跨域&#xff08;ajax跨域、iframe跨域&#xff09;解决方法及原理详解&#xff08;jsonp&#xff09; JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中&#xff0c;有一个很重要的安全性限制&#xff0c;被称为“Sam…

iOS 微信SDK1.8.6后需要UniversalLink解决方案及采坑记录

项目最初因审核原因,一直使用iOS原生分享, 最近因项目需求要求, 接入微信分享, 以为和原来的没有区别, 但是接入时才发现改动的地方还是挺多的, 主要是需要配置UniversalLink和提包时的一些问题, 在此做一下记录 UniversalLink配置步骤 1.制作apple-app-site-association文件…

GO语言编程基础-复合类型结构体

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 1 结构体类型 有时我们需要将不同类型的数据组合成一个有机的整体&#xff0c;如&#xff1a;一个学生有学号/姓名/性别/年龄/地址等属性。显然单独…

【BZOJ1015】【JSOI2008】星球大战 并查集

题目大意 给你一张\(n\)个点\(m\)条边的无向图&#xff0c;有\(q\)次操作&#xff0c;每次删掉一个点以及和这个点相邻的边&#xff0c;求最开始和每次删完点后的连通块个数。 \(q\leq n\leq 400000,m\leq 200000\) 题解 我们可以用并查集维护连通块个数&#xff0c;可惜并查集…

python基于Django框架编译报错“django.core.exceptions.ImproperlyConfigured”的解决办法?...

下面是我具体遇到的问题和解决方法&#xff1a; 错误详细信息&#xff1a; django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE, but settings are not configured. You must either define the environment variable DJANGO_SETTINGS_…

iOS 异形tabBar, 中间item凸起

今年的新项目中做了tabbar的相关处理, 在此记录一下 自己做了一demo, 效果如图所示 demo地址如下: https://github.com/wyon1314/TabBarDemo

以太坊系统账户

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 在以太坊系统中&#xff0c;状态是由被称为“账户”&#xff08;每个账户由一个20字节的地址&#xff09;的对象和在两个账户之间转移价值和信息的状…

Django-缓存的配置

缓存的介绍 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面.当一个网站的用户访问量很大的时候,每一次的的后台操作,都会消耗很多的服务端资源,所以必须使用缓存来减轻后端服务器的压力.缓存是将一些常…

swift中单例的创建及销毁

最近项目重构时使用了oc和swift的混编&#xff0c;遇到了关于单例的创建及销毁&#xff0c;这里记录一下 //创建单例private static var _sharedInstance: ViewController?objc class func sharedInstance() -> ViewController {guard let instance _sharedInstance else …

区块链技术名词简介

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 零知识证明 零知识证明指证明者能在不向验证者提供任何有用的信息下&#xff0c;使验证者相信某个论断是正确的。零知识证明实质是一种涉及两方或更…

Linux篇---ftp服务器的搭建

一、前述 企业中linux搭建ftp服务器还是很实用的&#xff0c;所以本文针对centoos7和centoos6搭建服务器教程做个总结。 二、具体 1、显示如下图则表示已安装 vsftp软件。如果未显示则需要安装vsftpd软件。 如果没有则通过yarm源进行安装 yum install -y vsftpd 2、安装完成之后…

Python 的property的实现 .

描述符.就是 将某种特殊类型①的类的实例指派给另一个类的属性 ①只要实现一下三种方法的其中一个就是特殊类型. __get__(self,instance,owner) -用于访问属性,他返回属性的值. __set__(self,instance,value) -将在属性分配操作时使用,不返回任何内容. __delete__(self,instanc…

Swift中NSRange和Range的转换

最近项目再使用swift重构&#xff0c;遇到Range和NSRange转换的问题&#xff0c;这里记录下&#xff1a; 因为要使用NSRange&#xff0c;所以有了下面这段代码&#xff0c;将String转换为NSString后调用 range(of searchString: String) -> NSRange 这种处理方法其实就是使…

C++基础技术简介

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 容器 容器用于存储数据元素&#xff0c;是由长度可变的同类型的元素构建成的序列。 Vector&#xff1a;用于快速定位任意元素及主要在元素序列的尾…

eclipse快捷键操作

【Ct rlT】 搜索当前接口的实现类 1. 【ALT /】 此快捷键为用户编辑的好帮手&#xff0c;能为用户提供内容的辅助&#xff0c;不要为记不全方法和属性名称犯愁&#xff0c;当记不全类、方法和属性的名字时&#xff0c;多体验一下【ALT /】快捷键带来的好处吧。 2. 【Ct rlO】…

vue 项目配置sass

1.运行npm install node-sass --save-dev npm install sass-loader --save-dev 2.打开build文件夹下面的webpack.base.config.js module: {rules: [...(config.dev.useEslint ? [createLintingRule()] : []),{test: /\.scss$/,loaders: ["style", "css", …

获取App Store中App的ipa包

俗话说好记性不如烂笔头&#xff0c;每次需要看别的App中某些功能的实现方案时总去查资料太麻烦&#xff0c;所以这里记录下如何获取App Store中App的ipa包 主要使用的工具为Apple Configurator 2这款软件&#xff1a; 具体操作流程如下&#xff1a; 1.首先在iPhone设备上安装…

区块链中的技术

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 应用技术 算法加密1 比特币采用椭圆曲线加密算法&#xff08;ECC&#xff09;来产生公钥和私钥对&#xff0c;钱包地址即是公钥&#xff0c;私钥由…

h.264 FMO

在H.264之前的标准中&#xff0c;比如H.263&#xff0c;其比特流中的数据是按照一个宏块接一个宏块的方式排列的&#xff0c;一旦发生丢包&#xff0c;很多相邻宏块信息都会丢失&#xff0c;很难进行错误隐藏处理。在H.264中加入了一项新特性&#xff1a;把宏块在比特流中的数据…

lvs+keepalived+nginx+tomcat

# 拓扑如下所示 # 节点分布情况 LVS-dr-master eth0: 192.168.146.141 LVS-dr-slave eth0: 192.168.146.142 nginx1: eth0: 192.168.146.139 nginx2: eth0: 192.168.146.140 tomcat1: eth0: 192.168.146.138 启用了4个tomcat VIP: 192.168.146.200 # 具体配置 ### lvs master #…

iOS 关于pods-frameworks.sh:permission denied报错的解决

最近公司新开项目&#xff0c;搭建完框架后小伙伴拉取代码后build一直报错&#xff1a;pods-frameworks.sh:permission denied 查了很多博文后找到了如下解决方案&#xff0c;在此记录。 打开终端输入如下命令行回车即可&#xff1a; chmod ax "/Users/xxx/Pods/Pods-re…

区块链分布式账本

链客&#xff0c;专为开发者而生&#xff0c;有问必答&#xff01; 此文章来自区块链技术社区&#xff0c;未经允许拒绝转载。 账本是具有一定格式和许多账页组成的&#xff0c;以会计凭证为基础&#xff0c;对经济业务进行序时分类记录&#xff0c;也就是所说的账册。 账本在…

jmeter实现多并发

1.jmeter实现多并发 线程组:负载发生器,用以多线程或多进程的方式来模拟用户的使用行为.jmeter是以线程的方式来进行模拟用户的并发访问的 转载于:https://www.cnblogs.com/xuzhongtao/p/8526502.html

循环语句——7月23日

循环语句&#xff1a;for 格式&#xff1a; for (int i 1/*初始条件*/; i < 100/* 循环条件*/; i /*状态改变*/) { //循环体&#xff0c;执行代码&#xff1b;(break;跳出循环体) } 给出初始条件&#xff0c;先判断是否满足循环条件&#xff0c;如果不满足条件则跳过for语句…