【JavaScript】初识js
前端三大利器就是HTML+CSS+JavaScript，他们在整个前端开发中的主要作用大体可以概括如下
| html | 标记语言 | 负责页面的结构 |
| css | 层叠样式表 | 负责页面的样式 |
| javascript | 编程语言 | 负责页面的行为（客户端） |
其中最复杂也是最重要的部分就是Javascript。用一个词来形容JS的用途，就是“上天入地”。在客户端开发中我们可以使用JS来实现特效、动画、交互、数据校验 ；在服务器端有node；在数据库中有mongodb。所以现今的开发环境对于我们对JS的掌握程度要求越来越高，要想在软件开发一道上走得远，我们必须要掌握好JS。
今天先简单介绍一下JS的一些基本知识。
1.书写位置
*** 嵌入式
类似于CSS内嵌式一样，我们同样把代码写在页面里，通过<script></script>标签进行标记，在该标签内写JS代码。平时JS代码少的时候可以用这种方式。
其中JS代码可以放在任何位置（<head></head>里，<body></body>里,<html></html>外），但建议放在body末尾。
01_书写位置.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
alert("hello js!");
</script>
</body>
</html>
*** 外链文件（实际项目中）
类似于CSS代码外部引用，我们在专门的文件写JS代码，然后在页面内引入该js文件，实现页面结构和行为的分离，这是W3C一直倡导的标准，也是实际开发中我们常采用的方式。
01_书写位置.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="my.js"></script>
</body>
</html>
my.js
alert("hello world!");
*** 行内式
直接在html标签中写JS代码，会造成耦合性过大，不利于维护，同样不建议使用，只要了解就好。
01_书写位置.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p onclick="alert('呵呵');">这是一段文字</p>
</body>
</html>
当一个页面多存在多个<script></script>标签时，按顺序从上往下执行。
2.熟悉js常见的语句
02_js输出信息.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <script>
//js代码书写位置 ctrl+"/" 注释快捷键
alert("1");
// alert("2");
// alert("3 \nssss"); document.write("<h1>人一定要有自己的追求！！</h1>"); console.log("猜猜我在哪"); //F12打开开发者工具 找到console面板 </script>
</body>
</html>
2.1 alert("xxxxx"); 弹出窗口
在当前界面弹出一个弹窗
实现效果：
2.2 document.write("...") 在页面中输出信息
直接在页面中显示我们输入的内容，其中document就代表了当前页面这个对象。
实现效果：
2.3 console.log("...") 控制台输出
浏览器自带一个开发者工具，一般的快捷键都是F12，后者右击选择进入。找到console控制选项。这是我们学习JS的一个重要组成部分，很多结果都会在控制台进行输出。
实现效果：
3.变量
任何一门语言存在自己的语法，而语法最基本的就是变量，所谓变量就是未知数，他是内存中的一块位置，可以用来存储一个值，并且这个值可以改变。
03_js变量.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> <script>
// var x;
// x = 10; //把10赋值给变量x
// console.log(x); // 10 var x = 20;
var c = 30, b = 20;
x = x + 20;
alert(x); </script>
</body>
</html>
在es6中，我们还会使用 let/const 定义变量，这个我们之后再提，现在先把var掌握住。
4.变量类型
JavaScript是一门弱类型语言，不像Java一样，每个变量是个什么类型严格规定。在JavaScript中我们统一使用var来定义，要想查看该变量类型，我们可以使用typeof关键字来查看。
04_js变量类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
基本类型
number 整数 小数 负数
string 字符串 "hello" 'world'
boolean 布尔值 true/false
undefined 未赋值的变量类型就是undefined
null 空引用
引用类型
数组 函数 对象 正则 日期
*/ // 变量名 $ _ 数字 字母 不能以数字开头
//不能是关键字
var i = 10;
var j = 10.2;
console.log(typeof i); //number
console.log(typeof j); //number var a = "hello";
var b = 'world';
console.log(typeof a); //string
console.log(typeof b); //string var f1 = true;
var f2 = false;
console.log(typeof f1); //boolean
console.log(typeof f2); //boolean var c;
console.log(c); //一个变量未定义 值undefined
console.log(typeof c); //undefined 类型 var d = null;
console.log(typeof d); //boolean </script>
</body>
</html>
实现效果：
5.运算符
05_运算符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// + - * /
// + 当有字符串参与 表示字符串拼接 console.log(10/20);
console.log("3"+"4"); //"34"
console.log(typeof("3"+"4")); //string
console.log(10+"5"); //"10"+"5"--->"105"
var x = 10;
console.log("x+2");
console.log(x+2);
console.log(x+"2");
console.log("3"-"4");//相当于 3 - 4 = -1
console.log("3"*"4");//相当于 3 * 4 = 12
console.log("20"+20-10);//"2020" - 10 ---> 2010
console.log(typeof("20"+20-10));//number
console.log("6"-false); //false转成数字0 "6" - 0 = 6
console.log("6"-"5sads");// NaN not a number
console.log(typeof NaN);// number /*
++x与x++
相同点
最终x的值都会在原来基础上加1
区别
y = ++x是先运算后赋值
y = x++是先赋值后运算
*/
var x = 10;
x++; // ++自增运算符 让变量自己加1
console.log(x); // 11 var y = 10;
var k;
// k = y++; // y++整体的值是y之前的值
k = ++y; // ++y整体的值是y+1后的值 k=11
console.log(y);
console.log(k); // % 求余运算符/取模运算符
console.log(4%2); // 0
console.log(15%6); // 3 </script>
</body>
</html>
实现效果：
【JavaScript】初识js的更多相关文章
- 学习JS的第一天--初识JS
1.初识JS a.我的第一个JS程序: document.write("Hello JS")://这段代码是输出到body中就是直接打开就可以看到: console.log(&qu ...
- 初识JS正则表达式
初识JS正则表达式 看到的使用的正则表达式练习:http://www.cnblogs.com/wenanry/archive/2010/09/06/1819552.html PS:本文参考李炎恢JS笔 ...
- [TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)
[TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts) 问题情景 开发人员使用Visual Studio来开发TypeScript,可以很方 ...
- JavaScript之JS实现动画效果
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...
- 阅读：重新介绍 JavaScript（JS教程）
这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有 ...
- Javascript : require.js 的使用（例子）
demo 结构: config.js require.config({ baseUrl: 'js/lib', paths: { 'jquery' : 'jquery-1.11.1.min', ...
- JavaScript（JS）简介
历史背景介绍 (Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript ...
- 【javascript】js 检验密码强度
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...
- Day3JavaScript（一）JavaScript初识以及bom操作
JavaScript简介 什么是JavaScript 弱类型,动态类型,基于原型的直译性的编程语言.1995年netscape(网景)在导航者浏览器中设计完成. JavaScript的特点 1.与HT ...
- 帮助自定义选择框样式的Javascript - DropKick.js
来源:GBin1.com 在线演示 在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...
随机推荐
- C# 泛型（4） 持续更新
泛型可以创建独立于被包含类型的类和方法. C++模板与泛型相似. 泛型优点性能 System.Collections 和 System.Collections.Generic 名称空间泛型和非泛型集合 ...
- Circular view path [mydemo]: would dispatch back to the current handler URL [/mydemo] again. Check your ViewResolver setup!
简单创建一个springboot工程 pom.xml <?xml version="1.0" encoding="UTF-8"?><proje ...
- Load store and memoryless
metal https://developer.apple.com/library/archive/documentation/3DDrawing/Conceptual/MTLBestPractice ...
- Linux查找文件内容小技巧
目录 grep ag linux系统查找文件内容最常见的命令有grep和ag grep grep是比较常见的查找命令 # 在当前目录的py文件里查找所有相关内容 grep -a "broad ...
- BZOJ 2244: [SDOI2011]拦截导弹 (CDQ分治 三维偏序 DP)
题意 略- 分析 就是求最长不上升子序列,坐标取一下反就是求最长不下降子序列,比较大小是二维(h,v)(h,v)(h,v)的比较.我们不看概率,先看第一问怎么求最长不降子序列.设f[i]f[i]f[i ...
- 014_linuxC++之_不同类型的继承
#include <iostream> #include <string.h> #include <unistd.h> using namespace std; c ...
- luogu 1169 [ZJOI2007]棋盘制作 悬线dp
悬线法,虽然得不到局部最优解,但是一定能得到全局最优解的算法,十分神奇~ #include <cstdio> #include <algorithm> #define N 20 ...
- Java进阶知识08 Hibernate多对一单向关联（Annotation+XML实现）
1.Annotation 注解版 1.1.在多的一方加外键 1.2.创建Customer类和Order类 package com.shore.model; import javax.persisten ...
- Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) C 倒序并查集
C. Destroying Array time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 期望与概率dp
概率与期望dp 定义: 概率:事件A发生的可能性,计作P(A) 期望:事件A结果的平均大小,记住E(x) E(x)=每种结果的大小与其概率的乘积的和 注意计算概率时需要考虑是否要用容斥原理 期望d ...