<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>javascript</title>
<p>官网：https://www.runoob.com/js/js-tutorial.html</p>
<body>
<p id="demo">
1.数据类型：5种（字符串 数字（科学计数.小数的运算） 数组 对象 布尔） 声明 使用 变量和常量
2.运算符：
3.比较：==和===
4.语句：比较、循环、条件
5.break(跳出循环) continue（跳出本次循环）
6.insertHtml（带格式）和innerText（不带格式）
7.函数（方法）：1.定义 2.调用 3.=>
8.事件：点击事件
</p>
<p id="demo2">
</p>
<form name="myForm" onsubmit="return formVerify()" method="post">
名字: <input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
<script>
function test() {
var r = Math.random();
var x = document.getElementById("demo")
if (r > 0.5) {
x.innerHTML = r + "\=<a href='http://www.runoob.com'>访问菜鸟教程</a>";
}
else {
x.innerHTML = r + "=<a href='http://wwf.org'>Visit WWF</a>";
}
}
function updateDemo() {
console.trace("innerText");
s = document.getElementById("demo");
s.innerText = "写入内容"
}
function updateColor() {
console.trace("color");
s = document.getElementById("demo");
s.style.color = "red"
}
function switchColor() {
console.trace("match");
s = document.getElementById('demo');
s.style.color = s.style.color.match('red') ? "black" : "red";
console.info(s.style.color)
}
function switchColorThis(s) {
console.trace("matchThis");
s.style.color = s.style.color.match('red') ? "black" : "red";
console.info(s.style.color)
}
function insertHtml() {
console.trace("write");
document.write("<h1>完成测试</h1>");
}
function output() {
window.alert("使用 window.alert() 弹出警告框。");
document.getElementById("demo").innerHTML = "<p>段落1</p><p>段落2</p>";
document.getElementById("demo2").innerText = "<p>段落1</p><p>段落2</p>";
console.log("使用 console.log() 写入到浏览器的控制台。");
document.write("使用 document.write() 方法\将内容写到 HTML 文档中。");
}
function getStringLong() {
var string = "abcdefg";
console.trace(string.length);
}
function outputMark() {
var markString = "\'\'\"\}";
console.trace(markString)
}
function outputDataTypes() {
var x = new Number(111);
console.trace(x);
var z = new Number("aa");
console.trace(z);
var y = new Number("111");
console.trace(y);
}
function ifElse() {
var r = Math.random();
var x = document.getElementById("demo")
if (r > 0.5) {
x.innerHTML = r + "\=<a href='http://www.runoob.com'>访问菜鸟教程</a>";
}
else {
x.innerHTML = r + "=<a href='http://wwf.org'>Visit WWF</a>";
}
}
function switchState() {
var x = "今天是";
var y = new String();
var dayx = new Date().getDay();
switch (dayx) {
case 0:
y = "周日";
break;
case 1:
y = "周一";
break;
case 2:
y = "周二";
break;
case 3:
y = "周三";
break;
case 4:
y = "周四";
break;
case 5:
y = "周五";
break;
case 6:
y = "周六";
break;
}
document.getElementById("demo").innerText = x + y;
}
function forState() {
var userList = new Array();
userList[0] = {"name": "wjf", "age": 12};
userList[1] = {"name": "zhangsan", "age": 15};
for (var i = 0; i < userList.length; i++) {
var user = userList[i];
console.trace(user);
}
}
function formVerify() {
var x = document.forms["myForm"]["fname"].value;
if (!isNaN(x)) {
text = "输入错误，请输入数字(requird)";
return false;
} else if (x < 1 || x > 10) {
text = "输入错误，数字必须[1,10]";
return false;
} else {
text = "输入正确";
return true;
}
}
function errorCatch() {
try {
console.info("捕捉错误。。。");
debugger;
console.in();
} catch (err) {
console.trace(err);
}
}
function variablePromote() {
//变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部
//JavaScript 只有声明的变量会提升，初始化的不会。
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
}
function strictMode() {
"use strict";
x = 3.14;
console.trace(x);
var x;// 报错 (x 未定义)
}
function errList() {
//x的类型一致
var casex = "10";
switch (casex) {
case "10":
console.info("Hello");
}
//加法 字符串连接
var x1 = 10;
var x2 = 20;
var x3 = "20";
var y1 = x1 + x2;
var y2 = x1 + x3;
console.trace("y1:" + y1);
console.trace("y2:" + y2);
// 所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：
var x = 0.1;
var y = 0.2;
var z1 = x + y;
console.info("z1 的结果为 0.3:" + z1);
if (z1 === 0.3) {
console.info(true);
} else {
console.info(false);
}
//字符串分行\n 或者\r\n \n\r
var xString = "Hello\nWorld";
console.info(xString);
}
//return语句
function returnState1(a) {
var x = returnState2(a);
console.info(x);
}
function returnState2(a) {
var
power = 10;
return a * power;//不能对 return 语句进行断行。 return 这行就标志着终止
}
function arrayObj() {
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length; // person.length 返回 3
var y = person[0]; // 返回 "John"
console.info(person);
var user = [];
user["firstName"] = "John";
user["lastName"] = "Doe";
user["age"] = 46;
var x2 = user.length; // user.length 返回 0
var y2 = user["firstName"]; // 返回 "John"
console.info(user);
var man = {};
man["firstName"] = "John";
man["lastName"] = "Doe";
man["age"] = 46;
var x3 = man.length;// man.length 返回 undefined
var y3 = man["firstName"]; // 返回 "John"
console.info(man);
}
function funx() {
var y = 5;
//const x = (y)=>{ return 5 * y }; //一些版本未启用
const x = function (y) {
return 5 * y
};
console.trace(x);
}
function useFunx() {
//0.最常用的函数调用：myFunction();
//1.对象内方法
var myObj = {
firstName: "John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName; // this 指这个对象
}
};
var fullName = myObj.fullName(); // 返回 "John Doe"
console.info("对象方法" + fullName);
//2.构造函数调用方法
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John", "Doe");
console.info("构造函数调用方法" + x.firstName);
//3.构造函数的call方法（注意有返回值）
var myObject;
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // 返回 20
console.info(myObject)
}
</script>
<p>基本用法：
<button type="button" onclick="useFunx()">函数调用</button>
<button type="button" onclick="funx()">函数</button>
<button type="button" onclick="arrayObj()">数组对象</button>
<button type="button" onclick="returnState1(10)">return语句</button>
<button type="button" onclick="errList()">常见错误</button>
<button type="button" onclick="strictMode()">严格模式</button>
<button type="button" onclick="variablePromote()">变量提示</button>
<button type="button" onclick="errorCatch()">异常捕捉</button>
<button type="button" onclick="forState()">for语句</button>
<button type="button" onclick="switchState()">switch语句</button>
<button type="button" onclick="ifElse()">条件语句</button>
<button type="button" onclick="outputDataTypes()">各种数据类型</button>
<button type="button" onclick="outputMark()">输出特殊符号</button>
<button type="button" onclick="getStringLong()">获取字符串长度</button>
<button type="button" onclick="updateDemo()">修改内容</button>
<button type="button" onclick="updateColor()">修改颜色</button>
<button type="button" onclick="switchColor()">切换颜色</button>
<button type="button" onclick="switchColorThis(this)">切换本身对象颜色</button>
<script src="myjavascript.js"></script>
<button type="button" onclick="switchColorExternal(this)()">切换本身对象颜色(外部方法)</button>
<button type="button" onclick="insertHtml()">向页面输入内容</button>
<button type="button" onclick="output()">输出数据</button>
<button type="button" onclick="test()">测试</button>
</p>
</body>
</html>
浙公网安备 33010602011771号